2023-08-06

盒子模型

盒子模型的组成部分：

内容部分 ：content   

设置宽高

内边距：padding          在内容与边框之间的边距

边框：border                  盒子周围

外边距 ：margin            边框以外的边距

设置      内容区域：

width : 100px;

height :100px;

设置边框：

border : solid  10px  #333;

此时盒子的大小会变大，宽  =  width +  左右边框  =120px  ；高  =    height    +    上下边框 =120px;

设置内边距：

padding : 20px 20px 20px 20px;

这四个值分别表示：上  右  下    左      边距此时盒子的大小也会变化·，具体大小不予计算。

设置外边距：

margin :  10px  10px  10px  10px;

这四个值分别表示：上  右  下    左      边距注意： CSS3中，给出一个属性 ：

box-sizing  :    border-box

只要给出了宽和高，设置边框和内边距都不会影响盒子的大小。

清除元素默认的内外边距：

比较通用的写法：

*  {

margin ： 0；

padding  ： 0；

}

让盒子水平居中：

margin : 0  auto  ;

外边距合并现象：

对于两个垂直的块级元素，设定上下margin值时，外边距会合并，计算的时候按照外边距大的计算。

外边距塌陷现象：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上，导致父元素一起往下移动 ，解决变法：

1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）

2. 给父元素设置overflow：hidden

3. 转换成行内块元素

4. 设置浮动