1、块元素特性:
独占一行,默认竖着排列
2、内嵌元素特性:
宽度为内容的宽度,横着排列,不独占一行
3、浮动
子元素浮动,父元素塌陷,就必须解决父元素的塌陷。解决方法:
- 给塌陷的父容器的最后添加一个没有意义的子容器,然后给该容器清除塌陷,一般清除所有。
.clearDiv {
clear: both;//清除所有(也可以只清除)
}
<div class=".clearDiv"></div>
-
给塌陷的父元素设置overflow:hidden;(溢出隐藏),因为会触发BFC。
-
给塌陷的父元素清除浮动(常用的方法)
.clear::after {
content: "";//content内容为空
display: block;//将这个内容content转化成块元素
clear: both;//清除浮动
}
<div class="clear">
<div class="left"></div>
<div class="right"></div>
</div>
什么时候需要浮动呢?当想把块元素横着排列的时候,就应该给块元素设置浮动
4、margin计算规则
-
上下兄弟元素之间margin去最大值
-
左右兄弟元素之间margin相加
5、在父元素位浮动的情况下,子元素设置margin-top/margin-bottom会将父元素拉下来(margin-top/margin-bottom会作用于父元素)
解决办法:
- 给父元素加边框border
- 给父元素设置overflow
- 不设置子元素的上下外边距,设父元素的上下内边距
6、百分比问题
width和padding/margin/position/border的百分比单位都相对于父元素的宽度的百分数。如果有定位的话,需要关注相对于谁定位,百分比就相对于谁。
7、box-sizing
box-sizing将改变width属性的计算方式,传统的width的属性是内容宽度,当设置了box-sizing后,width将是border+padding+内容。
8、position
- 绝对定位:相对于有定位属性的祖先元素;如果没有则相对于body,会脱离文档流和文本流
- 相对定位:相对于自己本身,不脱离文档流
- 固定定位:相对于浏览器进行定位,会脱离文档流和文本流
- 绝对定位和相对定位设置上下左右,会改变width,height的基准点