0基础快速入门CSS技术栈（5）—图解详细阐述说透CSS的盒子模型（超级重要）、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心（附详细案例源码解析过程）2021.01.07更新-CSDN博客

本文链接：https://blog.csdn.net/u013946061/article/details/107602105

文章目录

1. 盒子模型（CSS重点）
2. 拓展@
3. CSS书写规范

1. 盒子模型（CSS重点）

css学习三大重点： css 盒子模型、浮动、定位

主题思路：

目标：

理解：
- 盒子模型有那四部分组成
- 内边距的作用以及对盒子的影响
- padding设置不同数值个数分别代表的意思
- 块级盒子居中对齐需要的2个条件
- 外边距合并的解决方法
应用：
- 利用边框复合写法给元素添加边框
- 计算盒子的实际大小
- 利用盒子模型布局模块案例

1.1 看透网页布局的本质

网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？

在这里插入图片描述

看透网页布局的本质：
- 首先利用CSS设置好盒子的大小，然后摆放盒子的位置。
- 最后把网页元素比如文字图片等等，放入盒子里面。
- 以上两步就是网页布局的本质

在这里插入图片描述

我们明白了，盒子是网页布局的关键点，所以我们更应该弄明白这个盒子有什么特点。

1.2 盒子模型（Box Model）

所谓盒子模型：
- 就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

在这里插入图片描述

总结：

盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
盒子里面的文字和图片等元素是内容区域
盒子的厚度我们成为盒子的边框
盒子内容与边框的距离是内边距（类似单元格的 cellpadding)
盒子与盒子之间的距离是外边距（类似单元格的 cellspacing）

标准盒子模型

在这里插入图片描述

1.3 盒子边框（border）

在这里插入图片描述

语法：

border : border-width || border-style || border-color

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框颜色

边框的样式：
- none：没有边框即忽略所有边框的宽度（默认值）
- solid：边框为单实线(最为常用的)
- dashed：边框为虚线
- dotted：边框为点线

1.3.1 边框综合设置

border : border-width || border-style || border-color

例如：

 border: 1px solid red;  没有顺序

1.3.2 example01

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			/*边框的宽度 实际开发中都是跟 px 单位*/
			border-width: 5px;
			/*实线的*/
			border-style: solid;
		}
	</style>
</head>
<body>
	<div> </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			/*边框的宽度 实际开发中都是跟 px 单位*/
			border-width: 5px;
			/*实线的*/
			/* border-style: solid; */
			/*虚线的  dashed  大师的 说话都很虚*/
			border-style: dashed;
		}
	</style>
</head>
<body>
	<div> </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			/*边框的宽度 实际开发中都是跟 px 单位*/
			border-width: 5px;
			/*实线的*/
			/* border-style: solid; */
			/*虚线的  dashed  大师的 说话都很虚*/
			/* border-style: dashed; */
			/*点线*/
			border-style: dotted;
		}
	</style>
</head>
<body>
	<div> </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			/*边框的宽度 实际开发中都是跟 px 单位*/
			border-width: 5px;
			/*实线的*/
			/* border-style: solid; */
			/*虚线的  dashed  大师的 说话都很虚*/
			/* border-style: dashed; */
			/*点线*/
			/* border-style: dotted; */
			/* border-color: pink; */
			/*边框的综合性写法*/
			/*边框粗细 边框 样式  边框颜色*/
			border: 5px dotted  pink;
		}
	</style>
</head>
<body>
	<div> </div>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.48
Branch： branch01

commit description：a0.48（盒子边框案例example01）

tag：a0.48

1.3.3 盒子边框写法总结表

很多情况下，我们不需要指定4个边框，我们是可以单独给4个边框分别指定的。

我们可以看看小米官网：

只有上边框。

上边框	下边框	左边框	右边框
border-top-style:样式;	border-bottom-style:样式;	border-left-style:样式;	border-right-style:样式;
border-top-width:宽度;	border- bottom-width:宽度;	border-left-width:宽度;	border-right-width:宽度;
border-top-color:颜色;	border- bottom-color:颜色;	border-left-color:颜色;	border-right-color:颜色;
border-top:宽度样式颜色;	border-bottom:宽度样式颜色;	border-left:宽度样式颜色;	border-right:宽度样式颜色;

淘宝左侧导航栏没有上边框

1.3.3.1 example02

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 400px;
			/*上边框写法*/
			border-top: 2px solid red;
		}
	</style>
</head>
<body>
	<div> </div>
</body>
</html>

		div {
			width: 200px;
			height: 400px;
			/*上边框写法*/
			border-top: 2px solid red;
			border-left: 1px solid green;
		}

		div {
			width: 200px;
			height: 400px;
			/*上边框写法*/
			border-top: 2px solid red;
			border-left: 1px solid green;
			border-right: 1px solid blue;
			border-bottom: 1px solid pink;
		}

同样的input的边框也可以指定：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 400px;
			/*上边框写法*/
			border-top: 2px solid red;
			border-left: 1px solid green;
			border-right: 1px solid blue;
			border-bottom: 1px solid pink;
		}
		input {
			border-top: none;
			border-left: none;
			border-right: none;
			border-bottom: 1px dashed red;
		}
	</style>
</head>
<body>
	<div> </div>
	用户名: <input type="text" > <br>
	密码: <input type="text" >
</body>
</html>

简写边框：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 400px;
			/*上边框写法*/
			border-top: 2px solid red;
			border-left: 1px solid green;
			border-right: 1px solid blue;
			border-bottom: 1px solid pink;
		}
		input {
			/* border-top: none;
			border-left: none;
			border-right: none;
			border-bottom: 1px dashed red; */
			/* 四个边框都去掉*/
			border: none;
			/* 覆盖 ，注意不可换顺序，可遵循‘先写大的，后写小的’*/
			border-bottom: 1px dashed red;

		}
	</style>
</head>
<body>
	<div> </div>
	用户名: <input type="text" > <br>
	密码: <input type="text" >
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.49
Branch： branch01

commit description：a0.49（分别指定边框案例example02）

tag：a0.49

1.3.4 表格的细线边框

在这里插入图片描述

通过表格的cellspacing="0",将单元格与单元格之间的距离设置为0，
但是两个单元格之间的边框会出现重叠，从而使边框变粗
通过css属性：
```
table{ border-collapse:collapse; }  
```
- collapse 单词是合并的意思
- border-collapse:collapse;表示相邻边框合并在一起，而不重叠边框。

<style>
	table {
		width: 500px;
		height: 300px;
		border: 1px solid red;
	}
	td {
		border: 1px solid red;
		text-align: center;
	}
	table, td {
		border-collapse: collapse;  /*合并相邻边框*/
	}
</style>

在这里插入图片描述

1.3.4.1 example03

完善样式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小说排行榜</title>
	<style>
		table,
		td,
		th {
			border: 1px solid deeppink;
		}
	</style>
</head>
<body>
	<table cellspacing="0" width="500" height="249" align="center">
		<caption> <h3>小说排行榜</h3> </caption>
		<tr >
			<th>排名</th>
			<th>关键词</th>
			<th>趋势</th>
			<th>今日搜索</th>
			<th>最近七日</th>
			<th>相关链接</th>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>
				<img src="images/up.jpg">
			</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr >
			<td>1</td>
			<td>鬼吹灯</td>
			<td>
				<img src="images/down.jpg">
			</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>
				<img src="images/up.jpg">
			</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr >
			<td>1</td>
			<td>鬼吹灯</td>
			<td>1</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>1</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr >
			<td>1</td>
			<td>鬼吹灯</td>
			<td>1</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>1</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
	</table>
</body>
</html>

发现框是2px而不是1px

根据以上我们可以得出因为没有合并单元格的缘故：导致边框重叠

		table,
		td,
		th {
			border: 1px solid deeppink;
			/*让我们的表格 单元格 th 合并相邻的边框*/
			border-collapse: collapse;
		}

完善标题栏颜色及单行变色：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小说排行榜</title>
	<style>
		table,
		td,
		th {
			border: 1px solid deeppink;
			/*让我们的表格 单元格 th 合并相邻的边框*/
			border-collapse: collapse;
		}
		/* 标题栏颜色 */
		.hotpink {
			background-color: hotpink;
		}
		/* 隔行变色 */
		.pink {
			background-color: pink;
		}
	</style>
</head>
<body>
	<table cellspacing="0" width="500" height="249" align="center">
		<caption> <h3>小说排行榜</h3> </caption>
		<tr class="hotpink">
			<th>排名</th>
			<th>关键词</th>
			<th>趋势</th>
			<th>今日搜索</th>
			<th>最近七日</th>
			<th>相关链接</th>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>
				<img src="images/up.jpg">
			</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr class="pink">
			<td>1</td>
			<td>鬼吹灯</td>
			<td>
				<img src="images/down.jpg">
			</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>
				<img src="images/up.jpg">
			</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr class="pink">
			<td>1</td>
			<td>鬼吹灯</td>
			<td>1</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>1</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr class="pink">
			<td>1</td>
			<td>鬼吹灯</td>
			<td>1</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
		<tr>
			<td>1</td>
			<td>鬼吹灯</td>
			<td>1</td>
			<td>356</td>
			<td>3560</td>
			<td>
				<a href="#">贴吧</a>
				<a href="#">图片</a>
				<a href="#">百科</a>
			</td>
		</tr>
	</table>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.50
Branch： branch01

commit description：a0.50（小说排行榜案例example03）

tag：a0.50

1.4 内边距（padding）

在这里插入图片描述

如小米首页右侧导航栏，文字要是贴着边框很丑，所以必然需要设置内边距padding

1.4.1 内边距：

padding属性用于设置内边距。 是指边框与内容之间的距离。

1.4.2 设置

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

当我们给盒子指定padding值之后，发生了2件事情：

内容和边框有了距离，添加了内边距。
盒子会变大了。

1.4.2.1 example04

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内边距</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div> 王者农药 </div>
</body>
</html>

发现很丑，我们想实现类似小米首页一样。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内边距</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			border: 1px solid red;
			/*左内边距*/
			padding-left: 10px;
			padding-top: 30px;

		}
	</style>
</head>
<body>
	<div> 王者农药 </div>
</body>
</html>

注意添加了内边距：

盒子会变大了

小迪推荐大家使用FastStone Capture 下载

以上代码会很麻烦，我们可以简写：

		div {
			width: 200px;
			height: 200px;
			border: 1px solid red;
			/*左内边距*/
			/* padding-left: 10px;
			padding-top: 30px; */
			/*padding 简写 复合写法*/
			/*padding: 20px; 上下左右 都是 20 内边距*/
			padding: 20px;
		}

			/*padding: 10px 20px; 上下10  左右 20 内边距*/
			padding: 10px 20px;

			/*padding: 10px 20px 30px; 上 10  左右 20  下 30 内边距*/
			padding: 10px 20px 30px;

			/*padding: 10px 20px 30px 40px;  上10 右 20  下 30 左 40 顺时针*/
			padding: 10px 20px 30px 40px;

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.51
Branch： branch01

commit description：a0.51（内边距案例example04）

tag：a0.51

1.4.2.2 example05

在这里插入图片描述 注意：后面跟几个数值表示的意思是不一样的。

我们分开写有点麻烦，我们可以不可以简写呢？

值的个数	表达意思
1个值	padding：上下左右内边距;
2个值	padding: 上下内边距左右内边距；
3个值	padding：上内边距左右内边距下内边距；
4个值	padding: 上内边距右内边距下内边距左内边距；（`顺时针`）

在这里插入图片描述

练习：

写出如下内边距：

要求盒子有一个左边内边距是5像素
要求简写的形式写出一个盒子上下是 25像素 左右是15像素。
要求简写的形式写出一个盒子上内边距是12像素 下内边距是 0 左内边距是25像素 右内边距是 10像素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		1. 要求盒子有一个左边内边距是 5像素
		div {
			padding-left: 5px;
		}



		2. 要求简写的形式写出  一个盒子上下是 25像素   左右是15像素。

		div {
			padding: 25px 15px;
		}

		3. 要求简写的形式写出 一个盒子  上内边距是 12像素  下内边距是 0  左内边距是 25像素  右内边距是 10像素
		div {
			padding: 12px 10px 0 25px;
		}
		
	</style>
</head>
<body>
	
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.52
Branch： branch01

commit description：a0.52（内边距课堂一练案例example05）

tag：a0.52

1.4.3 案例：新浪导航

新浪导航栏的核心就是因为里面的字数不一样多，所以我们不方便给宽度，还是给padding ，撑开盒子的。

先把结构做出来

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新浪导航栏案例</title>
	<style>
	/*清除元素默认的内外边距*/
		* {
			margin: 0;
			padding: 0;
		}
		body{
			margin: 20px;
		}
		
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">设为首页</a>
		<a href="#">手机新浪网</a>
		<a href="#">移动客户端</a>
		<a href="#">博客</a>
		<a href="#">微博</a>
		<a href="#">关注我</a>
	</div>
</body>
</html>

a是有宽高的，高度是可以给的，但是宽度不好设置，因为字数没法固定，为了方便写样式，我们先设置一个粉色的背景，方便调试样式。

我们在新浪网上截图测量尺寸=>宽度41px

拾色=>#fcfcfc

下边框：1px

上边框

上边框取色：#ff8500

下边框取色：#edeef0

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新浪导航栏案例</title>
	<style>
	/*清除元素默认的内外边距*/
		* {
			margin: 0;
			padding: 0;
		}
		body{
			margin: 20px;
		}
		.nav {
			height: 41px;
			background-color: #FCFCFC;
			/*上边框*/
			border-top: 3px solid #FF8500;
			/*下边框*/
			border-bottom: 1px solid #EDEEF0;
		}
		.nav a {
			/*转换为行内块*/
			display: inline-block;
			height: 41px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">设为首页</a>
		<a href="#">手机新浪网</a>
		<a href="#">移动客户端</a>
		<a href="#">博客</a>
		<a href="#">微博</a>
		<a href="#">关注我</a>
	</div>
</body>
</html>

我们不好设置宽度，因为a标签的字数是不同的。padding是可以撑开盒子的，我们可以都设置一样的padding。

		.nav a {
			/*转换为行内块*/
			display: inline-block;
			height: 41px;
			background-color: pink;
			/*代表 上下是 0  左右是 20 内边距*/
			padding: 0 20px;
		}

让文字垂直居中，去除a标签下划线，设置文字颜色及大小，去掉粉色背景。

文字颜色：#4c4c4c

文字大小：12px

		.nav a {
			/*转换为行内块*/
			display: inline-block;
			height: 41px;
			/* background-color: pink; */
			line-height: 41px;
			color: #4C4C4C;
			/*代表 上下是 0  左右是 20 内边距*/
			padding: 0 20px;
			text-decoration: none;
			font-size: 12px;
		}

鼠标放在a标签设置底色。

背景：#edeef0
字体颜色：#fc8400

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新浪导航栏案例</title>
	<style>
	/*清除元素默认的内外边距*/
		* {
			margin: 0;
			padding: 0;
		}
		body{
			margin: 20px;
		}
		.nav {
			height: 41px;
			background-color: #FCFCFC;
			/*上边框*/
			border-top: 3px solid #FF8500;
			/*下边框*/
			border-bottom: 1px solid #EDEEF0;
		}
		.nav a {
			/*转换为行内块*/
			display: inline-block;
			height: 41px;
			/* background-color: pink; */
			line-height: 41px;
			color: #4C4C4C;
			/*代表 上下是 0  左右是 20 内边距*/
			padding: 0 20px;
			text-decoration: none;
			font-size: 12px;
		}
		.nav a:hover {
			background-color: #edeef0;
			color:#fc8400;
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">设为首页</a>
		<a href="#">手机新浪网</a>
		<a href="#">移动客户端</a>
		<a href="#">博客</a>
		<a href="#">微博</a>
		<a href="#">关注我</a>
	</div>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.53
Branch： branch01

commit description：a0.53（新浪导航栏案例）

tag：a0.53

1.4.4 内盒尺寸计算（元素实际大小）

实际页面中的盒子是固定大小，不能设置padding后，就撑大盒子，这样会影响布局。

在这里插入图片描述

宽度

Element Height = content height + padding + border（Height为内容高度）
高度

Element Width = content width + padding + border（Width为内容宽度）
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

1.4.4.1 example06

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算盒子实际的大小</title>
	<style>
		div {
			width: 180px;
			height: 200px;
			background-color: pink;
			/*添加10px 内边距 左右 上下*/
			padding: 10px;
		}
	</style>
</head>
<body>
	<div> </div>
</body>
</html>

盒子的实际大小 = 内容宽度高度 + 内边距 + 边框

200 + 20 + 0 = 220

解决的方法：

内边距一定要给的，我们只能改变内容宽度 width让他减去多出来的内边距就可以了

200 - 20 = 180

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.54
Branch： branch01

commit description：a0.54（计算盒子的实际大小案例example06）

tag：a0.54

1.4.5 内边距产生的问题

问题

会撑大原来的盒子
解决：

通过给设置了宽高的盒子，减去相应的内边距的值，维持盒子原有的大小

在这里插入图片描述

笔试测试题

一个盒子宽度为100， padding为 10，边框为5像素，问这个盒子实际的宽度的是（）

(A) 130
(B) 135
© 125
(D) 115

100 + 20 + 10

关于根据下列代码计算盒子宽高下列说法正确的是（）

div {

		width: 200px;

         height: 200px;

		border: 1px solid #000000;

		border-top: 5px solid blue;

		padding: 50px;

		padding-left: 100px;

		}

(A) 宽度为200px 高度为200px
(B) 宽度为352px 高度为306px
© 宽度为302px 高度为307px
(D) 宽度为302px 高度为252px

w 200 + 150 + 2 = 352

h 200 + 100 + 6 = 306

（注意这里覆盖的现象。）

1.4.6 padding不影响盒子大小情况

如果没有给一个盒子指定宽度，此时，如果给这个盒子指定padding，则不会撑开盒子，除非padding值超过父级宽度。

1.4.6.1 example07

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		p {	
             /*块级元素默认与父级一样宽 width: 200px;*/
			height: 30px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div> 
		<p>哒哒哒</p>
	</div>
</body>
</html>

		p {	
			/*块级元素默认与父级一样宽 width: 200px;*/
			height: 30px;
			background-color: purple;
			padding-left: 30px;
			/*特殊情况， 如果这个盒子啊，没有宽度 则padding 不会撑开盒子*/
		}

加上宽度后，有padding就会撑开宽度了。

		p {	
			/*块级元素默认与父级一样宽 width: 200px;*/
			width: 200px;
			height: 30px;
			background-color: purple;
			padding-left: 30px;
			/*特殊情况， 如果这个盒子啊，没有宽度 则padding 不会撑开盒子*/
		}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.55
Branch： branch01

commit description：a0.55（padding不会影响盒子大小的情况案例example07）

tag：a0.55

1.5 外边距（margin）

在这里插入图片描述

1.5.1 外边距

margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

1.5.2 设置：

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin值的简写（复合写法）代表意思跟 padding 完全相同。

1.5.2.1 example08

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			/*外边距*/
			margin-left: 100px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			/*外边距*/
			margin-left: 100px;
			margin-top: 50px;
		}

简写：

		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			/*外边距*/
			/* margin-left: 100px;
			margin-top: 50px; */
			margin: 100px;
		}

默认都是左对齐，因为右边没内容，就默认充满了。如果右边有内容则是100px间距。

		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			padding: 20px;
			margin: 100px;
		}

实际我们在看网页的时候，也可通过F12，根据颜色很快判断出容器的padding和margin。

可以通过这种方式检验css的padding、margin设置是否正确。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			padding: 20px;
			/*外边距*/
			/* margin-left: 100px;
			margin-top: 50px; */
			margin: 100px 20px 0 10px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.56
Branch： branch01

commit description：a0.56（margin外边距案例example08）

tag：a0.56

1.5.3 块级盒子水平居中

我们发现小米首页始终保持居中对齐的，缩小网页后也是始终保持的（两边边距都一样），这是因为块级盒子是可以居中对齐的。

可以让一个块级盒子实现水平居中必须：
- 盒子必须指定了宽度（width）
- 然后就给左右的外边距都设置为auto，

实际工作中常用这种方式进行网页布局，示例代码如下：

.header{ width:960px; margin:0 auto;}

常见的写法，以下下三种都可以。

margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;

1.5.3.1 example09

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 600px;
			height: 400px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

外边距默认左上对齐。

margin-left: auto;

左侧充满。

margin-right: auto;

右侧充满。

			margin-left: auto;
			margin-right: auto;

左右两侧充满，即居中。

我们看小米首页也有这种居中写法：

但其实还有其他写法如：

margin: auto;

代表上下左右都是auto的，但是盒子默认是需要贴着顶部的，因此是没有效果的，即不会垂直居中，只会左右居中。

另一种写法

margin: 0 auto;

注意必须有宽度，如果没宽度，块级元素没宽度，会占满一行的，就不存在居中了。

		div {
			/* width: 600px; */
			height: 400px;
			background-color: pink;
			margin: 0 auto;
		}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.57
Branch： branch01

commit description：a0.57（块级盒子居中对齐案例example09）

tag：a0.57

1.5.4 文字居中和盒子居中区别

盒子内的文字水平居中是 text-align: center, 而且还可以让行内元素（如strong）和行内块（如input）居中对齐
块级盒子水平居中左右margin 改为 auto

text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */

1.5.4.1 example10

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 600px;
			height: 300px;
			background-color: pink;
			/*块级盒子水平居中*/
			margin: 50px auto;
		}
	</style>
</head>
<body>
	<div> 稳住 </div>
</body>
</html>

text-align: center;

还可以让行内元素（如strong）和行内块（如input）居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 600px;
			height: 300px;
			background-color: pink;
			/*块级盒子水平居中*/
			margin: 50px auto;
			/*盒子里面的文字 行内元素 、行内块（input元素）居中对齐水平居中*/
			text-align: center;
		}
	</style>
</head>
<body>
	<div> 稳住 <strong>我们能赢</strong> <input type="text"> </div>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.58
Branch： branch01

commit description：a0.58（文字居中和盒子居中案例example10）

tag：a0.58

1.5.5 插入图片和背景图片区别

插入图片我们用的最多比如产品展示类移动位置只能靠盒模型padding margin
背景图片我们一般用于小图标背景或者超大背景图片背景图片只能通过 background-position

 img {  
		width: 200px;/* 插入图片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入图片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入当图片也是一个盒子 */
	}

 div {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
		background-position: 30px 50px; /* 背景图片更改位置 我用 background-position */
	}

1.5.5.1 example11

1.5.5.1.1 example11-1

通过盒模型移动图片。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.pic {
			width: 500px;
			height: 500px;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="pic">
		<img src="images/3.jpg" alt="">
	</div>
</body>
</html>

padding移动图片的位置，如果设置容器盒子padding，会撑大盒子。

		.pic {
			width: 500px;
			height: 500px;
			border: 1px solid red;
			padding: 30px;
		}

或者通过图片的外边距（margin）移动图片，这样就不会撑开容器盒子了。

		.pic {
			width: 500px;
			height: 500px;
			border: 1px solid red;
			/*padding: 30px;*/
		}
		.pic img {
			margin: 30px;
		}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.59
Branch： branch01

commit description：a0.59（插入图片和背景图片区别案例example11-1——通过盒模型移动图片）

tag：a0.59

1.5.5.1.2 example11-2

背景图片的设置

背景图片不能通过设置padding来移动位置。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.pic,
		.bg {
			width: 500px;
			height: 500px;
			border: 1px solid red;
			/*padding: 30px;*/
		}
		.pic img {
			margin: 30px;
		}
		.bg {
			background: url(images/3.jpg) no-repeat;
			padding: 30px;
		}
	</style>
</head>
<body>
	<div class="pic">
		<img src="images/3.jpg" alt="">
	</div>
	<div class="bg">

	</div>
</body>
</html>

只能通过background-position设置位置，第一个是水平位置，第二个是垂直位置。

		.bg {
			background: url(images/3.jpg) no-repeat;
			background-position: 30px 30px;
			/*padding: 30px;*/
		}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.60
Branch： branch01

commit description：a0.60（插入图片和背景图片区别案例example11-2——移动背景图片）

tag：a0.60

注意一般情况下，我们插入图片用得多，而背景图片用得少。

1.5.6 清除元素的默认内外边距(重要)

在这里插入图片描述

为了更灵活方便地控制网页中的元素，制作网页时，我们需要将元素的默认内外边距清除

*代表所有

代码：

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

注意：

行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。

1.5.6.1 example12

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

	  span {
	  	 margin: 30px;
	  }
	</style>
</head>
<body>
	一个问题
	<p>又是一个问题</p>
	<span>  行内元素 尽量只设置左右内外边距， 不要设置上下内外边距。</span>
</body>
</html>

行内元素设置了上下边距也没意义。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	  /*这是一个神奇的代码  我们以后写css 第一句话*/
	  * {
	  	margin: 0;
	  	padding: 0;
	  }
	  span {
	  	 margin: 30px;
	  }
	</style>
</head>
<body>
	一个问题
	<p>又是一个问题</p>
	<span>  行内元素 尽量只设置左右内外边距， 不要设置上下内外边距。</span>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.61
Branch： branch01

commit description：a0.61（清除元素的默认内外边距案例example12）

tag：a0.61

1.5.7 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。

1.5.7.1 (1). 相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom
下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和
取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
注意：左右外边距是不会合并的

在这里插入图片描述

解决方案：尽量给只给一个盒子添加margin值。

1.5.7.1.1 example13

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.top,
		.bottom {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.top {
			margin-bottom: 100px;
		}
		.bottom {
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="top"></div>
	<div class="bottom"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.top,
		.bottom {
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		.top {
			margin-bottom: 100px;
		}
		.bottom {
			background-color: purple;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<div class="top"></div>
	<div class="bottom"></div>
</body>
</html>

边距仍是100px

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.62
Branch： branch01

commit description：a0.62（相邻块元素垂直外边距的合并案例example13）

tag：a0.62

1.5.7.2 (2). 嵌套块元素垂直外边距的合并（塌陷）

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框
父元素的上外边距会与子元素的上外边距发生合并
合并后的外边距为两者中的较大者

在这里插入图片描述

解决方案：

可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow:hidden。

还有其他方法，比如浮动、固定、绝对定位的盒子不会有问题，后面咱们再总结。。。

1.5.7.2.1 example14

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
		}
		.son {
			width: 200px;
			height: 200px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>

我们想把最里面的紫色盒子移动下去，我们给它设置上外边距

		.son {
			width: 200px;
			height: 200px;
			background-color: purple;
			margin-top: 100px;
		}

然后紫色的盒子带着它的父亲粉色盒子一起塌陷了。

解决办法：

1、可以为父元素定义上边框 transparent 透明

		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
			/*嵌套关系 垂直外边距合并  解决方案 */
			/*1. 可以为父元素定义上边框  transparent 透明*/
			border-top: 1px solid transparent;
		}

2、可以给父级指定一个上 padding值

		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
			/*嵌套关系 垂直外边距合并  解决方案 */
			/*2. 可以给父级指定一个 上 padding值。*/
			padding-top: 1px;
		}

3、可以为父元素添加overflow:hidden

		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
			/*嵌套关系 垂直外边距合并  解决方案 */
			/*3. 可以为父元素添加overflow:hidden。*/
			overflow: hidden;
		}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.63
Branch： branch01

commit description：a0.63（嵌套块元素垂直外边距的合并（塌陷）案例example14）

tag：a0.63

1.6 盒子模型布局稳定性

学习完盒子模型，内边距和外边距，什么情况下用内边距，什么情况下用外边距？
- 大部分情况下是可以混用的。就是说，你用内边距也可以，用外边距也可以。你觉得哪个方便，就用哪个。

我们根据稳定性来分，建议如下：

按照优先使用宽度（width）其次使用内边距（padding）再次外边距（margin）。

  width >  padding  >   margin

原因：
- margin会有外边距合并还有 ie6下面margin 加倍的bug（讨厌）所以最后使用。
- padding 会影响盒子大小，需要进行加减计算（麻烦）其次使用。
- width 没有问题（嗨皮）我们经常使用宽度剩余法高度剩余法来做。

1.7 ps基本操作以及常用快捷键：

因为网页美工大部分效果图都是利用ps来做的，所以，以后我们大部分切图工作都是在ps里面完成。

文件–打开 – 可以打开我们要测量的图片
ctrl+r可以打开标尺或者视图 – 标尺
右击标尺，把里面的单位改为 像素
ctrl+ 加号 键可以放大视图 ctrl+ 减号 缩小视图
按住空格键，鼠标可以变成小手，拖动 ps 视图
用选区拖动可以测量大小
ctrl+ d可以取消选区或者旁边空白处点击一下也可以取消选区

在这里插入图片描述

调出标尺：或者ctrl+r

标尺设置以像素为单位，利用鼠标右键。

宽328px，如果加上边框就是330px。

拾色器：

或者

1.8 综合案例

左侧小箭头是图片

背景是渐变色，用图片

在这里插入图片描述

结构布局：

刚才我们量了整体宽度（排除边框）是328px

我们测量高度：226px，加上边框是228px

1.8.1 去掉列表默认的样式

无序和有序列表前面默认的列表样式，在不同浏览器显示效果不一样，而且也比较难看，所以，我们一般上来就直接去掉这些列表样式就行了。代码如下

li { list-style: none; }

1.8.2 example15

1.8.2.1 example15-1

实现外层框架：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新闻列表综合案例</title>
	<style>
	  /*这句话必须要写， 不要忘却了*/
		* {
			margin: 0;
			padding: 0;
		}
	   .box {
	   		width: 328px;
	   		height: 226px;
			/*灰色*/
	   		border: 1px solid #ccc;
	   		/*块级盒子水平居中*/
	   		margin: 100px auto;
	   		background: url(images/line.jpg);
	   }
	</style>
</head>
<body>
	<div class="box">

	</div>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.64
Branch： branch01

commit description：a0.64（综合案例example15-1——实现最外层的框子）

tag：a0.64

1.8.2.2 example15-2

写字的部分与外边框的间隙：

设置外边距不方便，到时候再细分两块都需要设置外边距。

干脆给最外框设置一个内边距方便。

左侧间隙：15px，一般设置都是间隙等宽，这里其它方向我就不测量了。

	   .box {
	   		width: 328px;
	   		height: 226px;
			/*灰色*/
	   		border: 1px solid #ccc;
	   		/*块级盒子水平居中*/
	   		margin: 100px auto;
	   		background: url(images/line.jpg);
		    padding: 15px;
	   }

但是盒子立刻就被撑大了

需要重新设置宽高，都需要减去15x2=30

	   .box {
		   width: 298px;
		   height: 196px;
			/*灰色*/
	   		border: 1px solid #ccc;
	   		/*块级盒子水平居中*/
	   		margin: 100px auto;
	   		background: url(images/line.jpg);
		    padding: 15px;
	   }

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.65
Branch： branch01

commit description：a0.65（综合案例example15-2——实现列表内部的间隙）

tag：a0.65

1.8.2.3 example15-3

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新闻列表综合案例</title>
	<style>
	  /*这句话必须要写， 不要忘却了*/
		* {
			margin: 0;
			padding: 0;
		}
	   .box {
		   width: 298px;
		   height: 196px;
			/*灰色*/
	   		border: 1px solid #ccc;
	   		/*块级盒子水平居中*/
	   		margin: 100px auto;
	   		background: url(images/line.jpg);
		   /*如果一个盒子给了一个padding值，会撑大盒子*/
		    padding: 15px;
	   }
	  .box h2 {
		  font-size: 18px;
		  /*字跟下划线有一些间隙，我们设置为上下均有间隙*/
		  padding: 5px 0;
		  /*底边框*/
		  border-bottom: 1px solid #ccc;
	  }
	</style>
</head>
<body>
<div class="box">
	<!-- 标题盒子 -->
	<h2>最新文章/New Articles</h2>
	<!--	ul>li*5>a 快速生成如下代码： -->
	<!-- 列表盒子 -->
	<ul>
		<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
		<li><a href="#">体验javascript的魅力</a></li>
		<li><a href="#">jquery世界来临</a></li>
		<li><a href="#">网页设计师的梦想</a></li>
		<li><a href="#">jquery中的链式编程是什么</a></li>
	</ul>
</div>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.66
Branch： branch01

commit description：a0.66（综合案例example15-3——实现标题模块，及初步实现列表框）

tag：a0.66

1.8.2.4 example15-4

我们发现列表有一个小圆点，我们把它去掉（默认样式）

	/*取消列表样式*/
	li {
		list-style: none;
	}

我们仔细观察，可以给每个li规定高度，底部设置成虚线。

文字是a标签，我们取色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新闻列表综合案例</title>
	<style>
		/*这句话必须要写， 不要忘却了*/
		* {
			margin: 0;
			padding: 0;
		}
		/*取消列表样式*/
		li {
			list-style: none;
		}
		.box {
			width: 298px;
			height: 196px;
			/*灰色*/
			border: 1px solid #ccc;
			/*块级盒子水平居中*/
			margin: 100px auto;
			background: url(images/line.jpg);
			/*如果一个盒子给了一个padding值，会撑大盒子*/
			padding: 15px;
		}
		.box h2 {
			font-size: 18px;
			/*字跟下划线有一些间隙，我们设置为上下均有间隙*/
			padding: 5px 0;
			/*底边框*/
			border-bottom: 1px solid #ccc;
		}
		.box ul li {
			height: 30px;
			/*background-color: pink;*/
			border-bottom: 1px dashed #ccc;
		}
		.box ul li a {
			color: #333;
			font-size: 12px;
			text-decoration: none;
		}
	</style>
</head>
<body>
<div class="box">
	<!-- 标题盒子 -->
	<h2>最新文章/New Articles</h2>
	<!--	ul>li*5>a 快速生成如下代码： -->
	<!-- 列表盒子 -->
	<ul>
		<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
		<li><a href="#">体验javascript的魅力</a></li>
		<li><a href="#">jquery世界来临</a></li>
		<li><a href="#">网页设计师的梦想</a></li>
		<li><a href="#">jquery中的链式编程是什么</a></li>
	</ul>
</div>
</body>
</html>

文字没有垂直居中，行高和li高度设置成一样的即可。

		.box ul li {
			height: 30px;
			line-height: 30px;
			/*background-color: pink;*/
			border-bottom: 1px dashed #ccc;
		}

鼠标移动端a标签，出现下划线。

		.box ul li a:hover {
			text-decoration: underline;
		}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.67
Branch： branch01

commit description：a0.67（综合案例example15-4——优化列表，实现虚线及a标签下划线效果）

tag：a0.67s

1.8.2.5 example15-5

我们把图片插进去，图片垂直居中，且左边有一点距离。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新闻列表综合案例</title>
	<style>
		/*这句话必须要写， 不要忘却了*/
		* {
			margin: 0;
			padding: 0;
		}
		/*取消列表样式*/
		li {
			list-style: none;
		}
		.box {
			width: 298px;
			height: 196px;
			/*灰色*/
			border: 1px solid #ccc;
			/*块级盒子水平居中*/
			margin: 100px auto;
			background: url(images/line.jpg);
			/*如果一个盒子给了一个padding值，会撑大盒子*/
			padding: 15px;
		}
		.box h2 {
			font-size: 18px;
			/*字跟下划线有一些间隙，我们设置为上下均有间隙*/
			padding: 5px 0;
			/*底边框*/
			border-bottom: 1px solid #ccc;
		}
		.box ul li {
			height: 30px;
			line-height: 30px;
			/*background-color: pink;*/
			border-bottom: 1px dashed #ccc;
			/*background-position: 5px center ; 可简写到background里 */
			background: url(images/arr.jpg) no-repeat 5px center;
		}
		.box ul li a {
			color: #333;
			font-size: 12px;
			text-decoration: none;
		}
		.box ul li a:hover {
			text-decoration: underline;
		}
	</style>
</head>
<body>
<div class="box">
	<!-- 标题盒子 -->
	<h2>最新文章/New Articles</h2>
	<!--	ul>li*5>a 快速生成如下代码： -->
	<!-- 列表盒子 -->
	<ul>
		<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
		<li><a href="#">体验javascript的魅力</a></li>
		<li><a href="#">jquery世界来临</a></li>
		<li><a href="#">网页设计师的梦想</a></li>
		<li><a href="#">jquery中的链式编程是什么</a></li>
	</ul>
</div>
</body>
</html>

但是文字把图标给盖住了。站在a链接标签的角度看，我们可以为其添加margin-left，让文字往右移动。

		.box ul li a {
			color: #333;
			font-size: 12px;
			text-decoration: none;
			margin-left: 20px;
		}

站在图标的角度看，我们可以为a链接添加padding-left，让文字往右移动，只不过a会被撑大，而a是透明的，因此没什么影响。

		.box ul li a {
			color: #333;
			font-size: 12px;
			text-decoration: none;
			padding-left: 20px;
		}

同时也可以在li的角度，如果设置margin-left，会不妥，因为图标也是在li里的，如果加外边框，li会带着a标签向右偏移。

		.box ul li {
			height: 30px;
			line-height: 30px;
			/*background-color: pink;*/
			border-bottom: 1px dashed #ccc;
			/*background-position: 5px center ; 可简写到background里 */
			background: url(images/arr.jpg) no-repeat 5px center;
			margin-left: 20px;
		}
		.box ul li a {
			color: #333;
			font-size: 12px;
			text-decoration: none;
			/*margin-left: 20px;*/
			/*padding-left: 20px;*/
		}
		.box ul li a:hover {
			text-decoration: underline;
		}

也可以利用该方式。

我们设置了padding为啥不重新计算盒子呢？

因为这个li没有宽度所以padding 不会撑开盒子

		.box ul li {
			height: 30px;
			line-height: 30px;
			/*background-color: pink;*/
			border-bottom: 1px dashed #ccc;
			/*background-position: 5px center ; 可简写到background里 */
			background: url(images/arr.jpg) no-repeat 5px center;
			/*因为这个li 没有宽度 所以padding 不会撑开盒子*/
			padding-left: 20px;
		}

上面还有漏洞，我们对照原图发现标题下划线和第一个li太近了。

21像素，我们减去li的文字上部本来的11px，我们设置为10px即可。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>新闻列表综合案例</title>
	<style>
		/*这句话必须要写， 不要忘却了*/
		* {
			margin: 0;
			padding: 0;
		}
		/*取消列表样式*/
		li {
			list-style: none;
		}
		.box {
			width: 298px;
			height: 196px;
			/*灰色*/
			border: 1px solid #ccc;
			/*块级盒子水平居中*/
			margin: 100px auto;
			background: url(images/line.jpg);
			/*如果一个盒子给了一个padding值，会撑大盒子*/
			padding: 15px;
		}
		.box h2 {
			font-size: 18px;
			/*字跟下划线有一些间隙，我们设置为上下均有间隙*/
			padding: 5px 0;
			/*底边框*/
			border-bottom: 1px solid #ccc;
			margin-bottom: 10px;
		}
		.box ul li {
			height: 30px;
			line-height: 30px;
			/*background-color: pink;*/
			border-bottom: 1px dashed #ccc;
			/*background-position: 5px center ; 可简写到background里 */
			background: url(images/arr.jpg) no-repeat 5px center;
			/*因为这个li 没有宽度 所以padding 不会撑开盒子*/
			padding-left: 20px;
		}
		.box ul li a {
			color: #333;
			font-size: 12px;
			text-decoration: none;
			/*margin-left: 20px;*/
			/*padding-left: 20px;*/
		}
		.box ul li a:hover {
			text-decoration: underline;
		}
	</style>
</head>
<body>
<div class="box">
	<!-- 标题盒子 -->
	<h2>最新文章/New Articles</h2>
	<!--	ul>li*5>a 快速生成如下代码： -->
	<!-- 列表盒子 -->
	<ul>
		<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
		<li><a href="#">体验javascript的魅力</a></li>
		<li><a href="#">jquery世界来临</a></li>
		<li><a href="#">网页设计师的梦想</a></li>
		<li><a href="#">jquery中的链式编程是什么</a></li>
	</ul>
</div>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.68
Branch： branch01

commit description：a0.68（综合案例example15-5——最终实现）

tag：a0.68

1.9 总结

2. 拓展@

以下我们讲的CSS3部分新属性，但是我们遵循的原则是，以下内容，不会影响我们页面布局，只是样式更好看了而已。

2.1 圆角边框(CSS3)

在这里插入图片描述

语法：

border-radius:length;

实际radius是半径的意思，这里就是通过半径来控制圆角边框。

其中每一个值可以为数值或百分比的形式。
技巧：让一个正方形变成圆圈
```
border-radius: 50%;
```

在这里插入图片描述

以上效果图矩形的圆角，就不要用百分比了，因为百分比会是表示高度和宽度的一半。
而我们这里矩形就只用用高度的一半就好了。精确单位。

2.1.1 example16

2.1.1.1 example16-1

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
      div {
         width: 200px;
         height: 200px;
         background-color: pink;
      }
   </style>
</head>
<body>
   <div> </div>
</body>
</html>

		div {
			width: 200px;
			height: 200px;
			background-color: pink;

			border-radius: 100px;
		}

但是以上这样计算圆的半径很麻烦，可以设置百分比：

		div {
			width: 200px;
			height: 200px;
			background-color: pink;

			/*border-radius: 100px;*/
			border-radius: 50%;
		}

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.69
Branch： branch01

commit description：a0.69（综合案例example16-1——圆角边框初步实现）

tag：a0.69

这个应用十分广泛：

2.1.1.2 example16-2

做出如下样式，即不是圆了，而是矩形，侧边是半圆。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;

			/*border-radius: 100px;*/
			border-radius: 50%;
		}
		p {
			width: 100px;
			height: 20px;
			background-color: red;
			font-size: 12px;
			color: #fff;
			text-align: center;
			line-height: 20px;
			border-radius: 50%;
		}
	</style>
</head>
<body>
	<div> </div>
	<p> 特价 免费送 </p>
</body>
</html>

以上效果图矩形的圆角，就不要用百分比了，因为百分比会是表示高度和宽度的一半。

而我们这里矩形就只用用高度的一半就好了，即精确单位。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;

			/*border-radius: 100px;*/
			border-radius: 50%;
		}
		p {
			width: 100px;
			height: 20px;
			background-color: red;
			font-size: 12px;
			color: #fff;
			text-align: center;
			line-height: 20px;
			border-radius: 10px;
		}
	</style>
</head>
<body>
	<div> </div>
	<p> 特价 免费送 </p>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.70
Branch： branch01

commit description：a0.70（综合案例example16-2——矩形圆角边框初步实现）

tag：a0.70

2.1.2 语法

border-radius: 1-4 length|% / 1-4 length|%;

border-radius 属性是一个最多可指定四个 border -*- radius 属性的复合属性

CSS 属性 border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。

如果省略左下角，右上角是相同的。

如果省略右下角，左上角是相同的。

如果省略右上角，左上角是相同的。

值	描述
length	定义弯道的形状。
%	使用%定义角落的形状。

该属性是一个简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。

即使元素没有边框，圆角也可以用到 background 上面，具体效果受 background-clip 影响。

当 border-collapse 的值为 collapse 时，border-radius 属性不会被应用到表格（

）元素上。

2.1.3 demo

2.2 盒子阴影(CSS3)

CSS box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。

在这里插入图片描述

语法:

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；

1498467567011

前两个属性是必须写的。其余的可以省略。
外阴影 (outset) 是默认的但是不能写想要内阴影可以写 inset
我们一般只用外阴影，默认的，千万别写outset

div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ctZS9pXY-1595776675398)(https://cdn.jsdelivr.net/gh/6xiaoDi/blogpic/images/20200726_01/20200726230729.png)]

在这里插入图片描述

你几乎可以在任何元素上使用box-shadow来添加阴影效果。如果元素同时设置了 border-radius属性，那么阴影也会有圆角效果。多个阴影在z轴上的顺序和多个 text shadows 规则相同(第一个阴影在最上面)。

是一个允许你生成 box-shadow 的交互式工具。

更多可参考

2.2.1 example17

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			margin: 50px auto;
			/*box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；*/
			box-shadow: 2px 2px 2px 2px #000;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

水平阴影垂直阴影模糊距离（虚实）阴影尺寸（影子大小） 分别演示一下：

我们看看小米怎么写的：

可以把透明度设置深一些：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width: 200px;
			height: 200px;
			background-color: pink;
			margin: 50px auto;
			/*box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；*/
			/*box-shadow: 2px 2px 2px 2px #000;*/
			box-shadow: 0 15px 30px rgba(0,0,0,.3);
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

参考：https://github.com/6xiaoDi/blog-CSS/tree/a0.71
Branch： branch01

commit description：a0.71（综合案例example17——盒子阴影demo）

tag：a0.71

3. CSS书写规范

开始就形成良好的书写规范，是你专业的开始。

3.1 空格规范

【强制】选择器与 { 之间必须包含空格。

示例：

.selector {
}

【强制】属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格。

示例：

font-size: 12px;

3.2 选择器规范

【强制】并集选择器，每个选择器声明必须独占一行。

示例：

/* good */
.post,
.page,
.comment {
    line-height: 1.5;
}


/* bad */
.post, .page, .comment {
    line-height: 1.5;
}

【建议】一般情况情况下，选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

示例：

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login  input {}
.comment div * {}

3.3 属性规范

【强制】属性定义必须另起一行。

示例：

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }

【强制】属性定义后必须以分号结尾。

示例：

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}

（后续待补充）

0基础快速入门CSS技术栈（5）—图解详细阐述说透CSS的盒子模型（超级重要）、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心（附详细案例源码解析过程）2021.01.07更新

文章目录

1. 盒子模型（CSS重点）

1.1 看透网页布局的本质

1.2 盒子模型（Box Model）

1.3 盒子边框（border）

1.3.1 边框综合设置

1.3.2 example01

1.3.3 盒子边框写法总结表

1.3.3.1 example02

1.3.4 表格的细线边框

1.3.4.1 example03

1.4 内边距（padding）

1.4.1 内边距：

1.4.2 设置

1.4.2.1 example04

1.4.2.2 example05

1.4.3 案例： 新浪导航

1.4.4 内盒尺寸计算（元素实际大小）

1.4.4.1 example06

1.4.5 内边距产生的问题

1.4.6 padding不影响盒子大小情况

1.4.6.1 example07

1.5 外边距（margin）

1.5.1 外边距

1.5.2 设置：

1.5.2.1 example08

1.5.3 块级盒子水平居中

1.5.3.1 example09

1.5.4 文字居中和盒子居中区别

1.5.4.1 example10

1.5.5 插入图片和背景图片区别

1.5.5.1 example11

1.5.5.1.1 example11-1

1.5.5.1.2 example11-2

1.5.6 清除元素的默认内外边距(重要)

1.5.6.1 example12

1.5.7 外边距合并

1.5.7.1 (1). 相邻块元素垂直外边距的合并

1.5.7.1.1 example13

1.5.7.2 (2). 嵌套块元素垂直外边距的合并（塌陷）

1.5.7.2.1 example14

1.6 盒子模型布局稳定性

1.7 ps基本操作以及常用快捷键：

1.8 综合案例

1.8.1 去掉列表默认的样式

1.8.2 example15

1.8.2.1 example15-1

1.8.2.2 example15-2

1.8.2.3 example15-3

1.8.2.4 example15-4

1.8.2.5 example15-5

1.9 总结

2. 拓展@

2.1 圆角边框(CSS3)

2.1.1 example16

2.1.1.1 example16-1

2.1.1.2 example16-2

2.1.2 语法

2.1.3 demo

2.2 盒子阴影(CSS3)

2.2.1 example17

3. CSS书写规范

3.1 空格规范

3.2 选择器规范

3.3 属性规范

1.4.3 案例：新浪导航