CSS盒子模型;

盒子是由边框内边距外边距内容四部分组成;

1.边框:border;边框宽度、边框样式、边框颜色

写法:
border-widhth:1px;border-style:solid; border-color:blue;
综合写法:border:1px solid blue;
单个写法:

  1. border-top:1px solid red;
  2. border-bottom: 1px solid blue;
  3. border-left:1px solid red;
  4. border-right:1px solid red;
    表格相邻边框合并:border-collapse:collapse;

边框会影响盒子实际大小:
边框会额外增加盒子的实际大小。因此我们有两种解决方案;
1.测量盒子大写的时候,不量边框;
2.如果测量的时候包含了边框,则需要width/height 减去边框宽度;

2.内边距:padding;

内边距是内容与边框之间的距离;
写法1:

  1. padding-right:10px;
  2. padding-left:10px;
  3. padding-top:10px;
  4. padding-bottom:10px;
    复合写法:

1.只给了一个值的时候:
padding:5px; 表示的意思:1个值,代表上下左右都有5像素内边距;

2.给了两个值的时候;
padding:5px 10px; 表示的意思:2个值,代表上下内边距是5像素,左右内边距是10像素;

3.给了三个值的时候;
padding: 5px 10px 20px; 表示的意思: 3个值,代表上内边距是5像素,左右内边距是10像素 下内边距是20像素;

4.给了四个值的时候;
padding:5px 10px 20px 30px; 表示的意思: 4个值,上是5像素,右是10像素,下是20像素,左是30像素;顺时针来排序的,

padding会影响盒子实际大小;
当我们给盒子指定了padding值之后,发生了两件事情:
1.内容和边框有了距离,添加了内边距;
2.padding影响了盒子实际大小;
也就是说,如果盒子已经有了宽度和高度,此时在指定内边距,会撑大盒子。
解决方案:

1.如果保证盒子跟效果图大小保持一致,则让width/height 减去多出来的内边距大小即可;

2.添加box-sizing:border-box;

3.外边距:margin;

​ 盒子与盒子之间的距离;
​ 写法:

  • margin-right:10px;
  • margin-left:10px;
  • margin-top:10px;
  • margin-bottom:10px;
    复合写法则跟padding一模一样;

外边距典型应用:外边距可以让块级盒子水平居中,但必须满足两个条件
1.盒子必须指定了宽度(width)
2.盒子左右的外边距都设置为auto。
例如:.header{ width:960px; margin:0 auto;}
常见的写法,以下三种都可以:

  • margin-left:auto;margin-right:auto;
  • margin:auto;
  • margin:0 auto;

让行内元素或者行内块元素水平居中
如果遇到行内元素或者行内块元素我也想让他水平居中呢?
行内元素和行内块元素只要给它们的父级元素添加text-align:center;即可

外边距合并

使用margin定义块级元素的垂直外边距时,可能会出现外边距合并。

1.相邻块元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时。如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和。取两个值中较大者这种现象被称为相邻块元素垂直外边距的合并。

解决方案:尽量只给一个盒子添加margin值。

2.嵌套块元素垂直外边距的塌陷

使用margin定义块元素的垂直外边距时,可能会 出现外边距合并。

对于两个嵌套关系(父子关系)的块元素,父元素有上外边距同时子元素也有上外边距,此时父元素会塌陷较大的外边距值。

解决方案:

1.可以为父元素定义上边框。

2.可以为父元素定义上内边距。

3.可以为父元素添加overflow:hidden。

还有其他方法,比如浮动。固定。绝对定位的盒子不会有塌陷问题。原因还没学。


额外提一下清除内外边距;

比如:*{margin:0;padding:0;}