三、CSS布局
1、文档流
网页是一个多层的结构，一层摞着一层，通过CSS可以分别为每一层来设置样式。作为用户来讲就只能看到最顶上一层，这些层中，最底下的一层称为文档流。文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列， 对于我们来讲元素主要有两个状态：
在文档流中
不在文档流中（脱离文档流）
元素在文档流中的特点：
块元素：
块元素在页面中独占一行，自上向下垂直排列
默认宽度是父元素的全部即把父元素撑满
默认高度是被内容（子元素）撑开
行内元素：
行内元素不会独占页面内的一行，只占自身的大小
行内元素在页面中自左向右水平排列
如果一行之中不能容下，则元素会换到第二行继续自左向右排列
行内元素的默认宽度和高度都是被内容撑开
2、盒子模型
（1）盒子模型简介
CSS将页面中的所有元素都设置为了一个矩形的盒子，将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置。每一个盒子由四个部分组成：
内容区（content）、内边距（padding）、边框（border）、外边距（margin）
-
内容区（content）
元素中的所有子元素和文本内容都在内容区中排列，内容区的大小由width和height两个属性来设置。width设置内容的宽度，height设置内容的高度。
-
边框（border）
边框属于盒子边缘，边框里面属于盒子内部，出了边框都是盒子外部，边框的大小会影响到盒子的大小，设置边框，至少需要设置三个样式：
-
边框的宽度：
border-widthborder-width如果不写的话浏览器也会默认设置宽度一般为3px的边框，border-width可以用来指定四个方向的边框的宽度，其属性值的情况为：
四个值：上，右，下，左
三个值：上，左右，下
两个值：上下，左右
一个值：上下左右除了border-width还有还一组属性来单独指定某一个边框的宽度：
border-top-width
border-right-width
border-bottom-width
border-left-widthborder-width: 10px; border-width: 10px 20px 30px 40px; border-top-width: 30px; -
边框的颜色：
border-colorborder-color也可以省略不写，如果省略则自动使用color的颜色，如果color没有指定，则默认为黑色。border-color后同样可以跟多个值，值的规则跟border-width相同， border-color同样可以使用border-xxx-color来为每一条变单独设置样式。
border-color: brown; border-color: blue red green; border-bottom-color: blueviolet; -
边框的样式：
border-style常用的样式值：
solid:表示实线
dotted:表示点状虚线
dashed:虚线
double:双线border-style的默认值是none，因此不可以省略
border-style后同样可以跟多个值，值的规则跟border-width相同
border-style同样可以使用border-xxx-style来为每一条变单独设置样式border-style: solid; border-style: solid double; border-left-style: dashed;
以上写法比较复杂，开发中一般不这样写，而是使用border的简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求。除了border以外border-top、border-right、border-bottom、border-left同样可以这样简写。
border: 10px red solid; /* 为盒子设置上左下边框 */ border: 10px red solid; border-right: none; -
-
内边距（padding）
内边距表示内容区和边框之间的距离，一共有四个方向的内边距
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响到盒子的大小，背景颜色会延伸到内边距上padding-top: 100px; padding-right: 100px; padding-bottom: 100px; padding-left: 100px;padding的简写也可以指定四个方向的内边距，规则和border-width一样
padding: 10px 50px 100px 200px;一个盒子可见框的大小，由内容区，内边距和边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算
-
外边距（margin）
外边距不会影响盒子可见框的大小，但是外边距会影响到盒子的位置，盒子实际的占用空间大小发生改变。一共有四个方向的外边距：
margin-top：上外边距，设置一个正值，元素会向下移动
margin-right：默认情况下设置margin-right没有任何作用
margin-bottom：下外边距，设置一个正值，其他元素向下移动
margin-left：左外边距，设置一个正值，元素向右移动margin也可以设置负值，如果是负值则元素会向相反的方向移动
元素在页面中是按照自左向右的顺序排列的，所以默认情况下如果我们设置左和上外边距则会移动元素自身，而设置下和右外边距会移动其他元素。
margin-top: 100px; margin-bottom: 100px; margin-left: 100px;margin同样可以设置四个方向的外边框，规则和padding一样
（2）盒子模型布局
-
水平方向的布局
元素在其父元素中水平方向位置由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right一个元素在其父元素中，水平布局必须要满足以下的等式
(margin-left)+(border-left)+(padding-left)+width +(padding-right)+(border-right)+(margin-right)=父元素内容区域.outer{ width: 800px; height: 200px; border: 10px red solid; } .inner{ width: 200px; height: 200px; margin-left: auto; margin-right: auto; background-color: #bbffaa; } <div class="outer"> <div class="inner"></div> </div>此例中等式表示为：0+0+0+200+0+0+0=800显然等式不能成立。由于浏览器默认以上等式必须成立，如果不成立，则称为过度约束，会对等式自动调整，调整过程为：
没有auto的情况
如果这7个值中没有auto，则浏览器会自动调整margin-right值以使等式成立，即使自己设定了margin-right的值，浏览器依然会根据情况调整，即上述等式变为：0+0+0+200+0+0+600=800-
有auto的情况
这七个值中有三个值可以设置为auto，分别为width、margin-left、margin-right
auto的意思是不去人为设定值，由浏览器自己调整。如果某个值为auto，则会自动调整值为auto的那个属性以使等式成立。- 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
- 如果将三个值都设置为auto,则外边距都是0，宽度最大
- 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
在开发中经常利用这个特点来使一个元素在其父元素中水平居中
-
垂直方向的布局
默认情况下父元素高度被内容撑开
子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。使用overflow属性来设置父元素如何处理溢出的子元素
overflow可选值：
visible: 默认值，子元素会从父元素中溢出，在父元素外的位置显示
hidden: 溢出内容会被裁剪不显示
scroll: 生成两个滚动条，通过滚动条来查看完整的内容
auto: 根据需要自动生成滚动条
overflow-x与overflow-y：单独生成x与y方向的滚动条-
垂直外边距的重叠（折叠）
相邻的垂直方向外边距会发生重叠现象
兄弟元素：
兄弟元素之间的相邻垂直外边距会取两者之间的较大值（两者都是正值时）
特殊情况：
如果相邻的外边距一正一负，则取两者的和
如果相邻的外边距都是负值，则取两者中绝对值较大的
兄弟元素之间的外边距的重叠对于开发是有利的，所以我们不需要进行处理-
父子元素
父子元素间相邻外边距，子元素会传递给父元素（仅上外边距，左外边距不会传递）
父子外边距的折叠会影响到页面的布局，必须要进行处理.box3{ width: 200px; height: 200px; background-color: cadetblue; } .box4{ width: 100px; height: 100px; background-color: chartreuse; margin-top: 100px; margin-left: 100px; } <div class="box3"> <div class="box4"></div> </div>在此例中虽然没有对父元素box3设置上外边距，但是子元素box4的外边距会传递给父元素使得box3拥有了一个大小为100px的上外边距。想要取消这种外边距的传递最简单的方法就是给父元素添加一个
overflow:hidden;即可。
（3）行内元素的盒子模型
行内元素不支持宽度和高度
行内元素可以设置padding，但是垂直方向的padding不会影响页面布局
行内元素可以设置border，但是垂直方向的border不会影响页面布局
行内元素可以设置margin，但是垂直方向的margin不会影响网页布局
.box1{
width: 200px;
height: 200px;
background-color: chartreuse;
}
.s1{
background-color: cornflowerblue;
padding: 100px;
border: 10px solid red;
}
a{
background-color: rosybrown;
}
<span class="s1">我是span</span>
<div class="box1"></div>
<a href="javascript:;">超链接</a>
display用来设置元素显示的类型，可选值：
inline：将元素设置为行内元素
block：将元素设置为块元素
inline-block：将元素设置为块元素，行内块，既可以设置宽度又不会独占一行
table：将元素设置为一个表格
none：元素不再页面中显示（包括其所占的区域都删除）
visibility用来设置元素的显示状态：可选值：
visible：默认值，元素在页面中正常显示
hidden：元素在页面中隐藏，不显示，但是依然占据页面位置
（4）默认样式
通常情况下，浏览器都会为元素设置一些默认样式，默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式。
*{
margin: 0;
padding: 0;
}
（5）盒子的尺寸
默认情况下，盒子可见框的大小是由内容区，内边距和边框共同决定的
box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用），可选值：
content-box:默认值，宽度和高度用来设置内容区大小
border-box：宽度和高度用来设置整个盒子可见框的大小
width和height指的是内容区和内边距和边框的总大小
box-sizing: border-box;
3、轮廓和圆角
（1）轮廓
outline用来设置元素的轮廓线，用法和border一样，轮廓和边框的不同点在于轮廓不会影响到可见框的大小
outline: 10px solid red;
border-shadow用来设置元素的阴影效果
第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动
第二个值：垂直偏移量，设置阴影的垂直偏移量，正值向下移动，负值向上移动
第三个值：阴影的模糊半径，值越大阴影越大
第四个值：阴影的颜色，通常用rgba来设置
box-shadow: 10px 10px 30px rgba(0, 0, 0, .9);
（2）圆角
border-radius用来设置圆角
border-redius可以跟四个值来指定四个角的圆角
四个值：左上 右上 右下 左下
三个值：左上 右上/左下 右下
两个值：左上/右下 右上/左下
一个值：四个角
border-radius: 10px 20px 30px 40px;
可以为一个角设置两个值，第一个是水平方向把半径，第二个值是垂直方向的半径
border-radius: 10px/40px;
将元素设置为圆形
border-radius: 50%;
border-radius同样可以单独为四个角设置样式
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius: 30px;
border-bottom-right-radius: 20px 50px;
