有关CSS的常见问题

元素区分

块元素 div / p / h / ul / li

行内元素 a / span /br

行内块元素 img / input / td

高度塌陷

就是外边距margin塌陷

只会发生在垂直方向，只出现在块级元素上

解决：子绝父相

浮动塌陷

元素一旦****浮动后，脱离标准流，朝着向左或右方向移动，直到自己的边界紧贴包含块(一般是父元素)或者其他浮动元素的边界为止

clear

1
2
3
4
5
6
7
8
div ->  display:float
    span    //float: left
    span    //若未设置高度，则span浮动于父元素上方，产生高度塌陷
    span
    span
    span
    p   ->  clear: both
div

创建BFC

BFC原理详情见文章 “格式化上下文–BFC与IFC”

1
http://154.40.44.42:8090/archives/ge-shi-hua-shang-xia-wen--bfcyu-ifc
1
2
3
4
5
6
7
div ->  display:float / overflow: hidden/auto
    span    //float: left
    span
    span
    span
    span
div

伪元素（!最推荐!）

1
2
3
4
5
6
7
8
div class=clearfix  父元素


.clearfix::after{
    content: ''     //设置为空元素
    display: block  //设置为块级元素
    clear: both     //clear清除浮动
}
三角形
1
2
3
4
w:0
h:0
border: 250px solid transparent
border-方向-color:颜色
固定宽高比

需要父元素

宽高比=4:3示例

1
2
3
4
w:100%              //为父元素100%
h:0
padding:0
padding-bottom:75%  //为父元素75%
超出省略
1
2
3
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
渐变边框
1
2
3
4
5
6
7
8
9
10
11
.box {
    width: 100px;
    height: 100px;
    border: 8px solid transparent; /*8px的透明边框*/
    border-radius: 12px; /*圆角*/
    background-clip: padding-box, border-box;/*background-clip 设置元素的背景是否延伸到边框、内边距盒子、内容盒子下面。背景延伸至边框外沿（但是在边框下层）且背景延伸至内边距（padding）外沿。不会绘制到边框处。*/
    background-origin: padding-box, border-box;/*背景图片的摆放以 border padding 区域为参考*/
    background-image: 
        linear-gradient(to right, #fff, #fff),
        linear-gradient(135deg, #f00, #ff0, #f0f);
}