一、今日所学内容
（1）CSS的盒子模型
概念：CSS盒子模型本质上就是一个盒子来封装周围的html元素。盒子模型包括：边框、外边框、内边距、和盒子内的实际内容
边框（border）：
border可以设置盒子的边框
语法：
border：border-width border-style border-coleor；
边框的样式也可以单独设置
border-style
属性值：
solid代表实线边框（最常用）
dashed代表虚线边框
dotted代表点线边框
none可以取消边框
边框的宽度可以设置
border-width：像素值；
边框的颜色可以单独设置
border-color：颜色；
设置不同位置的边框
上边框：border-top
右边框：border-right
下边框：border-bottom
左边框：border-left
边框会影响盒子的实际大小
内边距（padding）
属性 说明
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
内边距的简写（复合）
内边距简写属性
上下左右内边距都是10px
padding: 10px;
上下内边距是10px,左右内边距是50px
padding:10px 50px
上内边距20px 左右内边距为40px,下内边距是60px
padding: 20px 40px 60px;
上右下左的顺序（即顺时针方向赋值）上：20px 右：15px 下：30px 左：10px
padding: 20px 15px 30px 10px
注意：盒子本身没有宽度，padding不会撑开盒子大小
盒子居内边距会撑开大盒子，如果想添加了内边距之后不改变盒子的整体大小，那么用盒子的大小减去内边距的值即可
外边距（margin）
/* 设置上外边距 */
margin-top: 20px;
/* 设置左外边距 */
margin-left: 100px;
/* 设置下外边距 */
margin-bottom: 100px;
/* 设置右外边距 */
margin-right: 100px;
外边距的典型应用
外边距可以让块级盒子水平居中，但是需要满足一下条件
1.盒子必须指定宽度
2.盒子左右的外边距设置为auto
如果是行内元素或者行内块元素设置水平居中，使用text-align：center；来实现即可（给父元素添加该属性）
外边距合并的问题
相邻块元素垂直外边距的合并问题
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距，下面的元素也有上外边距，则他们之间的垂直间距不是两个外边距的值相加，而是他们两个中的最大值
嵌套块元素的垂直外边距塌陷
如果父元素和子元素同时都有上外边距，此时父元素会塌陷加大的边距值
解决办法：
1.给父元素添加上边外距
2.给父元素添加上内边距
3.给父元素添加overflow: hidden;
清除内外边距
网页中的各个元素基本上都有自己所自带的内外边距，使用通配符选择器进行清除后，方便后期的样式调整
（2）CSS的圆角边框
语法：border：radius：length（像素值）；
参数值（属性值）可以为具体的数值或者百分比，border-radius指的是圆的半径
如果想画一个正圆,先画一个正方形,将border-radius的属性值设置为50%即可
可以分别设置四个角的圆角边框,可以使用如下属性
/* 左上角圆角边框 */
border-top-left-radius: 10px;
/* 右上角圆角边框 */
border-top-right-radius: 20px;
/* 左下角圆角边框 */
border-bottom-left-radius: 30px;
/* 右下角圆角边框 */
border-bottom-right-radius: 40px;
（3）盒子的阴影
属性名:box-shadow
属性值:
值 说明
h-shadow 必须值,水平阴影的位置,允许负值
v-shadow 必须值,垂直阴影的位置,允许负值
blur 可选模糊距离
spread 可选模糊的尺寸
color 可选模糊阴影的颜色
inset 可选 将外部阴影改为内部阴影
|
