盒子模型

能过准确阐述盒子模型的4个组成部分 能够利用边框复合写法给元素添加边框 能够计算盒子的实际大小 能够利用盒子模型布局模块案例 能够给盒子设置圆角边框 能够给盒子添加阴影 能够给文字添加阴影

盒子模型 PS基本操作 综合案例 圆角边框 盒子阴影 文字阴影   页面布局三大核心：盒子模型、浮动、定位 看透网页布局的本质 1、准备标签（div p等） 2、设置样式（最麻烦的利用CSS摆盒子） 3、往标签里装内容（插入图片 插入内容） HTML的布局元素 p div看作矩形的盒子，装内容的容器（装的是图片、文字、其他的盒子）   边框： border-width: 5px;  border-style：solid  border-color: pink;   复合border: 1px solid red; border-top: 1px solid red;   border-collapse:collapse; // 相邻边框合并在一起       盒子模型 盒子本身没有指定width/height属性，则此时 padding不会撑开盒子大小.   margin 外边距可以让块级盒子水平居中，必须满足两条件 1、盒子指定了宽度 2、盒子左右设置了auto 对行内元素和行内块元素无效，因为没有宽度。想要让行内、块元素居中需让父级元素添加text-align:center   嵌套块元素垂直外边距的塌陷   子元素想要在父元素下下移100px 解决方案：1、 为父元素定义上边框   2、 为父元素定义上内边距  3、为父元素添加 overflow:hidden; 其他方法：浮动、固定、绝对定位的盒子不会有塌陷问题     清除内外边距 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，转为块级和行内块元素就可以了。   圆角边框： border-radius: 10px;   盒子阴影：box-shadow: 10px//x轴 10px//y轴 10px//虚实 10px//影子大小 black; 文字阴影： text-shadow : 5px 5px 6px rgba(0,0,0,.3)