所谓盒模型,就是指的块级元素自身拥有的类似于像盒子一样的属性,这本来是html中就带有的,但是直到css中才说这个,是因为一般css中才会用到这个属性,那么,盒模型具体指的是些什么:
1,盒子壁:border
2,内边距:padding(内容和盒子壁border的距离)
3,盒子内容:width+height
4,外边距:margin(盒子与盒子之间的距离)
盒模型由这四部分组成,然后是关于定位的问题,定位分为三种:相对定位,绝对定位,固定定位;用posotion来定义
absolute(绝对定位)会脱离原来的层级位置进行定位,相对于最近的有定位的父级元素进行定位,如果没有就相对文档进行定位。
relative(相对定位)保留原来位置进行定位。。。灵魂出窍,相对于原来的位置进行定位。定位原则:子绝父相。
fixed(固定定位)用于广告定位。相对于窗口view定位
另外定位中的绝对定位和固定定位会触发bfc,相对定位则不会,bfc能解决高度塌陷和margin塌陷的问题,这就又要说到浮动与清理浮动,浮动一般是用来对盒模型进行横向布局的,用float触发,但是元素浮动之后,会导致该元素原本的父元素的高度消失,就是所谓的高度塌陷,解决办法是用清除浮动,或者触发bfc,常用的就是清除浮动,常用的方法有四种,其中最简单的就是overflow:hidden,这个也是触发bfc,但是有可能内容增多的时候因为隐藏导致新增内容不会换行而无法显示,所以不推荐;另外比较推荐的是用伪元素的方式清除浮动,因为伪元素本身就是元素自身带有的,不会新增,代码块为
(要清除浮动的元素)::after{ content:“”; dispilay:block; clear:both; }
另外两种一个是新增元素给其加clear:both;因为要新增元素所以不推荐; 还有用伪元素after和before结合,对于新手好像有点复杂。