CSS（3）深入了解盒模型/标准文档流

一、盒模型初步认识

1.1 border
边框：（边框必须写全3个属性值）
border:复合属性，可以使用复合写法，每一个小属性值之间用空格隔开。
（边框宽度 类型 颜色）

1	border: 10px solid #000;

可以按照类型进行拆分：
border-width：线的宽度
border-style: 线类型
solid(实线)
dashed(虚线)
dotted(点线)
border-color: 线的颜色

1	border-width: 50px;
2	border-style: dotted;
3	border-color: red;

可以按照方向进行拆分：

1	border-left;//左边框
2	border-right//右边框
3	border-top//上边框
4	border-bottom//下边框

可以按照方向和类型一起拆分（先写方向）

1	border-top-color: red;
2	border-left-style: dotted;
3	border-right-width: 20px;

单线表格：
border-collapse: 表格是否塌陷
默认：separate(分离，分开)
塌陷： collapse

样式：

1	table, tr, th, td {
2		border: 1px solid #000;
3		/*表格塌陷*/
4		border-collapse: collapse; }

结构：

1	<table>
2		<!-- 标题 -->
3		<caption>单线表格</caption>
4		<!-- 表头 -->
5		<thead>
6			<tr>
7				<th>1</th>
8				<th>2</th>
9				<th>3</th>
10				<th>4</th>
11			</tr>
12		</thead>
13		<!-- 主体 -->
14		<tbody>
15			<tr>
16				<td>1</td>
17				<td>2</td>
18				<td>3</td>
19				<td>4</td>
20			</tr>
21			<tr>
22				<td>1</td>
23				<td>2</td>
24				<td>3</td>
25				<td>4</td>
26			</tr>
27			<tr>
28				<td>1</td>
29				<td>2</td>
30				<td>3</td>
31				<td>4</td>
32			</tr>
33			<tr>
34				<td>1</td>
35				<td>2</td>
36				<td>3</td>
37				<td>4</td>
38			</tr>
39		</tbody>
40	</table>

利用边框书写三角形（width，height设置为0）

1	.box {
2		width: 0px;
3		height: 0px;
4		border: 50px solid green;
5		border-left-color: red;
6		border-bottom-color: blue;
7		border-right-color: orange;
8		/*透明色 transparent  上 右 下 左*/
		/* 上 右 （左）下*/
9		border-color: green transparent transparent;
10		/*没有 边框 None*/
11		border-bottom: none;	}

二、盒模型扩展

2.1 清除默认样式
很多标签都有默认样式，这些默认样式可能不是我们想渲染的需要先清除（书写样式第一步先清除默认样式）
比如div,body,ul,dl等有默认padding，margin。现在使用通配符将所有标签重置为0

1	* {
2		margin: 0px;
3		padding: 0px;	}

无序列表，有序列表，默认小圆点样式。

1	ul, ol {
2		/*去掉小圆点*/
3		list-style: none;}

a超级链接默认颜色和下划线

1	a {
2		color: #333;
3		text-decoration: none;	}

2.2 宽度剩余法
一般在书写样式，左内边距是确定，右侧根据内容不同剩余右内边距不确定。我们利用宽度剩余法进行。直接给盒子一个足够的宽度，右侧根据多少就是多少。左内边距需要设置。

书写代码：padding-left给确定值，padding-right设置0. 盒子宽度要足够大，自动剩余

1	.box {
2		width: 400px;
3		height: 400px;
4		border: 1px solid #000;
5		/*左内边距确定值*/
6		padding-left: 15px;
7		padding-right: 0px; //可以不设置	}

2.3 height
对于新闻类的内容，内容是随时变化的，盒子高度不便于设置，一般我们会让内容撑高盒子高度。

1	.box {
2		width: 400px;
3		border: 1px solid #000;
4		padding-left: 15px;
5	//省略Height设置，内容自动撑高	}

2.4 margin
margin垂直方向塌陷
两个上下排列的盒子，上盒子有一个下margin，下盒子有一个上margin，他们的距离不是mg之和而是小margin塌陷在大margin中。

1	.box1 {
2		margin-bottom: 50px;
3	}
4	.box2 {
5		margin-top: 80px;	}
 /*两个盒子的间距为80px*/

margin不能用儿子去踹父盒子

两个嵌套的盒子，他们之间想有一个上距离，如果用子盒子margin去踹父盒子，会带着父盒子一起距离浏览器有一个距离。

1	.box {
2		width: 300px;
3		height: 300px;
4		background-color: lightblue;
5	}
6	.box .son {
7		width: 200px;
8		height: 200px;
9		background-color: pink;
10		/*设置子盒子mgt*/
11		margin-top: 50px;12	}

解决办法：强制给父盒子区域（比如加边框）

1	.box {
2		width: 300px;
3		height: 300px;
4		background-color: lightblue;
5		border: 1px solid #fff;
6	}
7	.box .son {
8		width: 200px;
9		height: 200px;
10		background-color: pink;
11		margin-top: 50px;12	}

解决办法：给父盒子设置padding。

1	.box2 {
2		width: 300px;
3		height: 250px;
4		background-color: green;
5		padding-top: 50px;
6	}
7	.box2 .son2 {
8		width: 200px;
9		height: 200px;
10		background-color: pink	}

对于同级元素，他们之间有距离使用margin。

盒子水平居中：
margin: 0 auto; (二值法：上（下） 右（左） )
auto: 自动（自动撑开盒子让左右距离撑开最大）

1	margin: 0 auto;

2.5 居中
文本居中：
文本水平居中：;

1	 text-align: center

单行文本垂直居中：盒子高度和行高相同

1	height: 100px;
2	line-height: 100px;

多行文本垂直居中：
盒子不设置高度，同时设置上下相等的padding

1	padding: 30px 0;

盒子居中：
水平居中：margin: 0 auto;
垂直居中： 父盒子不设置高度，同时设置上下相等的padding

1	/*盒子垂直居中*/
2	.box5 {
3		width: 400px;
4		/*height省略不写，内容撑开*/
5		padding: 40px 0px;
6		border: 1px solid #000;
7	}
8	<div class="box5">
9		<div class="son">son在box5垂直居中</div>
10	</div>

2.6 父子嵌套盒模型
父子嵌套盒模型：子盒子最大占有宽度不能超过父盒子内容宽度，子盒子如果有padding，border需要内减

1	.box {
2		width: 400px;
3		height: 400px;
4		padding: 50px;
5		background-color: lightblue;
6		border: 1px solid #000;
7	}
8	.box .son {
9		/*子盒子最大能够占有的宽度400px*/
10		width: 280px;
11		height: 200px;
12		padding: 50px;
13		border: 10px solid #eee;
14		background-color: pink;15	}
 

三、标准文档流

标准文档流类似于word文档，书写是有顺序，光标位置决定书写位置，前面文字变大，图片改变会光标会下移。
word文档：从上到下，从左到右
标准文档流： 从上到下，从左到右

3.1 特点
文本内容之间有空白折叠现象。

文本内容高矮不同，底边对齐效果。

文本内容超过盒子宽度会自动换行（汉字，单词）。

3.2 分类
标准文档流中标签分类：
块级元素： 所有的容器级标签都是块级元素（p标签也是块级元素）
行内元素： 所有的文本级标签都是行内元素（p标签除外）
1 块级元素：p,h1-h6,div,dl,ul,ol,li等
2 行内元素：span,input,img,b,u,i,a

块级元素特点：
 独占一行
 可以设置宽高
 如果不设置宽度，子盒子自动盛满父盒子的内容区域。（width是盒子属性不能继承）

行内元素特点：
 行内元素并排显示
 行内元素不能设置宽高
 行内元素大小是内容撑开的。

行内元素和块级元素可以相互转换
display:显示模式
block(行内元素转为块级元素，块级有什么特性，那么这个元素就有什么特性)

1	.btn {
2		width: 200px;
3		height: 60px;
4		background-color: lightblue;
5		display: block;
6		font-size: 20px;
7		text-align: center;
8		line-height: 60px;
9		/*水平居中*/
10		margin: 0 auto;	}

inline(块级元素转为行内元素)
inline-block(行内块，既可以并排显示又可以设置宽高)

在制作网页时，只使用标准文档流不能制作精美的网页，需要将元素脱离标准文档流（脱标）。
脱标： 浮动float, 绝对定位，固定定位

四、浮动

float: 浮动，漂浮。
属性值：left(左浮动)
right(右浮动)

1	float: left;

4.1 浮动元素性质
4.1.1 浮动的元素脱离标准文档流
体现：不在区分块级元素和行内元素，既可以设置宽高，又可以并排显示。

1	div {
2		width: 200px;
3		height: 200px;
4		background-color: lightblue;
5		display: inline;
6		float: left;
7	}
8	span {
9		width: 200px;
10		height: 200px;
11		background-color: pink;
12		display: block;
13		float: left;	}

4.1.2 浮动贴边显示
 以左浮动为例（元素依次贴边显示）

 父盒子宽度不够，子盒子也会自动换行，继续向前一个元素贴边显示

 子盒子不会钻盒子