Day_05盒子模型

盒子模型的三大核心——盒子模型，浮动 定位

能够准确阐述盒子模型的4个组成部分

1. 边框
   border可以设置元素的边框
   边框由三部分组成：边框宽度，样式，颜色
   语法：border-width value：单位是px
   border-style value：（边框的样式常用）：solid实线边框，dashed虚线边框，dotted点线边框
   border-color value：边框颜色

能够利用边框复合写法给元素添加边框

边框的复合写法
边框的分开写法：border-top border-bottom
表格的细线边框： border-collapse属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框
collapse：是合并的意思，border-collapse表示相邻边框合并在一起

能够计算盒子的实际大小

边框会影响盒子的实际大小
1.测量盒子的时候不量边框
2.如果测量的时候包含了边框，则需要width/height减去边框宽度

能够利用盒子模型布局模块案例

1. 内容：盒子的实际大小是内容的大小
2. 内边距：盒子内容距边框的内容
   padding会影响盒子实际的大小，当指定了padding值后会发生两件事
   1.内容和边框有了距离，添加了内边距
   2.padding影响了盒子实际大小，也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子

解决:保证盒子跟效果大小一致，则让width/height减去多余出来的内边距大小即可

案例：nav导航栏的字数不一致，要保持边距一致

练习要点：padding在盒子模型中的使用
一定要注意修改padding的值会影响原先盒子模型的大小
如果盒子没有指定width/ height属性，此时padding不会撑开盒子大小
注意：如果孩子的宽度和父亲的宽度一样宽没有必要加width:100%这样在修改padding的大小时，会影响孩子的宽度，因为设置了容器的宽高之后，修改padding值会影响容器的大小
3. 外边距：盒子与盒子之间的距离
外边距的应用：
块级元素水平居中，必须满足两个条件
1）盒子必须指定了宽度（width）
2）盒子左右的外边距都设置为auto
最常用的写法：.header{width:960px;margin:0 auto}
行内块元素水平居中
行内元素或者行内块元素水平居中给其父元素添加text-align：center即可
外边距合并：


清除内外边距：清除网页默认自带的边距
*{ padding：0；margin：0 }
行内元素尽量不要设置上下内外边距，如果一定要设置转为行内块元素或者块元素即可。

综合案例

1. box布局
   块级盒子居中对齐margin：100px auto
2. 图片和段落的制作
   盒子没有width，所有用padding不会撑开左右；图片的宽度和父亲的一样宽width{100%}
3. 评价和详情的制作
4. 竖线细节的制作
   <em></em> style属性设置为normal
   
   案例：快报模块
   
   下面的盒子中，是整个ul的边距，li的边距是对每个li进行设置

能够给盒子设置圆角边框

border-radius:length(length为盒子的边框圆角的大小)

能够给盒子添加阴影

能够给文字添加阴影

text-shadow