盒子模型

1.1看透网页布局的本质

1.2盒子模型的组成部分 

css盒子模型本质是一个盒子，封装周围的html元素，它包括边框 外边距 内边距和实际内容。

•  padding：盒子与内容间的距离
• margin：盒子与盒子间的距离

1.3border边框 

 1.border-width 边框粗细  

2.boder-style边框样式

代码 

效果如图 

3.border-color边框颜色

4.边框的复合写法 

5.表格细线边框 （boder-collapse）

collapse：倒塌 ，边界倒塌，所以合在一起了

原本都是1像素的边框，如果分开他们 就是看起来就是两像素了

6.边框会影响盒子实际大小

如图所示，边框左右两侧都会多出10px

二.内边距 

padding属性用于设置内边距，即边框与内容之间的距离。

1.padding各属性

2. padding复合写法

 

 3.padding也会影响盒子大小

盒子的宽度需要加上内白那句还有边框 

所以如果要指定盒子大小不变就需要减去边上下左右的内边距 

4.padding撑开盒子用于保持边距相同

 5.padding不会超出盒子的情况

加上padding之后

可以看到在没有指定宽度的情况下，padding不会撑开盒子大小 

指定宽度 

可以看到图片此刻已经溢出了 ，已经超过了屏幕所能容纳的最大宽度了

案例2 

 如图p的宽度还是div的大小，不会超出它的宽度

  

三.外边距margin

margin属性用于设置外边距，即控制盒子和盒子之间的距离。

1. 从第一个的视角

2.从第二个的视角

3.margin的复合写法

margin的复合写法与padding一样

4.外边距典型应用 

1.块级盒子水平居中

  

2.行内元素和行内块元素水平居中 

再使用之前的技巧：让行高等于盒子宽度，既可以实现水平居中对齐了 

 1.行内元素水平居中对齐

  

2.行内块元素水平居中对齐        

5.外边距合并问题

1.嵌套元素垂直外边距塌陷

看下面这代码，把两个块级元素嵌套在一起，父级元素的上外边距设置为100px，子级元素设置为50px，为何子块元素没有向下移动50px

 

如图看布局只有100px

2.解决方案

1.父元素定义上边框

就我猜测啊是两个块级元素的起点重合在一起了，所以margin-top的时候以为是一体的，最终使得只有大的边距起效果，所以可以给父盒子添加外边框，使得可以区分 

 2.给个内边距

给父亲素一个padding也就把它和儿子隔开了

 

3.overflow：hidden（最佳）

 

5.清除内外边距

网页元素很多带有默认的内外边距，而且不同浏览器默认的也不一致，因此我们在布局前，首先要清楚下网页元素的内外边距。

例如谷歌浏览器的外边距都是默认为8的 

 

1.通配符选择器

通配符选择器优先级最低，先拿他把所有边距都给清了 

 

2.案例 

我们知道ul初始就有40的内边距

现在来清除它