H5/C3进阶(6) -- CSS盒子模型

7、CSS盒子模型

7.1、盒子模型

页面布局要学习的三大核心，盒子模型 ， 浮动 和 定位 。学习好盒子模型能非常好的帮助我们布局页面。

7.1.1、看透网页布局的本质

网页布局过程;

1.先准备号相关的网页元素，网页元素基本都是盒子 Box。

2.利用CSS设置好盒子样式,然后摆放到相应位置。

3.往盒子里面装内容。

网页布局的核心本质:就是利用CSS摆盒子。

7.1.2、盒子模型（Box Model）组成。

所谓 盒子模型 :就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

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

7.1.3、边框border

border可以设置元素的边框。边框有三部分组成边：边框宽度(粗细) 、 边框样式 、边框颜色。

语法：

边框样式;

边框简写：

号外：边框可以分开写 ！

（下边框）

7.1.4、表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法:

● collapse 单词是合并的意思。

● border-collapse: collapse;表示相邻边框合并在一起。

7.1.5、边框会影响盒子的实际大小

​边框会额外增加盒子的实际大小。因此我们有两种方案解决:

1.测量盒子大小的时候不量边框。

2.如果测量的时候包含了边框,则需要width/height减去边框宽度。

7.1.6、内边距（padding）

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

简写属性：

注意:

1.内容和边框有了距离,添加了内边距。

2.padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：

如果保证盒子跟效果图大小保持一致,则让width/height减去多出来的内边距大小即可。 （盒子里字数不一样(如导航栏），建议不设置宽和高，利用文字，撑开盒子。）
（设置宽高）
（不设置宽高）
如何盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小。

7.1.7、外边距（margin）

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

简写：

简写方式代表的意义跟padding完全一致。

7.1.8、外边距典型应用

外边距可以让块级盒子 **水平居中，**但是必须满足两个条件：

① 盒子必须指定了 宽度 (width)。

② 盒子 左右的外边距 都设置为 auto 。

语法：

常见的写法，以下三种都可以:

● margin-left: auto; margin-right auto;

● margin: auto;

● margin: 0 auto;（常见）

注意 ：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text: align:center 即可。

7.1.9、外边距合并

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

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

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

图示：

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

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

解决方案：

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

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

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

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

7.1.10、清除内外边距

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

语法：

（一般写在 CSS的第一句代码位置。）

注意:

行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

8.总结

1.布局为啥用不同盒子 ?

• 标签都是有语义的,合理的地方用合理的标签。比如产品标题就用h,大量文字段落就用p

2.为啥用辣么多类名?

• 类名就是给每个盒子起了-个名字可以更好的找到这个盒子，选取盒子更容易,后期维护也方便。

3.到底用margin还是padding ?

• 大部分情况两个可以混用,两者各有优缺点,但是根据实际情况,总是有更简单的方法实现。

4.自己做没有思路?

• 布局有很多种实现方式，可以先模仿别人的写法，然后再做出自己的风格。

最后一定多运用辅助工具比如屏幕画笔、ps等等。

8.CSS盒子的样式

（CSS3后来添加的，有兼容性的问题，但对页面布局不影响）

8.1、盒子圆角边框（圆角矩形）

举例 ：

在CSS3中,新增了 圆角边框 样式,这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角。

语法:

radius半径(圆的半径)原理: (椭)圆与边框的交集形成圆角效果

图示：

常用写法：

● 参数值可以为 数值 或 百分比 的形式。

● 如果是正方形,想要设置为一一个圆,把数值修改为 高度或者宽度的一半 即可,或者直接写为 50% 。

● 如果是个矩形,设置为高度的一半就可以做 。

● 该属性是一个简写属性,可以跟四个值,分别代表 左上角 、右上角 、右下角 、左下角 。（顺时针）

●分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border- bottom-left-radius 。

8.2、盒子 （重点）

CSS3中新增了盒子阴影,我们可以使用box-shadow 属性为盒子添加阴影。

语法：

属性：

注意:

1.默认的是外阴影(outset),但是不可以写这个单词否则导致阴影无效。
2.盒子阴影不占用空间,不会影响其他盒子排列。
（颜色）

补充：原先盒子没有影子，当鼠标经过盒子添加阴影效果。

8.3、文字阴影（了解）

在CSS3中,我们可以使用 text- shadow 属性将阴影应用于文本。

语法 ：

属性 ：