CSS - 分享生活和学习中的点点滴滴

前端技术 2023/09/05 CSS

当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候，在IE和FF中都会撑大容器，不会自动换行并且当数字或者英文中带有汉字时，会从汉字处换行，而纯汉字却可以自动换行。这个问题如何解决？先来认识一下两位主角word-wrap和word-break wor...

前端技术 2023/09/05 CSS

需求描述：移动端实现横跨页面半圆。（类似问题，实现4x4的正方形网格）简化问题，我们可以理解为实现一个高度和宽度比为1:2的块。需要解决问题：　　　　　　　1，高度和宽度按照一定比例。　　　　　　　2，外容器高度和宽度不确定。　　　　　　　3，尽量不使用图片和脚本替代...

深入剖析CSS弹性盒模型flex

前端技术 2023/09/05 CSS

CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的...

前端技术 2023/09/05 CSS

关于布局的细节，表单确实很麻烦，浏览器的渲染多少总有那么一些差异，闲话不扯了，下面是关于select标签高度的一点心得，不对之处请，欢迎大家指正。以下是各个浏览器对于select标签的设置高度属性支持的图：图片是网络查找到的素材，不过自己测试了一下 IE7...

前端技术 2023/09/05 CSS

第一篇：在处理CSS的机制上，拿对伪类:hover的支持来说，IE7+添加了对a以外其它标签的支持，但在IE6下:hover就连对a的支持都不是那么的尽如人意。有的时候为了增加一些简单的动态效果，常常会借助:hover的帮忙，比如我们时常会令鼠标经过链接时改变文字的颜色。如：...

前端技术 2023/09/05 CSS

可选择紧接在另一个元素后的元素，且二者有相同的父级元素下面代码中，item2和item3会有效果，而item1不会有 HTML代码： XML/HTML Code复制内容到剪贴板 <ul> <li>item1</li> ...

前端技术 2023/09/05 CSS

1.区别IE和非IE浏览器CSS HACK代码复制代码代码如下:#divcss5{background:blue; /*非IE 背景藍色*/background:red \\9; /*IE6、IE7、IE8背景紅色*/} 2.区别IE6,IE7,IE8,FF CSS HACK...

前端技术 2023/09/05 CSS

使用 CSS 可以创建一个鼠标移入后显示下拉菜单的效果。 1、下拉菜单的实现当鼠标移入指定元素时，显示下拉菜单。代码如下： XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html> <head&g...

前端技术 2023/09/05 CSS

Display的属性值 block：/*表现为一个块级元素（一般情况下独占一行）*/当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<DIV>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的d...

前端技术 2023/09/05 CSS

1.white-space:normal; 这个只针对中文有效 2.word-break:break-all; 强制换行，针对中文，数字，英文等都有效； 3.word-wrap:break-word; 英文单词碰到换行的时候，整个单词换行：

关闭

我的博客