2020-10-23 CSS（三）

学习目标：

1. CSS盒子模型
2. 圆角边框
3. 盒子阴影

学习内容：

1.盒子模型
页面布局要学会三大核心，盒子模型、浮动和定位。
1.1看透网页布局的本质
网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子box
2. 利用CSS设置好盒子样式，然后摆放到相应位置
3. 往盒子里面装内容

网页布局的核心：利用CSS摆盒子

1.2 盒子模型（Box Model）组成
所谓盒子模型：就是把html页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型本质上就是一个盒子，封装周围的html元素，它包括：边框（border）、外边距（margin）、内边距（pedding）、和实际内容（content）。

1.3 边框（border）
border可以设置元素的边框，边框由三部分组成：边框宽度、边框样式、边框颜色
语法：

border：border-width || border-style  || border-color

border-style属性：

属性	描述
none	无
solid	实线边框
dashed	虚线边框
dotted	点线边框

边框简写：

border：1px solid red；没有顺序

边框分开写法：

border-top: 3px solid pink;
border-bottom: 3px solid paleturquoise;
border-left: 3px dashed wheat;
border-right: 3px dotted thistle;

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

border-collapse：collapse；

• collapse是合并的意思

1.5 边框会影响盒子实际大小
边框会增加盒子的实际大小，因此我们有两种解决方案：

• 测量盒子大小的时候，不量边框
• 如果测量的时候包含了边框，则需要weight/height减去边框宽度

1.6 内边距
padding属性用于设置内边距，即边框与内容之间的距离。
padding-left、padding-right、padding-top、padding-bottom

padding简写

值的个数	表达意思
padding：5px ；	1个值，代表上下左右都是5像素内边距
padding：5px 10px；	2个值，代表上下是5像素内边距，左右内边距是10像素
padding：5px 10px 20px；	3个值，代表上边距是5px，左右边距是10px，下边距是20px
padding：5px 10px 20px 30px	4个值，代表上边距是5px，右边距是10px，下边距是20px，左边距是30px。顺时针

• 内边距把内容和边框分开
• 内边距也会影响盒子大小
• 内边距可以撑开盒子，我们可以做非常巧妙的应用
• 如果盒子本身没有指定宽和高，则此时padding不会撑开盒子大小

1.7 外边距（margin）
margin属性用于设置外边距，控制盒子和盒子之间的距离
margin-left、margin-right、margin-top、margin-bottom
margin简写方式和padding一样

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

• 盒子必须指定了宽度（width）
• 盒子的左右外边距都设置为auto

.header{ width:960px;margin:0 auto;}

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

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

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

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

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

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

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

解决方案

1. 可以为父元素定义上边框
2. 可以为父元素定义内边距
3. 可以为父元素添加overflow：hidden

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

*{
padding:0;
margin:0;
}

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

总结：

1. 标签都有语义，合理的地方用合理的标签
2. 给每一个盒子起一个类名，可以更好地找到盒子，也方便后期维护
3. 根据实际情况，使用padding和margin
4. 布局有很多种实现方式

新知识点：去掉li前面的项目符号

list-style：none；

CSS3新增属性：
1 圆角边框
语法：

border-radius：length；

radius 半径原理：圆与边框的交集形成圆角效果

• 参数值可以是数值或者百分比的形式
• 如果是正方形，想要设置为一个圆，把数值修改为边长的一半，或者直接写为50%
• 如果是一个矩形，设置为高度的一半，就可以做圆角矩形
• 该属性是一个简写属性，可以调左上、左下、右上、右下四个角
• 分开写：border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius

2 盒子阴影
语法：

box-shadow：h-shadow v-shadow blur spread color inset；

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影改为内部阴影

注意：

1. 默认的是外阴影，但是不可以写这个单词，否则导致阴影无效
2. 盒子阴影不占用空间，不会影响其他盒子排列

文字阴影
语法：

text-shadow：h-shadow v-shadow blur color；

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离
color	可选，阴影的颜色