2020-11-07

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：这种定位方式下元素将脱离文档流，不占据空间，文档流中的后续元素将填补它留下的空间。