一、今日内容：
1、css的盒子模型
概念：
页面布局的时候我们要学习三大核心：盒子模型，浮动和定位。
2、盒子模型的组成
1，边框（border）
border属性可以设置元素的边框，边框是由三部分组成：边框的宽度，边框的的样式，边框的颜色。
语法：border：border-wideth border-style boder-color
单独设置边框的样式：
border-width：设置边框的宽度
border-style：设置边框的样式
常用的属性值有：
solid 实线边框
dotted 点线边框
dashed 虚线边框
边框会影响盒子的实际大小
解决方法：如果我们去页面上量盒子的时候，需要width/height减去边框的宽度*2
给表格设置细线边框
属性boeder-collapse：collapse
表示将相邻的边框合并在一起
2，外边距
1，分别设置各个方向的外边距
margin-left：左外边框
margin-right:右外边框
margin-top:上外边框
margin-bottom：下外边框
2，外边距的简写
1，margin后写一个值，代表上下左右都是一样的外边距值
2，margin后写两个值，代表上下外边距和左右外边距
3，margin后写三个值，代表上外边距，左右外边距，下外边距
4，maegin后写四个值，代表顺时针设置上，右，下，左的外边距值
3，外边距的典型应用
3，将块级盒子进行水平居中
1需要满足的条件：1，盒子必须有宽度2，将左右的外边距设置为auto
如果让行内盒子进行水平居中，给父元素加上text-algin：center即可
外边距的合并
概念:
使用margin定义块级元素的垂直外边距时，可能会出现外边距合并的问题
主要有两种情况
2相邻块元素的垂直外边距的合并
概念：
当上下相邻的连个块元素相遇时，如果上面的元素有下外边距，下面的盒子有上外边距，则它们之间的外边距不是上外边距和下外边界的和，而是选择两个边距中较大的进行设置，这种情况就是相邻块元素的垂直外边距合并。
3嵌套块级元素垂直外边距的塌陷
概念：
如果连个嵌套的盒子，父元素有上外边距，子元素也有上外边距。此时父元素会塌陷较大的边距值。
解决方案：1 给父元素定义上边距.2 给父元素添加内外边距 3.给父元素添加overflow：hidden；属性
4清除外边距
概念：
网页元素很多带有有默认值的内外边距，而且不同的浏览器默认的也不同，所有在进行网页布局之前，首先将元素自己带的内外边距给清理是恒有必要的。
3，内边距（padding）
padding的属性来设置内边距，就是边框和内容之间的距离
属性：
padding-left：左内边距
padding-right：右内边距
padding-top：上内边距
padding-bottom：下内边距
如果需用padding简写，使用方法如下
1，padding后写一个值，代表上下左右都是一样的外边距值
2，padding后写两个值，代表上下外边距和左右外边距
3，padding后写三个值，代表上外边距，左右外边距，下外边距
4，padding后写四个值，代表顺时针设置上，右，下，左的外边距值
padding不会撑开盒子的情况
如果盒子没有指定的宽度，就不会被padding撑开盒子，如果指定就会被撑开
如果不想被padding撑开盒子，就高度和宽度减去padding值即可
2、css的圆角边框
在css中使用border-radius属性设置圆角边框
语法：border-radius：像素值/百分比
border-radius只写园的半径
如果想要画一个正圆，就可以先设置一个正方形，然后将border-radius设置为宽高的一半，或者直接写成50%
如果想要设置四个角的圆角边框不一致
border-top-left-radius：左上角圆角边框设置
border-top-right-radius：右上角圆角边框设置
border-bottom-left-radius：左下角圆角边框设置
border-bottom-right-radius：右下角圆角边框设置
3、css的盒子阴影
相应的属性值
h-shadow 必须值，水平阴影的位置，允许有负值
v-shadow 必须值，垂直阴影的位置，允许有负值
blur 可选，模糊距离
spread 可选，阴影的尺寸
color 可选，阴影的颜色
insrt 可选，外部阴影是outset 内部阴影是inset
注意：
默认的阴影是外部阴影（outset），但是不可以在box-shadow写这个单词，否则会造成阴影失效
盒子阴影不占空间，不会影响其他各种的排列
二、今日问题
无
三、解决方案
无
|
