Open rhymecoding opened 6 years ago
本篇为下一篇盒模型做准备。
HTML元素分为两种:块级元素(block-level)和内联级元素(inline-level)。
块级元素与display:block并不是对应的,凡是独占一行的元素都算是块级元素,所以display:list-item/table也是块级元素。
利用块级元素独占一行的特性,结合伪元素可以清浮动
.clearfix::after { content: ''; display: block; // 只要是块级元素就行,比如还可以是table clear: both; }
1.块级元素独占一行; 2.块级元素可以设置width、height,内联级元素不行; 3.块级元素可以设置margin和padding,内联级元素只能设置水平方向的margin(margin-left、margin-right)和padding(padding-left、padding-right);
本篇为下一篇盒模型做准备。
HTML元素分为两种:块级元素(block-level)和内联级元素(inline-level)。
块级元素与display:block
块级元素与display:block并不是对应的,凡是独占一行的元素都算是块级元素,所以display:list-item/table也是块级元素。
利用块级元素独占一行的特性,结合伪元素可以清浮动
块级元素与内联级元素的区别
1.块级元素独占一行; 2.块级元素可以设置width、height,内联级元素不行; 3.块级元素可以设置margin和padding,内联级元素只能设置水平方向的margin(margin-left、margin-right)和padding(padding-left、padding-right);