CSS学习笔记

最新推荐文章于 2024-08-19 10:18:28 发布

zhangty0808

最新推荐文章于 2024-08-19 10:18:28 发布

阅读量101

点赞数

文章标签： css 学习 html

本文链接：https://blog.csdn.net/qq_42101569/article/details/125745347

版权

CSS学习笔记

一、CSS基础认知

1. CSS简介

CSS(Cascading Style Sheets)是层叠样式表，是用来给HTML添加样式的标记语言。他可以设置HTML页面中的文字大小、颜色、对齐方式、以及元素的宽高、位置等样式。
CSS与CSS3的关系：CSS3是CSS的最新版本，它在原有的CSS基础上增加了大量的样式、动画、2D、3D特效和移动端特性等。

CSS规则集

CSS规则集：由选择器和声明块组成，声明块由{}英文字符花括号括起来。
选择器：选择器指向需要设置样式的HTML元素，通过选择器我们知道是给哪个元素添加样式。
声明块：包含一条或多条声明，每条声明用;分号隔开。
每条声明：每条声明都包含一个CSS属性名和其对应值，以:冒号分隔。

	div {color:red; font-size:14px;}

CSS注释

在CSS中注释格式为/*……*/，注意需要与HTML的注释进行区分！

<style>
	/* 注释 */
	div {
		color: red;
		font-size: 14px;
	}
</style>

CSS的2种书写方式

每行只描述一个属性，每条声明与选择器之间产生一个tab的间距。
	p {
		color: blue;
		font-size: 18px;
	}
CSS中的样式声明直接写在一行。(通常用于项目上线时对代码的压缩)
	p {color: blue; font-size: 20px;}

2. CSS的4种引入方式

(1) 内嵌样式/内部样式

内嵌样式：在HTML文件的<head> </head>标签中，添加<style></style>标签对，然后在<style></style>标签对中写CSS语句。
style：样式。 type：类型，当前样式的类型是text/css。(type属性可省)

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css引入方式：内部样式</title>
    <style>
        div {
            color: blueviolet;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>css样式</div>
</body>
</html>

(2) 行内样式

行内样式：直接写在元素的属性中，他只能作用于当前标签。这种写法和结构混在一起，通常和JS配合使用。
<div style="color: red;">行内样式</div>

(3) 外部样式/外链样式

外部样式：将CSS单独存为.css文件，然后使用<link>标签引入到页面中，它的优点是：可以令多个HTML页面共享一个CSS样式表文件。
html文件：

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css引入方式：外部样式</title>
    <!--
    	rel:关联
    	stylesheet：样式表
    	href：路径和文件名
    -->
    <link rel="stylesheet" href="./css/basic.css"></link>
</head>
<body>
    <div>css样式</div>
</body>
</html>

div {
	color: yellow;
	font-size: 18px;
}

(4) 导入式样式

导入式样式：使用导入式的样式表，不会等待css文件加载完毕，而是会立即渲染HTML标签。这样，网页就会呈现出没有css样式的HTML结构。
<style>
	@import url(./css/index.css);
</style>

3. CSS引入样式优先级

行内样式的优先级是最高的，内联样式和外部样式在书写时，如果样式发生冲突，会以写在下面的样式为主。

4. CSS选择器

CSS选择器：主要是用来选中我们需要设置样式的元素，以便为元素添加CSS样式。
CSS选择器的分类：

基础选择器
1. 标签选择器
2. id选择器
3. class选择器
4. 通配符选择器
复合选择器
5. 交集选择器
6. 并集(分组)选择器
7. 后代选择器
8. 子代选择器
9. 相邻兄弟选择器
10. 通用兄弟选择器
11. 伪类选择器
12. 伪元素选择器
13. 属性选择器
14. :first-child 和 :last-child 选择器
15. :nth-child(n) 和 :nth-last-child(n) 选择器
16. :nth-of-type(n) 和 :nth-last-of-type(n) 选择器
17. :root 选择器
18. :empty 选择器
19. :only-child 选择器
……等几十种

(1) 标签选择器

标签选择器：也称之为“元素选择器”、“类型选择器”。它可以直接使用元素的标签名作为选择器，将选择页面上所有该种标签，无论标签所处的位置深浅。由于标签选择“覆盖面”非常大，所以通常用于样式的初始化。
语法：element {…样式声明…}

(2) id选择器

id选择器：使用HTML元素中的id属性来选择特定元素。元素的id在页面中是唯一的，因此用id选择器来选择一个唯一的属性。
语法：#id {…样式声明…}

(3) class选择器

class选择器：HTML元素以class属性来设置。一个元素可以有多个class名，类名中间用空格隔开。class选择器也可以为多个拥有符合class属性的元素设置样式。 不同的标签可以用相同的类名减少代码量。
语法： .class {…样式声明…}

原子类

在网页项目前，可以将所有常用的字号、文字、颜色、行高、外边距、内边距等等都设置为单独的类，HTML标签在使用时按需选择类名即可，这样就可以快速添加一些常见样式。
应用场景：组件开发。
<style>
	.fs12 {font-size: 12px;}
 	.fs14 {font-size: 14px;}
 	.fs16 {font-size: 16px;}
 	.fs18 {font-size: 18px;}
 	.color-red {color: red;}
 	.color-blue {color: blue;}
 ……
</style>

(4) *通配符选择器

*代表页面中的所有元素，基本不用，因为对性能消耗过大。
* {color: red;} /* 页面中所有元素的字体颜色为红色 */

(5) id和class的命名规则

只能由字母、下划线、数字、短横线构成，但是不能以数字开头，字母是区分大小写的，但习惯上使用小写字母。名字最好见名知意，多个单词可以用-隔开。

(6) 基础选择器的优先级

权重从高到低依次是：id选择器 > 类选择器 > 标签选择器 > *通配符

(7) 后代选择器

在CSS中使用空格表示后代，后代不一定是儿子，子孙都可以
element element {…样式声明…}
后代选择器可以有很多空格来表示其中的后代

<head>
	<style>
  		div {
  		color: blueviolet;
  		font-size: 20px;
 		}        
       div div p {
           color: red;
       }
       div span {
           color: aquamarine;
       }
   </style>
</head>
<body>
   <div>css样式
       <span>后代span</span>
       <div>
          <span>我也是后代</span>
           <p>我是后代p</p>
       </div>
       <p>我的样式是什么</p>
   </div>
</body>

后代选择器案例

二、CSS基本属性

1. CSS字体属性

(1) color属性：字体颜色

color属性用于设置文本内容的字体颜色。它可以用英文单词、十六进制、rgb()、rgba()来表示。
a. 用英文单词表示
可以使用red、blue等英文单词表示，这种方法通常用在学习测试使用，工作实际需要捕获更加精准的颜色。
b. 十六进制表示
十六进制是所有设计软件中通用的颜色表示方法。如：#cf42ff,#000d3f等。十六进制表示法在每一组内的字符都相同时也可简写：#cc00ff 可以简写为 #c0f，但是ff43dd不可以简写。

常用十六进制表示法：

色值	描述
`#000`	黑色
`#fff`	白色
`#ccc #333 #2f2f2f #666 #ddd`	灰色

c. rgb() 表示法
rgb() 中需要传入三个参数，代表光学显示器三原色：红、绿、蓝。每个参数的取值范围是0~255。
color: rgb(202, 11,129)
d. rgba() 表示法
rgba() 中需要传入四个参数，前三位与rgb()相同，最后一位表示透明度，取值在0~1之间。0表示完全透明，1表示不透明。从0-1值越大透明度越低。
color: rgb(202, 11,129, 0.5)

(2) font-size属性：字体大小

font-size用来设置文字的字体大小，常用的单位是px，还有%，移动端用的单位是vw、vh、rem、em等。
a. px像素单位
网页默认的字体大小是16px，浏览器支持的最小字体大小是12px，即使设置小于12px也会默认以12px大小显示。
font-size: 20px
b. 百分比单位
百分比是相对于父元素的font-size大小而言的。
<style>
	p {
		font-size: 20px;
	}
	p span {
		font-size: 200%;
	}
</style>
<body>
	<p><span>字体</span>大小以百分比为单位，相对的是父元素的font-size大小</p>
</body>

(3) font-weight属性：字体粗细

font-weight设置字体的粗细，通常使用的值有normal和bold两个值，或其对应数字400与700来表示。

属性值描述
normal 正常粗细，与400等值
bold 加粗，与700等值
lighter 比从父元素继承来的值更细(处在字体可行的粗细值范围内)
bolder 比从父元素继承来的值更粗(处在字体可行的粗细值范围内)

当使用数字来表示粗细时，数字的大小介于1~1000之间，更大的数字比更小的数字表示的字体粗细要相对粗些(最终的粗细都处在字体可行的粗细值范围内)。
font-weight: bold;

属性值	描述
normal	正常粗细，与400等值
bold	加粗，与700等值
lighter	比从父元素继承来的值更细(处在字体可行的粗细值范围内)
bolder	比从父元素继承来的值更粗(处在字体可行的粗细值范围内)

(4) font-style属性：字体样式

font-style设置字体的倾斜。
font-style: italic;

属性值描述
normal 取消倾斜，把天生的i、em等标签设置为不倾斜
italic 倾斜字体(常用)，如果当前字体没有可用的斜体版本，会选用oblique代替
oblique 设置倾斜字体(用常规字体模拟)，不常用

属性值	描述
normal	取消倾斜，把天生的i、em等标签设置为不倾斜
italic	倾斜字体(常用)，如果当前字体没有可用的斜体版本，会选用`oblique`代替
oblique	设置倾斜字体(用常规字体模拟)，不常用

(5) font-family属性：字体类型

font-family属性用于设置字体类型，浏览器的默认字体为“微软雅黑”。
font-family: "微软雅黑"; /*中文的微软雅黑*/
font-family: "Microsoft Yahei"; /*英文的微软雅黑*/
也可以在font-family中设置多个字体类型，，后面的字体为前面字体的后备字体。字体间用,隔开，如果第一个字体浏览器不支持，就会往后找，知道找到支持字体，如果设置的字体都不支持，就会以浏览器默认的字体显示。
*注意：中文字体要用英文双引号包裹(如："宋体")，英文字体如果名称中有空格也需要加双引号(如："Microsoft Yahei"，但对于英文双引号可以省略)，字体通常必须是用户计算机中已经安装好的字体，所以一般设置为微软雅黑或宋体较多，设置为其他样式比较少。

(6) @font-face属性：自定义字体

@font-face可以消除对用户电脑字体的依赖，如果用户电脑中没有我们想要的字体，那用户在浏览网页时就会下载相关字体，然后显示字体效果。
1. 定义字体前准备工作
必须要自己定义新的字体(需要有字体文件)。字体文件根据操作系统和浏览器不同，有eot、woff2、woff、ttf、svg文件格式，需要同时有这5种文件，要不然有的电脑会显示不了。
2. 如何定义字体
/* 定义字体 */
@font-face {
	font-family: ;/*字体类型*/
	src: url();/*引入字体文件*/
}
3. 使用阿里巴巴惠普字体步骤
首先进入https://www.iconfont.cn/webfont，输入要定义的字体文字，选择字体类型，生成字体文件并下载到本地，解压下载文件，打开demo.html文件，按给定的声明教程使用字体。

字体有很多是有版权的不能随便商业使用，建议使用阿里巴巴普惠体，可免费商用的字体
阿里巴巴普惠体：https://www.iconfont.cn/webfont(opens new window)
使用阿里巴巴普惠字体，可以下载，也可以在线使用，也省去了下载字体的麻烦
实际应用场景：指定特定文字设置样式，比如：标题 …

2. CSS文本属性

(1) text-decoration属性：修饰线

用于设置文本的修饰线外观，如：下划线、上划线、贯穿线/删除线或闪烁。常用属性值有三种：

属性值描述
none 去掉下划线
underline 添加下划线
line-through 添加删除线

text-decoration是以下四个属性的缩写：
text-decoration-line：文本修饰的位置，如下划线underline、删除线line-through
text-decoration-color：文本修饰的颜色
text-decoration-style：文本修饰的样式，如波浪线wavy、实线solid、虚线dashed
text-decoration-thickness：文本修饰线的粗细
<style>
	.wavy {
		text-decoration: wavy underline red 5px;
	}
</style>
<body>
	<div class="wavy">下画波浪线示例</div>
</body>

属性值	描述
none	去掉下划线
underline	添加下划线
line-through	添加删除线

(2) text-indent首行缩进

一段文本首行向内缩进的距离，中文一般文章书写都会缩进两个字符。常用单位是em，1em是一个字符的宽度,2em表示 2 个字符的宽度。

(3) line-height 行高

line-height 属性：多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非替代的 inline 元素，它用于计算行盒（line box）的高度。它的单位可以是 px 为单位的数值。line-height 属性也可以是没有单位的数值，表示字号的倍数，这是最推荐的写法，实际工作中行高：1.25 , 1.5 , 1.75 都是常用的倍数设置。line-height 属性也可以是百分数，表示字号的倍数。

单位实例说明
px line-height:30px; 行高为 30px
数值表示法 line-height:2; 行高为 font-size 的倍数，如果font-size:20px;则line-height:2;表示行高为 40px
百分比表示法 line-height:200%; 行高为 font-size 的百分比，如果font-size:20px，则line-height:40px;
normal line-height:normal; 取决于用户端。桌面浏览器（包括 Firefox）使用默认值，约为1.2，这取决于元素的 font-family。

推荐在设置 line-height 时使用无单位数值。主段落内容的 line-height 至少应为 1.5。如果文字的大小要随页面的缩放而变化，请使用无单位的值，以确保行高也会等比例缩放。

单位	实例	说明
px	line-height:30px;	行高为 30px
数值表示法	line-height:2;	行高为 font-size 的倍数，如果font-size:20px;则line-height:2;表示行高为 40px
百分比表示法	line-height:200%;	行高为 font-size 的百分比，如果font-size:20px，则line-height:40px;
normal	line-height:normal;	取决于用户端。桌面浏览器（包括 Firefox）使用默认值，约为1.2，这取决于元素的 font-family。

(4) 行文本垂直、水平居中

1.行文本垂直居中
设置行高 = 盒子高度，即可实现单行文本垂直居中。
span {
	height: 20px;
	line-height: 20px;
}
2. text-align 属性
text-align 属性用于定义行内内容（例如文字、图片、行内块级元素） 相对它的块父元素的对齐方式。常用的三个属性值：left 水平居左，right 水平居右，center 水平居中。
<style>
 div.left {
   text-align: left;
 }
 div.center {
   /* 文本居中对齐 */
   text-align: center;
 }
 div.right {
   text-align: right;
 }
</style>
<body>
	<div class="left">左边</div>
	<div class="center">中间</div>
	<div class="right">右边</div>
</body>

(5) font复合属性写法

font 属性可以用来作为 font-style，font-weight ，font-size ，line-height 和 font-family 属性的合写。
/* 
	20px 表示字体大小
	1.5 表示行高
	Arial, "微软雅黑" 表示字体（英文写前边，中文写后边）
*/
font: 20px/1.5 Arial, "微软雅黑";
也可以在font复合属性中同时设置倾斜加粗：
/* 
	italic 倾斜
	bold 加粗
*/
font: italic bold 20px/1.5 Arial, "微软雅黑";
*注意：

font 属性连写时，必须设置 font-size 和 font-family 才能生效
font-style 和font-weight必须写在font-size前
需要注意行高与font的书写顺序，font在后如无设置会恢复默认行高
<style>
 	p {
   	/* 此行高不生效，因为font连写时，30px/行高 ，这里默认有行高了 */
   	/* line-height: 40px; */
   	font: bold 30px "宋体";
   	/* line-height 写在 font 下边，即可生效，此时 是覆盖了font默认的行高 */
   	line-height: 50px;
 }
</style>

(6) word-spacing 词间距

word-spacing 表示词间距，对中文是无效的，仅对英文字单词起作用。

属性值描述
normal 正常的单词间距，由当前字体和/或浏览器定义。
长度通过指定具体的额外间距来增加字体的单词间距
<style>
	.f1 {
  		word-spacing: 50px; /*英文单词间间距*/
 	}
</style>
<body>
	<h3 class="f1">注意观察，汉字与英文之间的显示区别</h3>
	<h3 class="f1">display is different</h3>
</body>

属性值	描述
normal	正常的单词间距，由当前字体和/或浏览器定义。
长度	通过指定具体的额外间距来增加字体的单词间距

(7) letter-spacing 字符间距

letter-spacing 属性用于设置文本字符的间距表现。

属性值描述
normal 此间距是按照当前字体的正常间距确定的
长度指定文字间的间距以替代默认间距。可以是负值如-10px
<style>
 .f1 {
 		letter-spacing: 20px; /*英文单词间间距*/
	}
</style>
<body>
 <h3 class="f1">注意观察，汉字与英文之间的显示区别</h3>
 <h3 class="f1">display is different</h3>
</body>

属性值	描述
normal	此间距是按照当前字体的正常间距确定的
长度	指定文字间的间距以替代默认间距。可以是负值如-10px

3. 列表样式

(1) list-style-type

实际开发中以list-style-type: none;为主。其他样式可能会使用到图标。

值描述
none 无标记。
disc 默认。标记是实心圆。
circle 标记是空心圆。
square 标记是实心方块。
decimal 标记是数字。
decimal-leading-zero 0 开头的数字标记。(01, 02, 03, 等。)
lower-alpha 小写英文字母 The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大写英文字母 The marker is upper-alpha (A, B, C, D, E, 等。)

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0 开头的数字标记。(01, 02, 03, 等。)
lower-alpha	小写英文字母 The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母 The marker is upper-alpha (A, B, C, D, E, 等。)

(2) list-style-image

用来指定列表中的列表标记图像，几乎不用，了解就好

值描述
URL 图像的路径。
none 默认。无图形被显示。
inherit 规定应该从父元素继承 list-style-image 属性的值。

值	描述
URL	图像的路径。
none	默认。无图形被显示。
inherit	规定应该从父元素继承 list-style-image 属性的值。

(3) list-style-position

规定列表中列表项目标记的位置，几乎不用，了解就好

值描述
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承 list-style-position 属性的值。
<style type="text/css">
       ul li {
           border: 1px solid red;
           /*边框线*/
           list-style-position: outside;
           /*圆点位置*/
           list-style-image: url(images/dot.png);
           /*圆点图标*/
       }
   </style>
   <body>
       <ul>
           <li>前端</li>
           <li>java</li>
           <li>大数据</li>
       </ul>
   </body>

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

(4) list-style

list-style 是 list-style-type 、 list-type-position、list-style-image 的三个的综合写法。但在实际开发中，用的最多的是 list-style:none; 和 list-style-type:none用来去掉标记。

三、CSS盒子模型

1. 盒子模型简介

所有HTML标签都可以看出矩形盒子，具有 盒子模型 结构。盒模型有4个部分组成，分别是：content、padding、border、margin。盒模型有5个属性：width、height、border、padding、margin。

在标准盒子模型下，盒子模型的content部分就是元素width和height属性组成的矩形部分。

2. 盒子模型属性

(1) width 和 height属性

width 和 height分别代表盒子内容的宽度和高度，单位为px或百分比，移动端常为（vw,vh,rem等）。

宽高特性

- 块级元素

当块级元素(div,p,li,h1~h6)等没有设置width属性时，盒子的宽度会自动撑满它的父元素，但不意味着width可以继承，width是无法继承的。
高度在没有设置时，其高度为内容高，如果内容为空，则高度为0.
支持宽高的属性设置

- 内联元素

内联元素的宽高是有其内容决定的如果内容为空，则宽高默认为0
内联元素不支持设置宽高。

(2) border属性

border属性由3个部分组成：border-width线宽、border-style风格、red颜色。
border: 2px solid red;

常见风格描述
none 无边框，当元素设置边框后去掉边框时用
solid 实线
dashed 虚线
dotted 点状线
double 双边框
groove 定义3D凹槽边框。效果取决于border-color值
ridge 3D inset边框。效果取决于border-color值
outset 3D outset边框。效果取决于border-color值
hidden 隐藏边框
border三要素小属性：border-width线宽、border-style风格、red颜色。它们是为了层叠大属性用的。

CSS样式层叠

有多个选择器或一个选择器对某个或某几个标签中的多条样式进行选择，如果多个选择器都赋给某个或某几个标签相同属性，样式的作用范围发生了重叠。在使用时我们可以用小属性层叠大属性设置更加便捷。

border四个方向的属性
border-top、border-right、border-bottom、border-left，去掉某一方向边框将对应的值设为none即可。同样各个方向也有与其对应的三要素小属性，如border-left-color……

常见风格	描述
none	无边框，当元素设置边框后去掉边框时用
solid	实线
dashed	虚线
dotted	点状线
double	双边框
groove	定义3D凹槽边框。效果取决于border-color值
ridge	3D inset边框。效果取决于border-color值
outset	3D outset边框。效果取决于border-color值
hidden	隐藏边框
border三要素小属性：`border-width`线宽、`border-style`风格、`red`颜色。它们是为了层叠大属性用的。

(3) padding内边距

padding内边距是盒子内容到边框间的距离。也有4个方向的属性padding-top、padding-right、padding-bottom、padding-right。
padding属性设置值时可以简写：
padding属性设置内边距顺序为上右下左，按顺时针方向进行。
padding: 10px 20px 30px 40px;
当上下内边距相同，左右内边距相同时可以简写成两个值。
padding: 10px 20px;表示上下边距为10px，左右边距为20px。
当上右下左内边距相同时，可以简写为一个值。
padding: 10px;
当上下内边距不同，左右内边距相同时，可以用三个值表示。
padding:10px 20px 30px;表示上边距为10px，左右边距为20px，下边距为30px。

应用场景：如果设置父子间距，可以通过增加父元素内边距来实现。

(4) margin外边距

margin 外边距是盒子和盒子之间的距离。它同样有4个方向的属性margin-top、margin-right、margin-bottom、margin-right。margin也可以像padding一样简写。
margin可以设置块级元素水平居中效果，可以将margin左右值设为auto，即可将盒子相对于其父元素水平居中。
margin: 0 auto;

*注意：margin: auto 20px; 这样写并不会垂直居中！

总结：文字图片水平居中：text-align: center。块级元素水平居中：给自身盒子加上margin: 0 auto;

外边距重叠

margin重叠也叫外间距重叠或外间距合并，或者外边距穿透，或外边距塌陷。

兄弟元素之间-上下外边距重叠
元素垂直排列时，第一个元素的下外边距与第二个元素的上外边距会发生合并，合并后的间距为两者间最大的值。
解决办法：1. 把产生外边距重叠的任一元素加上display: inline-block。 2. 把外边距只加在其中一个元素上。 3.任意一个元素的外边距换成对应的padding。

父子元素之间-上外边距重叠
当一个元素包含在另一个元素中时，如果父元素没有设置边框或者内边距把外边距隔开，他们的上外边距也会发生合并。
解决办法：1.给父元素加上：overflow: hidden;。 2.给父元素加边框，将颜色设置为透明transparent。 3. 将子元素的margin转换为在子元素外套上一层盒子加padding。

(5) 去掉默认样式

网页中的元素为了展示元素本身的用途和结构，都会给元素添加默认的样式。
一些元素都有默认的 margin，如下常见的默认样式:

h、body、ul、p 标签，都添加了默认的 margin。
ul 添加了默认的 padding、list-style
a 标签添中了默认的颜色、下划线等等 … （后续在项目开发中还会深入所有标签的默认样式）

我们在实际的网页开发中，要将这些默认的样式清除掉，也称之为 “CSS 样式的初始化”
*通配符选择器，表示选择所有元素（通配符有效率问题，实际工作中不使用）。

(6) 盒子的水平居中

盒子将水平居中。共有两种方法：

将盒子的左右两边的 margin 都设置为 auto:
/* margin: 上下0 ，左右自动 */
.box {
  margin: 0 auto;
}
/* 
	margin: 上10px 水平居中 下0px 
	应用场景：需要当前盒子距离顶部 10px, 水平居中对齐，距离底部0px 类似这样的需求时使用
*/
.box {
  margin: 10px auto 0;
}
盒子的垂直居中，需要使用绝对定位技术实现

 <style>
   section {
     width: 300px;
     height: 200px;
     background-color: salmon;
     /* 盒子水平居中 */
     /* margin: 0 auto; */
     /* margin: 上150px 水平居中对齐 下0px */
     margin: 150px auto 0;
     /* 文本内容水平居中 */
     text-align: center;
     /* 文本内容垂直居中 */
     line-height: 200px;
   }
 </style>
 <body>
   <section>我是文档区域标签</section>
 </body>

(7) 盒子模型占位计算

盒模型的内容区大小，可视宽高，盒模型实际占位宽度

盒模型的内容区大小
在标准盒子模型中，content 内容区，也就是盒子里面能留给子元素的宽度和高度大小,也就意味着盒子里面的内容的最大面积就是 width 和 height 形成的矩形面积。
如果只有一个子元素，子元素的宽度超过父元素，就会溢出。
如果有多个子元素，子元素（行内元素，行内块元素）的宽度加起来超过了父元素，那么超过的那些子元就会换行显示。
盒模型可视宽高
可视区宽 = 宽度 + 左右内边距 + 左右边框宽
可视区高 = 高度 + 上下内边距 + 上下边框宽
盒模型实际宽高
实际占位宽 = 宽度 + 左右内边距 + 左右边框宽 + 左右外边距
实际占位高 = 高度 + 上下内边距 + 上下边框宽 + 上下外边距

盒模型的内容区大小：决定了父元中的子元素能占据的最大的宽和高度
可视区占位：我们看到的这个元素在页面层现的效果的区域
实际占位宽度：决定了这个元素在父元素中的占据面积（宽和高）

3. box-sizing 怪异盒模型

在 CSS3 中新增了怪异盒子模型（IE 盒子模型）

(1) box-sizing 是什么？

将盒子添加 box-sizing: border-box;属性，盒子的 width、height 数字就表示盒子实际占有的宽度高度（不含 margin），即 padding、border 变为内缩的，不再外扩。
box-sizing 属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，在 PC 页面开发中使用较少。
box-sizing 属性兼容到 IE9。

<style>
  .box {
    width: 200px;
    height: 200px;
    border: 10px solid skyblue;
    padding: 10px;
    margin: 100px auto;
    /* 
        添加 box-sizing 之前，box是外扩的，总宽度=240px
        添加 box-sizing 之后，变成内缩，总宽度=200px */
    box-sizing: border-box;
  }
</style>

<body>
  <div class="box"></div>
</body>

设置box-sizing: border-box;怪异盒模型
设置box-sizing模型
标准盒模型

(2) 为什么 div 和 button 按钮的大小有差别？

button 按钮默认是怪异盒模型.即：自带box-sizing: box-border;属性。
button 是内缩的，div 是外扩的。

<style>
  .box1 {
    width: 100px;
    height: 30px;
    background-color: skyblue;
    padding: 10px;
    border: 5px solid gold;
  }
  button {
    width: 100px;
    height: 30px;
    background-color: skyblue;
    padding: 10px;
    border: 5px solid gold;
  }
</style>
<body>
  <div class="box1"></div>
  <button></button>
</body>

div 和 button 按钮的大小有差别

(3) 盒模型分为两种类型

标准盒模型
box-sizing: content-box; 盒子的大小会因为设置的内外边距和边框而变化。即：外扩
怪异盒模型
box-sizing: box-border; 盒子会的实际大小是设置的大小，不会因为内外边距和边框的大小而变化，
即：内缩

（4）标准盒模型和怪异盒模型区别

标准盒模型和 IE 盒模型的区别在于设置 width 和 height 属性时，所对应的范围不同：

标准盒模型的 width 和 height 属性的范围只包含了 content 内容区。
IE 盒模型（怪异盒模型）的 width 和 height 属性的范围包含了 border、padding 和 content
尺寸计算公式：
width = border + padding + 内容的宽度
height = border + padding + 内容的高度
button 标签，是典型的怪异盒模型

(5) 盒模型转换

我们通过 box-sizing 属性来切换标准盒子模型与怪异盒子模型。
box-sizing：content-box 是默认值，盒子以标准盒子模型特性来渲染。
box-sizing: border-box 盒子以标准盒子模型特性来渲染。

应用场景：

如果我们期望不管内容区，边框、内边距大小如何变化，元素的可视宽高始终不变时，就可以给元素添加 box-sizing:border-box;属性，以怪异盒模型来渲染。
不管元素的占位宽如何变化，始终保持边框和内边距不变，希望通过改变内容区大小来达到目的。
常见的响应式开发中、栅格系统等。