页面布局要学习三大核心，盒子模型、浮动和定位，学习好盒子模型能非常好的帮助我们进行页面布局。
网页布局过程：
先准备好相关的网页元素，网页元素基本都是盒子Box利用CSS设置好盒子样式，然后摆放到相应位置往盒子里面装内容网页布局的核心本质：利用CSS摆盒子。
它包括：边框border、外边距margin（设置盒子与盒子直接的距离）、内边距padding（设置内容和边框的距离）和实际内容content
border可设置元素的边框
可以通过 border-top border-bottom border-left border-right 分别设置上、下、左、右边框。
如何将一个200*200的盒子，设置上边框为红色，其余边为蓝色。
一般思路，分别设置上下左右：
<style> div { width: 200px; height: 200px; border-style: solid; border-top-color: red; border-left-color: blue; border-right-color: blue; border-bottom-color: blue; } </style> </head> <body> <div> </div> </body>上面这么写显然很麻烦，可以运用样式的层叠性进行修改：
<style> div { width: 200px; height: 200px; border-style: solid; border-color: blue; border-top-color: red; /*会覆盖blue*/ } </style> </head> <body> <div> </div> </body>boder-collapse属性控制相邻单元格的边框
border-collapse: collapse;表示相邻边框合并在一起，否则会出现相邻单元格变粗的情况。
边框会额外增加盒子的实际大小，因此存在两种解决方案：
测量盒子大小的时候，不量边框
如果测量的时候包含了边框，那么则需要减去左右边框的大小
例如：想要设置加上边框是200px，而边框的大小是10px，那么 width 和 height 就需要设置成180px
padding用于设置内容与边框之间的距离
padding-top padding-bottom padding-left padding-right 分别用于设置上下左右内边距。
如果盒子已经有了实际的大小，那么设置内边距会撑大盒子。
举个栗子
<style> div { width: 200px; height: 200px; padding: 10px; } </style>那么实际上盒子的大小是 220px * 220px
如果要保持原来的大小，那么需要设置成
<style> div { width: 180px; height: 180px; padding: 10px; } </style>如果遇到嵌套的情况，子元素没有设定宽高度，那么设置padding不会撑开父元素的盒子。
如：
<style> div { width: 200px; height: 200px; } p { height: 30px; padding: 10px; /*由于宽度没有设定，因此宽度上不会撑到父盒子的外面*/ } </style> <div> <p> </p> </div>上面的表述可能不够直观，可以给背景设定颜色，实际实验下。
margin用于设置属性外边距，用于控制盒子与盒子之间的距离
属性意义margin-top上外边距margin-bottom下外边距margin-left左外边距margin-right右外边距margin的复合写法和padding一致
外边距可以让块级盒子水平居中，但是必须满足两个条件：
盒子必须指定宽度（width）盒子左右边距都设置成auto例如：
<style> div { width: 200px; height: 200px; background-color: blue; margin: 0 auto; } </style> <body> <div>我想居中</div> </body>常见写法：
margin-left: auto; margin-right: auto;margin: auto;margin: 0 auto; （常用写法）注意：以上方法是让块级元素水平居中，而行内元素和行内块元素的水平居中可以给父元素添加text-algin: center;
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素设置了下外边距margin-bottom，下面的元素设置了上外边距margin-top，则它们之间的垂直间距并不是 margin-bottom + margin-top，而是取两个值中的较大者。这种现象称为相邻块元素垂直外边距的合并。 例如：
<style> .one { width: 200px; height: 200px; background-color: balck; margin-bottom: 20px; } .two { width: 200px; height: 200px; background-color: balck; margin-top: 10px; } </style> <body> <div class="one"> 我是盒子1 </div> <div class="two"> 我是盒子2 </div> </body>这个例子中，两个盒子之间的间距并不会是30px，而是20px 。
所以，尽量只给一个盒子添加margin值
对于两个嵌套关系（父子关系）的块元素，当父元素和子元素同时都设置了上外边距时，父元素会向下塌陷较大的外边距值，并且子元素并不会和父元素隔开，即子元素设置的上外边距没有效果。
解决方案：
可以为父元素定义上边框可以为父元素定义上内边距可以为父元素添加 overflow: hidden还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面会总结。
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致，因此在布局前，首先要清除网页元素的内外边距
代码如下：
* { padding: 0; margin: 0; }注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，如果要设置，需要转换成块级元素或行内块元素。
在CSS3中，新增了边框圆角的样式，可以使得方方正正的边框变得圆润
border-radius属性用于设置元素的外边框圆角
语法：
border-radius: 10px;具体效果可自己敲一敲尝试下
注意它的一些使用：
参数值可以为数值和百分比的形式如果想要设置一个圆形的盒子，那么需要准备一个正方形的盒子，使它的边长等于圆的直径。然后再设置border-radius: 50%就可以得到一个圆形的盒子了如果想要设置圆角矩形，那么只需将圆的半径设置成矩形高度的一半就可以了 border-radius: 高度的一半值该属性是一个简写属性，如果只设置一个值，那么四个角的效果都相同。它可以设置四个值，分别代表左上角、右上角、右下角和左下角（顺时针），分别用 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius来设置CSS3中，新增了盒子阴影属性，通过box-shadow为盒子添加阴影
语法：
box-shadow: h-shadow v-shadow blur spread color inset; 值描述h-shadow必需，水平阴影的位置，允许负值v-shadow必需，垂直阴影的位置，允许负值blur可选，模糊距离spread可选，阴影的尺寸color可选，阴影的颜色inset可选，将外部阴影（outset）给为内部阴影具体的效果可以自己调试查看，但是需要注意：
通常blur等属性都需要自己设置，因为默认的会比较丑
outset 是默认值，如果不写inset，那么就不需要写outset，否则阴影效果无法显示 例如，像这样写就无法显示阴影效果
box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3) outset;应该改成：
box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);盒子阴影不占用空间，不影响其他盒子的排列
CSS3中，可以通过text-shadow属性设置文本的阴影
语法：
text-shadow: h-shadow v-shadow blur color; 属性描述h-shadow必需，水平阴影的位置，允许负值v-shadow必需，垂直阴影的位置，允许负值blur可选，模糊距离color可选，阴影的颜色文字阴影在实际开发中使用的其实并不多
