CSS基础复习第三天

这是我参与更文挑战的第28天，活动详情查看：更文挑战

盒模型初步认识

border

边框：（边框必须写全3个属性值）

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

border: 10px solid #000;
复制代码

可以按照类型进行拆分：

border-width：线的宽度
border-style: 线类型
solid(实线)
dashed(虚线)
dotted(点线)
border-color: 线的颜色
复制代码

border-width: 50px;
border-style: dotted;
border-color: red;
复制代码

可以按照方向进行拆分：

border-left
border-right
border-top
border-bottom
复制代码

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

border-top-color: red;
border-left-style: dotted;
border-right-width: 20px;
复制代码

单线表格：

border-collapse: 表格是否塌陷
默认：separate(分离，分开)
塌陷： collapse
复制代码

样式：

table, tr, th, td {
	border: 1px solid #000;
	/*表格塌陷*/
	border-collapse: collapse;
}
复制代码

结构：

<table>
	<!-- 标题 -->
	<caption>单线表格</caption>
	<!-- 表头 -->
	<thead>
		<tr>
			<th>1</th>
			<th>2</th>
			<th>3</th>
			<th>4</th>
		</tr>
	</thead>
	<!-- 主体 -->
	<tbody>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
	<td>4</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
		<tr>
			<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>
		</tr>
	</tbody>
</table>
复制代码

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

.box {
	width: 0px;
	height: 0px;
	border: 50px solid green;
	border-left-color: red;
	border-bottom-color: blue;
	border-right-color: orange;
	/*透明色 transparent  上 右 下 左*/
	border-color: green transparent transparent;
	/*没有 边框 None*/
	border-bottom: none;
}
复制代码

盒模型扩展

清除默认样式

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

* {
	margin: 0px;
	padding: 0px;
}
复制代码

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

ul, ol {
	/*去掉小圆点*/
	list-style: none;
}
复制代码

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

a {
	color: #333;
	text-decoration: none;
}
复制代码

宽度剩余法

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

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

.box {
	width: 400px;
	height: 400px;
	border: 1px solid #000;
	/*左内边距确定值*/
	padding-left: 15px;
	padding-right: 0px; //可以不设置pr
}
复制代码

height

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

.box {
	width: 400px;
	border: 1px solid #000;
	padding-left: 15px;
//省略Height设置，内容自动撑高
}
复制代码

margin

• margin垂直方向塌陷

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

.box1 {
	margin-bottom: 50px;
}
.box2 {
	margin-top: 80px;
}
复制代码

• margin不能用儿子去踹父盒子

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

.box {
	width: 300px;
	height: 300px;
	background-color: lightblue;
}
.box .son {
	width: 200px;
	height: 200px;
	background-color: pink;
	/*设置子盒子mgt*/
	margin-top: 50px;
}
复制代码

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

.box {
	width: 300px;
	height: 300px;
	background-color: lightblue;
	border: 1px solid #fff;
}
.box .son {
	width: 200px;
	height: 200px;
	background-color: pink;
	margin-top: 50px;
}
复制代码

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

.box2 {
	width: 300px;
	height: 250px;
	background-color: green;
	padding-top: 50px;
}
.box2 .son2 {
	width: 200px;
	height: 200px;
	background-color: pink;
}
复制代码

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

• 盒子水平居中

margin: 0 auto; (二值法：上（下） 右（左） )

auto: 自动（自动撑开盒子让左右距离撑开最大）

margin: 0 auto;
复制代码

居中

文本水平居中： text-align: center;

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

height: 100px;
line-height: 100px;
复制代码

多行文本垂直居中：

盒子不设置高度，同时设置上下相等的padding

padding: 30px 0;
复制代码

盒子居中：

水平居中：margin: 0 auto;

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

/*盒子垂直居中*/
.box5 {
	width: 400px;
	/*height省略不写，内容撑开*/
	padding: 40px 0px;
	border: 1px solid #000;
}
<div class="box5">
	<div class="son">son在box5垂直居中</div>
</div>
复制代码

父子嵌套盒模型

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

.box {
	width: 400px;
	height: 400px;
	padding: 50px;
	background-color: lightblue;
	border: 1px solid #000;
}
.box .son {
	/*子盒子最大能够占有的宽度400px*/
	width: 280px;
	height: 200px;
	padding: 50px;
	border: 10px solid #eee;
	background-color: pink;
}
复制代码

标准文档流

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

word文档：从上到下，从左到右

标准文档流： 从上到下，从左到右

特点

• 文本内容之间有空白折叠现象。

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

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

分类

标准文档流中标签分类：

块级元素： 所有的容器级标签都是块级元素（p标签也是块级元素）

行内元素： 所有的文本级标签都是行内元素（p标签除外）

块级元素：p,h1-h6,div,dl,ul,ol,li等
行内元素：span,input,img,b,u,i,a
复制代码

块级元素特点：

独占一行
可以设置宽高
如果不设置宽度，子盒子自动盛满父盒子的内容区域。（width是盒子属性不能继承）
复制代码

行内元素特点：

行内元素并排显示
行内元素不能设置宽高
行内元素大小是内容撑开的。
行内元素和块级元素可以相互转换
复制代码

display:显示模式

block(行内元素转为块级元素，块级有什么特性，那么这个元素就有什么特性)

.btn {
	width: 200px;
	height: 60px;	background-color: lightblue;
	display: block;
	font-size: 20px;
	text-align: center;
	line-height: 60px;
	/*水平居中*/
	margin: 0 auto;
}
复制代码

inline(块级元素转为行内元素)

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

在制作网页时，只使用标准文档流不能制作精美的网页，需要将元素脱离标准文档流（脱标）。

脱标： 浮动float, 绝对定位，固定定位