CSS 盒模型
盒子由外到内可以分成四个部分:
margin(外边距)、border(边框)、padding(内边距)、content(内容)
有两种盒模型:
1)IE盒子模型:宽高是指content+padding+border
2)标准 W3C 盒子模型:宽高是指content
设置盒模型的方式是:设置box-sizing
1)标准盒模型:box-sizing:content-box
2)IE盒模型: box-sizing:border-box
盒子模型的定位方式:
1)网页默认布局
正常情况下,页面中的块状元素呈现自上而下的动态分布形式,内联元素则是按照从左到右的方式存在
2)浮动
脱离标准流,不再占用任何文档流空间。元素设置为浮动以后,会生成一个块级元素,而不论它本身是何种元素。且要指明一个宽度,否则它会尽可能地窄;另外当可供浮动的空间小于浮动元素时,它会跑到下一行,直到拥有足够放下它的空间。
3)Position定位
相对定位relative:这种定位方式下元素不脱离文档流,仍然保持其未定位前的形态并且保留它原来所占空间。偏移时以自身位置的左上角作为参照物,通过left、top、right和bottom四个方向的属性来定义偏移的位置。
绝对定位absolute:这种定位方式下元素将脱离文档流,不占据空间,文档流中的后续元素将填补它留下的空间。