第一章：css概述
1.1.css的简介
1)什么是CSS
css中文名称叫层叠样式表，层叠为css的布局，表示布局方式是通过一层层来实现的；样式是布局层的显示效果，主要是通过css提供的一些属性和属性值实现。
css样式设置是以名值对存在，名值用：隔开，以；结束。
color: red;2)css的作用
使得页面显示效果更加好，CSS将网页内容和显示样式进行分离，提高了显示功能。也就是css负责网页的显示效果，html负责页面的结构，两者互不干扰。
1.2.html页面引入css样式的方式
html页面引入css样式的方式分为两大类：内部引入和外部引入
1）内部映入css样式的方式
a，标签的属性style
<div style="background-color:red;color:green;">b，标签style实现样式设置
<html>
<head>
<title>HTML示例</title>
/**style标签设置样式**/
<style type="text/css">
div{
background-color:green;
color: red;
}
</style>
</head>
<body>
<div>其意博，其理奥，其趣深，天地之象分，阴阳之候列。</div>
</body>
</html>2）外部引入css样式文件
a，link标签引入外部css样式（主要使用）
<link rel="stylesheet" type="text/css" href="css文件的路径" />b，在style标签使用@import引入外部css样式（兼容性差）
<html>
<head>
<title>HTML示例</title>
<style type="text/css">
@import url(div.css);
</style>
</head>
<body>
<div>变化之由表，死生之兆彰，不谋而遗迹自同，</div>
</body>
</html>
1.3.css加载
css使用的加载方式是自上而下从右到左（优化方面）加载方式，所以在引入css样式的时候，通常都是放在head里面，这样优先加载样式，再加载结构，这样保证在加载结构的时候可以将样式加载到结构中。内部加载也是这个原理，自上而下加载的时候，如果同时设置一个样式，下面的样式会把上面的样式给覆盖掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div1{
height: 10px;
width: 100px;
/* 出现样式覆盖 */
background-color: teal;
background-color: red;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>1.4.css注释
css注释注释为：
/* 注释*/第二章：CSS选择器
CSS可以通过自身、设置属性class以及设置ID属性来获取该元素并设置该元素的属性，选择器主要分为单选择器、多选择器以及伪类选择器等。
由于官方没有给出单个选择器和多个选择器的名称定义，在此为了好分类，我就只能直接为他们定义了。官方给出的选择器分类主要有标记名选择器（元素选择器）、类选择器以及id选择器三种分类，三种分类可以单独写，也可以多个写在一起。我就把单独写的命名为单选择器，多个写在一起的命名为多选择器。
2.1.单选择器
1）标记名选择器（元素选择器）
格式：元素名{样式}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<div>
<p>好好学习，天天向上</p>
</div>
</body>
</html>2）类选择器
每个元素都会有一个class属性，通过设置该属性值，在通过"."来获取该元素并设置其样式。
类选择器的特点：属性值可以设置成相同的，获取时，就是获取属性值为该值得全部元素。
格式：.类名{样式}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 获取属性值为div1的全部标签
*/
.div1{
color: crimson;
}
</style>
</head>
<body>
<div class="div1">每天进步一点点</div>
<div class="div1">
<li>第一</li>
<li>第二</li>
</div>
</body>
</html>3）id选择器
和类选择器一样，每个元素都会有一个id属性，通过设置该id属性值，通过"#"获取id值为该值得元素
id值得特点：id值应该是一个唯一不重复的值
格式：#id值{样式}
注意：如果两个元素设置id值为相同值，在获取的时候，主流的浏览器解析的效果会和类选择器一样而不是强制要求唯一不重复。这个类似只是定成一个规则。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#title1{
color: chartreuse;
}
</style>
</head>
<body>
<h1 id="title1">题目1</h1>
</body>
</html>4）通配符选择器
通配符选择器是获取全部的元素。
格式：*{样式}
该方式主要用来设置元素的初始化值，很多情况下的元素都会有默认值，比如外边距，内边距等，如果需要消除这个默认值以便布局，可以使用该方式，后面也会说明一样给元素初始化。
2.2.多选择器
2.2.1.复合选择器
1）交集选择器
作用：选中同时符合多个条件的元素。
语法：选择器1选择器2选择器n{样式}
注意：如果有元素选择器，元素选择器必须在最前面。
</head>
<style>
/* 表示选中标签为div并同时满足class为.box2。id为#box2的标签 */
div.box2#box2{
height: 20px;
width: 20px;
background-color: red;
}
</style>
<body>
<!-- 交集选择器 -->
<div class="box1" id="box2"></div>
<div class="box2" id="box2">
<ul class="u1">
<li class="li1"></li>
<li></li>
</ul>
</div>值得注意的是，交集选择器只能在一个表情内的多个选择器使用，如果选择class为box2下的ul标签，则不可以实现，只能通过后面讲的子类选择器或者后代选择器。
2）并集选择器（组合选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器n{样式}
</head>
<style>
/* 组合选择器（并集选择器） */
/* 表示选中class为box3和class为li1的标签 */
.box3,.li1{
height: 20px;
width: 20px;
background-color: red;
}
</style>
<body>
<div class="box1" id="box2"></div>
<div class="box2" id="box2">
<ul class="u1">
<li class="li1"></li>
<li></li>
</ul>
</div>
<div class="box3">
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>2.2.2.关系选择器
在html页面中html元素时其他全部元素的父标签，其他元素都是html元素的子标签或者后代标签。所以可以得出一个元素相对于其他元素的元素关系：
父元素
—— 直接包含子元素的元素
子元素
—— 直接被父元素包含的元素
祖先元素
—— 直接或者间接包含后代元素的元素，一个元素的父元素也是他的祖先元素
后代元素
—— 直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素
—— 拥有相同父元素的元素
1）子元素选择器
语法：父元素>子元素{}
<style>
/* 子类选择器 */
/* 表示选父类class为.box2中的子元素名为div的元素 */
.box2>div{
height: 100px;
width: 100px;
background-color: red;
}
</style>
<body>
<!-- 交集选择器 -->
<div class="box1" id="box2"></div>
<div class="box2" id="box2">
<div>aaaa</div>
<ul class="u1">
<li class="li1">
<div>aa</div>
<a href=""></a>
</li>
<li></li>
</ul>
</div>
<div class="box3">
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>注意的是，就算.box2中有个div在li标签内，不属于给元素的子类，而是属于他的后代，也不选择。
2）后代选择器：
语法：祖先元素 后代元素{样式}（注意有空格）
<style>
.box2 div{
height: 100px;
width: 100px;
background-color: red;
}
</style>
<body>
<!-- 交集选择器 -->
<div class="box1" id="box2"></div>
<div class="box2" id="box2">
<div>aaaa</div>
<ul class="u1">
<li class="li1">
<div>aa</div>
<a href=""></a>
</li>
<li></li>
</ul>
</div>
<div class="box3">
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>表示选中class为box2的标签内的全部div标签
3）兄弟选择器（获取该元素下一个兄弟元素）
语法：兄弟元素+下一个兄弟元素{样式}
</head>
<style>
.li1+li{
height: 100px;
width: 100px;
background-color: red;
}
</style>
<body>
<li class="li1">1</li>
<li>2</li>
<li>3</li>
</body>
</html>这个选中的是第二个li标签，还有种情况是：
</head>
<style>
li+li{
height: 100px;
width: 100px;
background-color: red;
}
</style>
<body>
<li class="li1">1</li>
<li>2</li>
<li>3</li>
</body>
</html>这种情况选中的是内容为2和3的li标签， li+li表示的是由兄弟标签的li元素，其中有兄弟标签的元素有第一个和第二个，所以选中的会是第二个和第三个li标签
4）兄弟元素（获取该元素下的全部兄弟元素）
语法：兄弟元素~下一个兄弟元素{样式}
</head>
<style>
/* 选中class为li1下全部div兄弟标签 */
.li1~div{
height: 100px;
width: 100px;
background-color: red;
}
</style>
<body>
<li class="li1">1</li>
<li>2</li>
<li>3</li>
<div>4</div>
<div>5</div>
</body>2.2.3.伪类选择器
伪元素：表示页面中一些的特殊的并不真实存在的一个元素。
1）伪类
:first-child:只选中第一个子元素
:last-child：只选中最后一个元素
:nth-child()：第n个子元素
2n：表示选中偶数位数的子元素
2n+1：选中奇数位数的子元素
:first-of-type
:last-of-type
:nth-of-type()
和上面类似，但是只是选中同类型的元素。
:not()：否定伪类，表示将符合条件的元素从选择器中去掉2）常见的伪类选择器
::first-letter：表示该元素内容的第一个字母
::first-line:表示该标签内容的第一行
::selection:表示选中的内容
::before：在该元素的子元素之前。添加的内容为给元素类型的元素，如果只是该元素没有其他子元素，就只是将内容添加到该元素行内。
::after：在该元素的子元素之后添加内容，添加的内容为给元素类型的元素，如果只是该元素没有其他子元素，就只是将内容添加到该元素行内。
在使用该伪类元素的时候，添加的内容是无法被选中的。（常用的作用）
3）实例，在div标签捏子标签之后添加任意内容；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<style>
.div1::after{
content: "这是在妮妮后面添加的内容";
}
</style>
<body>
<div class="div1">
<div>哈哈</div>
<div>哦哦</div>
<div>妮妮</div>
</div>
</body>
</html>2.2.4.属性选择器
语法：元素[属性]{}：表示选择拥有该属性的元素
元素[属性=属性值]{}：表示选择拥有该属性且为该属性值的元素
元素[属性^=属性值]{}：表示选择拥有该属性且以该元素属性值开头的元素
元素[属性$=属性值]{}：表示选择拥有该属性且以该元素属性值结尾的元素
元素[属性*=属性值]{}：表示选择拥有该属性且包含元素属性值的元素
[属性]{}：前面默认为通配符*，表示选中任意元素拥有该属性属性
2.3.a标签的伪类
1）未访问过的链接状态
:link2） 已访问过的链接状态
:visited为了隐私问题，样式设置的时候，除了link状态的，其他的只能设置他的颜色。
这两个伪类属于a标签特有的，下面两个是其他元素也可以有的伪类。
：hover 表示鼠标移入的状态
：active 表示鼠标点击的状态2.4.样式继承
为一个元素设置样式同时会应用到它的后代元素上的现象，叫做继承。继承只能发生在祖先后代之间。为了方便开发，可以利用继承将共同的样式设置在祖先元素上。
注意：并不是所有的样式都会被继承，例如背景相关的，布局相关的样式都不会被继承。
父元素未设置高度，会被子元素的高度撑开。
2.5.选择器的权重（优先级）
！important>内联选择器（1000）>id选择器（100）>class选择器（10）>元素选择器（1）>通配符选择器（0）>继承样式。
1）交集选择器优先级是将各个选择器权重相加；组合选择器（并）单独选择。
2）同权重时，会出现样式覆盖的情况，解析从上到下，下面的样式会覆盖掉上面的样式。
注意：当样式不生效的时候，首先要想到优先级不足。
3）如果一个选择器过低，但是这个样式必须优先显示，需要在属性值的后面加上：！important。该方式优先级超过内联样式。
2.6.单位和颜色
2.6.1.像素
单位：px
不同的设备像素显示效果不一样
2.6.2.百分比:
设置属性相对于父元素属性的百分比（不严谨）
例如:50%;
2.6.3.em：相对于元素的字体的大小计算，1 em=1 font-size
会根据自身字体大小的改变而改变。
2.6.4.rem：和em类似，只是会根据根元素的字体改变。
2.6.5.颜色
单词表示：
RGB值表示：
RGBA值表示：
十六进制的RGB值：（最常用）
HSL值：（色相，饱和度，亮度）
第三章：盒子模型
3.1.盒子模型概述
3.1.1.什么是盒子模型
css将页面中所有的元素都设置成一一个个的矩形的盒子。将盒子设置成一个个矩形盒子之后，对页面的布局就变成了将不同的盒子摆放在不同的位置。
3.1.2.盒子的构成
每一个盒子的组成成分
1）内容区（content）
在使用width，height，color等属性的时候，是对盒子的内容区进行
设置样式。
2）内边距（padding）
内边距是内容区和边框之间的距离
3）边框（border）
对边框设置样式的时候，需要指明其对应的border关键词。
4）外边距（margin）
外边距的边框和其他盒子（元素）的距离
所以一个盒子的实际大小是等于内容区大小+内边距大小+边框大小。其中内容区，内边距，边框属于可见局域，外边距属于不可见区域（不可以设置样色等可见样式）
3.2.边框
边框一般情况设置至少三个样式
border-width：边框宽度
border-color：边框颜色
border-style：边框样式可以同时设置：
border：宽度 样式 颜色；
注意：同时设置的时候，边框的宽度，样式和样式没有固定写法，谁在前后不区分。
3.2.1.边框宽度border-width
border-width：用来指定四个方向的边框宽度，不设置会有默认值，但是由于浏览器的不同，给的默认值也不同，一般还是需要自己设置一个值。
1）值的情况：
四个值：上 右 下 左
三个值：上 左右 下
三个值：上下 左右
一个值：上下左右
除了用这种方式设置，还可以通过特定方式来设置其值：
border-top-width
border-right-width
border-bottom-width
border-left-width2） border-color和border-style规则和border-width是一样的。
3.2.2.border-style（默认值是none）
样式：
solid 单实线
dashed 线性虚线
dotted 点状虚线
double 双线3.3.内边距padding
内边距：内边距是内容相对于边框的部分。 一共有四个方向的内边距：
padding-top
padding-right
padding-bottom
padding-left可见框：内容区，内边距，边框。
3.4. 外边距margin
外边距不属于盒子的一部分了，其影响主要是盒子的位置。 外边距有四个方向的外边距 。
margin-top
margin-right
margin-bottom
margin-left注意：在设置了top和left的宽度的时候，会将自身移动，而设置right和bottom的宽度的时候，只会移动它相邻的其他的元素，这个移动距离是相对于父元素来移动。
通过上述所示：margin的作用是控制盒子占的空间大小。
3.4.1.垂直外边距重叠：
1）兄弟元素的重叠：
当设置了上元素（例如div）的bottom的时候，下边的一个元素（div）设置top，这时候会发生外边距重叠，距离取较大值，而不是。
2）相关边距之和：
特殊情况是一负一正，为两者之和。
如果相邻的外边距都为负值，取绝对数最大的值。
说明：兄弟之间的外边距重叠，是有利的，一般是不处理。
3）父子元素的重叠：
父子相邻外边距重叠情况，当设置子元素的上外边距而父元素不设置外边距，子元素的外边距会专递给父元素的外边距，这是就会出现外边距重叠，
解决方式：
方式一：不用外边距，设置padding，这是这种情况会导致父元素高度变大，只要减去增加的padding就可以了，。
方式二：不让他们相邻，父子元素的外边距相邻的主要原因是父元素没有设置一个边框大小，当父元素的边框大小为0的时候，父子元素的 外边距就相邻了，这时候可以设置父元素的边框大小，来隔开父子元素的外边距。只是这样还需要修改父元素的height值。
方式三：使用伪元素隔离（后面布局单讲，详情可到5.6查看解决方式）
第四：CSS布局
4.1.CSS水平布局
4.1.1.水平布局的规范
子元素在其父元素中水平方向的位置由以下几个属性共同决定的：
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=父元素内容区的width
4.1.2.过渡约束
如果不满足这个等式浏览器会根据相对于的情况对该等式进行约束，叫做过渡约束。
如果margin-left和 margin-right都没有设置值，默认值都为0，浏览器会将margin-right设置成一个值，用于满足这个等式。
在这七个值中，有三个值（width，margin-left，margin-right）可以设置成auto，auto的意思的，如果不满足等式，浏览器会根据等式相同的元素设置设置属性为auto的元素的值，以满足该等式：
如果这三个都设置为0，则宽度设置成最大，能多大就多大。
如果设置两个外边距为一个auto，width为默认值，则把宽度设置成最大值，
如果把两个外边距为一个auto，宽度为一个固定值，则把两个外边距设置成相同值。
第三种情况一般使用它来设置在其父元素中水平居中，margin：0 auto；（上下为0，左右相同值）
4.2.垂直方向布局：
在父元素不设置高度的时候，父元素默认高度等于子元素高度。在父元素设置高度的时候，子元素高度大于父元素，会出现子元素样式溢出。对于溢出，css提供了处理机制，主要是针对子元素在父元素出现溢出时，父元素做出的处理手段。
overflow：XXXXX；
可选值：
visible :默认值，子元素出现溢出，则会在父元素外面显示
hidden:将子元素溢出部分给隐藏掉；
scroll:添加滚动条
auto：根据需要生成滚动条，水平方向出现溢出，就生成水平方向，垂直方向出现溢出，就生成垂直方向；
overflow-x:单独处理水平方向
overflow-y:单独处理垂直方向4.3. 行内元素的盒子模型
4.3.1.行内元素不支持设置宽度和高度，原因是行内元素的宽和高是由内容区的内容决定的，不可以直接通过设置宽高来设置内容区的宽高。
4.3.2.行内元素可以设置padding，border和margin，垂直方向的padding，border和margin不会影响页面的布局、
4.3.3.转换元素类型
属性：display
可选值：
inline:将元素转换为行内元素
block：将元素转换为块元素
inline-block：将元素设置成行内块元素，既可以设置宽高又不独占一行（能不用尽量不用）
table：将元素设置成一个表格，表格的主体是不占位置的。
none：将元素不显示在页面中，位置也不会占了;4.3.4.设置元素的显示状态。
属性：visibility
属性值：
hidden：元素在页面隐藏不显示，但是占位置。
visible:默认值，表示元素在页面正常显示。4.4.去掉默认样式
标签自身会有css样式，为了方便布局以及设置样式，需要将标签原有的样式去掉，一般的话直接时候一个大公司去默认样式模板css就可以了，这里就不多说了。
4.5.盒子的尺寸
默认情况下，盒子的可见框的大小由内容区，内边距和边框共同决定
box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）
可选值：
content-box默认值，宽度和高度用来设置内容区的大小
border-box：宽度和高度用来设置整个盒子可见框的大小设置成border-box后width和height就变成内容区，内边距和边框的总大小。
4.6.阴影和圆角
4.6.1.阴影
box-shadow用来设置元素的阴影效果，阴影不会影响页面布局。
第一个值：水平偏移量 设置阴影的水平位置 正值向左偏移 负值向右偏移
第二个值：垂直偏移量 设置阴影的垂直位置 正值向下偏移 负值向上偏移
第三个值：模糊的模糊半径
第四个值：背景颜色
4.6.2.轮廓线
outline：用于设置元素的轮廓线，用法和border一样。
4.6.3. 圆角
border-radius：用于设置圆角，圆角设置的圆的半径大小
单独设置：
border-top-left-radius：
border-top-right-radius：
border-bottom-left-radius：
border-bottom-right-radius：20px 20px；border-radius：四个值
顺时针，和margin类似。
圆的画法：border-radius：50% 50%；
第五章：浮动float
5.1.浮动的概述
浮动可以通过浮动使得一个元素向其父元素的左侧或者右侧移动。浮动开始的设计初衷是为了实现文字环绕图片，只是后来被开发出来用于页面布局。
5.2.浮动关键字：float
可选值：
none：默认值，不浮动；
left：左浮动；
right：右浮动；注意：元素设置了浮动之后，水平布局等式便不需要强制成立。
如果外边距设置距离不足以让子元素浮动到父元素的左边或者右边时，将不浮动。
如果父元素中的子元素都是两个块元素，想设置第二个兄弟元素右浮动，必须设置第一个兄弟元素为左浮动（浮动位置不是固定方向）
如果元素浮动，元素将从文档流中脱离出来，不再占用文档流的位置，所以下面的元素会自动向上移动。
如果元素都先同一个方向浮动，他们会发生并排
5.3,浮动特点
1）浮动元素会完全脱离文档流，不会占据文档流中的位置
2）设置浮动以后元素会向父元素的左侧或者右侧移动
3）浮动元素默认不会从父元素中移出（溢出时会溢出父元素）
4）浮动元素中先左或者向右移动时，不会超过它前边的其他浮动元素
5）如果浮动元素的上边是一个没有浮动的块元素，浮动元素就无法上移。
6）当浏览器窗口调小，浮动一行无法容纳浮动元素时，会自动将浮动元素下移，
7）浮动元素不会超过它上边浮动兄弟元素的高度，最多就是和他一样高（和他在一行）
5.4.浮动导致的问题：高度塌陷问题
5.4.1.问题概述
在浮动布局中，父元素的高度默认被子元素给撑开。当子元素浮动之后，会完全脱离文档流，将会无法撑起父元素的高度，导致父元素高度丢失,这时其他下元素会上移，导致页面布局混乱。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.div1{
border: 10px red solid;
}
.div2{
width:100px;
height:100px;
background-color:yellow;
float:left;
}
</style>
</body>
<div class="div1">
<div class="div2"></div>
</div>
</html>
5.4.2.高度塌陷问题的解决方式
1）设置父元素的高度
2）不使用浮动而是使用行内元素代替
3）BFC（块级格式化环境或格式化上下文）：隐含元素
——开启BFC的元素不会被浮动元素所覆盖
——开启BFC的元素子元素外边距不会重叠
——开启BFC的元素可以包含浮动的子元素
开启BFC的方式
- 浮动元素，float 除 none 以外的值；
- 定位元素，position（absolute，fixed）；
- display 为以下其中之一的值 inline-block，table-cell，table-caption；
- overflow 除了 visible 以外的值（hidden，auto，scroll）；
4)使用clear属性（最终方式）
5.4.3.高度塌陷问题的最终解决方式-使用clear属性
clear的作用：清除浮动元素对当前元素的影响
可选值：
left：清除左边浮动元素对当前元素的影响
right：清除右边元素对当前元素的影响
both：清除两侧元素中影响最大的元素的影响原理：设置清除浮动影响之后，浏览器会自动为元素这是一个上外边距，使其位置不受元素的影响。
方式一：通过加入一个空元素，将其设置为both，这时候该空元素的外边距为影响最大浮动元素的整个宽度，这样这个空元素会把父元素的高度给撑开。方式一的缺点是使用html结构来解决css的显示问题，这个背离了html负责结构，css负责样式的准则。
方式二：使用伪类元素向最后面添加一个内容
：：after该伪类元素默认是一个行内标签，一般使用的时候，需要将其设置成块标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.box1{
border:10px red solid;
}
.box2{
width:100px;
height: 50px;
background-color: teal;
float:left;
}
.box3{
width:200px;
height: 40px;
background-color: whitesmoke;
float:left;
}
/* 空元素：将作用为将父元素撑开 */
.box4{
clear: both;
}
/* 方式二 */
.div1{
border:10px red solid;
}
.div2{
width:100px;
height: 50px;
background-color: teal;
float:left;
}
.div3{
width:200px;
height: 40px;
background-color: whitesmoke;
float:left;
}
.div1::after{
/* 设置空内容，不占位置 */
content: "";
display: block;
clear: both;
}
</style>
<div class="box1">
<div class="box2"> </div>
<div class="box3"></div>
<div class="box4"></div>
</div>
<div class="div1">
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>5.5.伪元素解决父子外边距重叠问题
在子类设置外边距的时候，由于若父类的未设置padding时，会导致子元素的外边距和父类的外边距发生重叠，从而导致外边距重叠的情况。正常的代码代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.div1{
width: 200px;
height: 200px;
background-color: teal;
}
.div2{
width: 100px;
height: 100px;
background-color:violet;
}
</style>
</body>
<div class="div1">
<div class="div2"></div>
</div>
</html>样式效果：
设置了子标签的上外边距之后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.div1{
width: 200px;
height: 200px;
background-color: teal;
}
.div2{
width: 100px;
height: 100px;
margin-top:100px;
background-color:violet;
}
</style>
</body>
<div class="div1">
<div class="div2"></div>
</div>
</html>
当设置之后，由于子元素的外边距和父元素的外边距相邻，会导致将父元素顶下去的问题，一般的解决问题是通过设置父类的内边距将子元素的外边距和父元素的外边距隔开，同时将其设置为table（table不占位）。
过程：设置前置伪类元素，设置内容为空，将元素显示为table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.div1{
width: 200px;
height: 200px;
background-color: teal;
}
.div2{
width: 100px;
height: 100px;
margin-top:50px;
background-color:violet;
}
/* 解决方式 */
.div1::before{
content: " ";
display: table;
}
</style>
</body>
<div class="div1">
<div class="div2"></div>
</div>
</html>5.6.同时解决高度塌陷和边距重叠问题的最初方案
在解决高度塌陷的问题的时候，需要将伪元素设置为块元素，在同时解决两个问题的时候，只需要向display 设置成table，table是一个块元素同时还不占位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.div1{
border:20px red solid;
/* background-color: tomato; */
}
.div2{
width: 100px;
height: 100px;
background-color:teal;
margin-top:50px;
float: left;
}
.div1::after,
.div1::before{
content: " ";
display: table;
clear: both;
}
</style>
</body>
<div class="div1">
<div class="div2"></div>
</div>
</html>
第六章：定位
6.1.定位的概述
定位是一个高级的布局手段，通过定位可以将一个元素，可以将页面摆放在页面的任意位置
6.2.定位的使用
6.2.1.定位的属性
定位的属性名为：position
可选值为：
-static：默认值，元素时静止的，没有开启定位
-relative ：开启元素的相对定位
-absolute ：开启元素的绝对定位
-fixed：开启元素的固定定位
-sticky：开启元素的粘滞定位
注意：当使用可选值除了static之外，使用其他可选值都表示开启元素的定位功能。当开启元素的定位功能之后，就可以使用属性top，bottom，left以及right。（这几个值表示偏移量）
6.3. 相对定位：relative
当元素设置为：
position:relative;就表示开启了元素的相对定位。通过设置偏移量（top，bottom，left或者right）来实现元素的定位布局。
<body>
<style>
html{
font-size:30px;
}
.div1{
width:100px;
height:100px;
background-color: teal;
}
.div2{
width:100px;
height:100px;
background-color: orange;
position:relative;
top:-100px;
left:100px;
}
.div3{
width:200px;
height:200px;
background-color:red;
float: right;
}
</style>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</body>
</html>这段代码会将div2定位到div1的左边。在设置偏移量的时候，需要知道相对定位的定位位置，这样，才能知道如何实现定位
相对定位的定位位置：相对定位的定位位置是在该元素所在的文档流的位置（该元素左上角位置为原点）。
1）相对定位的特点
相对定位会提升元素的层级
相对定位不会使得元素脱离文档流
相对定位的定位元素原来的位置还存在。
相对定位不会改变元素的性质，是块元素还是块元素，行内元素还是行内元素。
6.4.绝对定位
-absolute ：开启元素的绝对定位
绝对定位的特点：
开启绝对定位的时候，元素会从文档流中脱离
绝对定位会改变元素属性，行内元素变成块元素，块的宽高被内容撑开。
绝对定位会使元素提高一个层级
绝对定位的定位位置：绝对定位元素是相对于包含块进行定位
包含块：
- 一般情况：
包含块是当前元素最近的祖先元素（父元素）
- 开启定位
如果该定位元素的祖先元素都开启或者部分开启定位，包含块就是离它最近的开启了定位的祖先元素
如果他的祖先元素都没有开启定位，则包含块表示的就是根元素
6.5.固定定位
-fixed：开启元素的固定定位
固定定位是一个特殊的绝对定位，大部分的特点和绝对定位是相同的。
唯一不同是：固定定位参考于浏览器的视口进行定位。
视口：浏览器的可视窗口
6.6.粘滞定位
粘滞定位：粘滞定位是新推出的一个定位，所以兼容性不好，比如火狐浏览器就不支持。 粘滞定位的相对于包含块定位。
6.7.定位布局
6.7.1.定位的水平布局
在盒子模型的时候，水平布局需要满足以下等式
margin-left+border-left+padding-left+width+padding-right+ border-right+margin-right=父元素内容区的width但是使用定位之后，会多出两个变量：left和right，所以定位水平布局需要满足下面这个等式：
left+margin-left+border-left+padding-left+width+padding-right+ border-right+marginright+right
=父元素内容区的width其中left和right也可以设置成auto，在未设置的时候，它们的默认值就是auto，所以在进行水平居中时，需要对left和right进行设置为0，为其他的值会导致不生效。
6.7.2.定位的垂直布局
在之前的盒子模型中，垂直方向的布局没有什么等式要求，但是在使用定位的时候，需要在垂直方向满足等式：
top+margin-top+border-top+padding-top+height+padding-bottom+ border-bottom+margin-bottom+bottom
=父元素内容区的height6.8.层级关系
在普通情况下，元素的层级关系是由元素关系，后代元素的层级关系比祖先的高，。在开启定位之后，可以通过设置z-index来设置定位元素的层级关系。z-index属性的可取值为整数，取值越高，层级越高，值得注意的是，如果祖先设置的层级就算比后代元素的高，浏览器解析的时候，祖先元素都不会覆盖后代元素。
第七章：字体
7.1.字体相关的样式
color：字体颜色
font-size：字体的大小
font-family：字体族（这是字体格式）
可选值：
serif:衬线字体
sans-serif：非衬线字体
monospace：等宽字体
这里的可选值是指字体的类型，可以指出具体的字体，例如：
font-family: "Microsoft YaHei", "Heiti SC", tahoma, arial, "Hiragino Sans GB", 宋体, sans-serif;7.2.图标字体
在网页中经常需要使用一些图标，可以通过图片来引入，而通过将这些图片设置成字体，可以实现对图标颜色的设置，大小的改动等。
7.2.1.fontawesome的使用
fontawesome是一个国外的字体网站，再使用的时候需要注意版权，个人倒是无所谓，但是如果是商用，可能会导致版权问题，值得注意。
第一步：下载：https://fontawesome.com
第二步：解压
第三部：将css和webfonts文件加入到项目中
第四部：将all.css导入到网页
第五步：使用图标（固定）
class=“fas fa-bell”：通过换fa-bell来使用其他图标。
7.3.行高
行高是指字体占有的空间实际高度，通过line-height来设置行高。
1） 字体框：字体框就是字体存在的格子，只能通过font-size间接设置其高度。
行高包括字体框高度，行距会等于行高减去字体框高度并在字体框上下平均分配。
7.4.字体简写属性
1）font：字重 字体的风格 字体大小/行高 字体族;(行高可以不写)
使用简写，font会给出默认值，再设置会覆盖之前设置的行高
2）font-weight 字重 字体的加粗
normal 默认值 不加粗
bold 加粗
100-900 九个级别（没什么用）
3） font-style 字体的风格
normal 正常的
italic 斜体
8.文本样式
8.1.text-align 文本的水平对齐
可选值：
left 文字左侧对齐
right 文字右对齐
center 文字居中对齐
justify 文字两端对齐
8.2.vertical-align 设置元素垂直对齐的方式
可选值：
baseline 默认值 文字基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
例如使用图片的时候，会和父元素有个缝，是因为img标签是行内标签，按照基线对齐。
如果想要去掉这个缝，只要设置成不是基线对齐就可以了。
8.3.text-decoration 设置文本修饰
可选值：
none 什么都没有
underline 下划线
line-through 删除线
overline 上划线
8.4.white-space 设置网页如何处理空白
可选值：
normal 正常
nowrap 不换行
pre 保留空白
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
必须设置以上者四个值，要不然会失效。
9.背景
9.1.背景相关的样式
1）background-color 设置背景颜色
2） background-image 设置背景图片
- 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
- 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
- 如果背景的图片大于元素，将会一个部分背景无法完全显示
- 如果背景图片和元素一样大，则会直接正常显示
3）background-repeat 用来设置背景的重复方式
可选值：
repeat 默认值 ， 背景会沿着x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复
4）background-position 用来设置背景图片的位置
设置方式：
通过 top left right bottom center 几个表示方位的词来设置背景图片的位置
使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
通过偏移量来指定背景图片的位置：
水平方向的偏移量 垂直方向变量
9.2.设置背景的范围
1）background-clip
可选值：
border-box 默认值，背景会出现在边框的下边
padding-box 背景不会出现在边框，只出现在内容区和内边距
content-box 背景只会出现在内容区
2） background-origin 背景图片的偏移量计算的原点
padding-box 默认值，background-position从内边距处开始计算
content-box 背景图片的偏移量从内容区处计算
border-box 背景图片的变量从边框处开始计算
3）background-size 设置背景图片的大小
第一个值表示宽度
第二个值表示高度
- 如果只写一个，则第二个值默认是 auto
cover 图片的比例不变，将元素铺满
contain 图片比例不变，将图片在元素中完整显示
9.3.背景相关的设置
background-color
background-image
background-repeat
background-position
background-size
background-origin
background-clip
background-attachment
- backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置
并且该样式没有顺序要求，也没有哪个属性是必须写的
注意：
background-size必须写在background-position的后边，并且使用/隔开
background-position/background-size
background-origin background-clip 两个样式 ，orgin要在clip的前边
9.5. background-attachment
- 背景图片是否跟随元素移动
- 可选值：
scroll 默认值 背景图片会跟随元素移动
fixed 背景会固定在页面中，不会随元素移动
10.渐变
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果
10.1.线性渐变
线性渐变，颜色沿着一条直线发生变化
1） linear-gradient()
linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域
- 线性渐变的开头，我们可以指定一个渐变的方向
to left
to right
to bottom
to top
deg deg表示度数
turn 表示圈
- 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，
也可以手动指定渐变的分布情况
2）repeating-linear-gradient() 可以平铺的线性渐变
background-image: linear-gradient(red,yellow,#bfa,orange);
background-image: linear-gradient(red 50px,yellow 100px, green 120px, orange 200px);
background-image: repeating-linear-gradient(to right ,red, yellow 50px);
10.2.径向渐变
1）radial-gradient() 径向渐变(放射性的效果)
默认情况下径向渐变的形状根据元素的形状来计算的
正方形 --> 圆形
长方形 --> 椭圆形
- 我们也可以手动指定径向渐变的大小
circle
ellipse
- 也可以指定渐变的位置
- 语法：
2） radial-gradient(大小 at 位置, 颜色 位置 ,颜色 位置 ,颜色 位置)
大小：
circle 圆形
ellipse 椭圆
closest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
位置：
top right left center bottom
11.动画
11.1.过渡
过渡（transition）通过过渡可以指定一个属性发生变化时的切换方式；通过过渡可以创建一些非常好的效果，提升用户的体验。
11.1.1.过渡的属性
1）transition-property: 指定要执行过渡的属性
多个属性间使用,隔开。如果所有属性都需要过渡，则使用all关键字；大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡。
transition-property: height , width;
transition-property: all; 2） transition-duration: 指定过渡效果的持续时间
时间单位：s 和 ms 1s = 1000ms
transition-duration: 100ms, 2s;
transition-duration: 2s; 3） transition-timing-function: 过渡的时序函数
指定过渡的执行的方式
可选值：
ease 默认值，慢速开始，先加速，再减速
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 先加速 后减速
cubic-bezier() 来指定时序函数（ https://cubic-bezier.com）
steps() 分步执行过渡效果
可以设置一个第二个值：
end ， 在时间结束时执行过渡(默认值)
start ， 在时间开始时执行过渡
transition-timing-function: cubic-bezier(.24,.95,.82,-0.88);
transition-timing-function: steps(2, start);
transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡
transition-delay: 2s;
11.1.2.过渡属性简写
transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟 */
transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);12.动画
12.1.动画
12.2.编写
12.3.平移
12.4.缩放
13.flex布局
13. 1，flex
中文名为弹性盒或者伸缩盒，是css的一种布局手段，主要是代替浮动来完成页面布局；flex可以使元素具有弹性，让元素可以跟页面的大小的改变而改变。设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。在这之前需要知道几个概念：
13.1.1弹性容器：
要使用flex，必须先将一个元素设置成弹性容器，开启弹性容器：
disply：flex;设置块级元素为弹性容器。
display：inline-flex：设置行内元素为弹性容器。
Webkit 内核的浏览器，必须加上-webkit前缀。
disply：-webkit-flex;设置块级元素为弹性容器。
display：-webkit-inline-flex：设置行内元素为弹性容器。
注：容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
主轴：弹性元素的子元素排列方向叫做主轴。
代码：
.box{
display: -webkit-flex; /* Safari */
display: flex;
}13.1.2.弹性元素（弹性项）：
弹性容器的子元素（不是后代元素），一个弹性元素既同时是弹性容器。
13.2,弹性容器的属性。
a,flex-direction：元素的排列方向，同时水平的主轴方向是由该容器属性 flex-direction确定的。元素排列向那主轴就向那边指。
属性：row：元素从main start开始从左向右水平排列;
row-reverse：元素从main star开始，从左向右水平排列开始，元素从右向左水平排列（注意：此时主轴从右边指向左边，也就是说，main start在做右边）。
column：元素从cross start开始从上而下垂直排列;
column-reverse：元素从cross start开始从下而上垂直排列;
b,flex-rawp:设置弹性元素是否在弹性容器中换行。
nowrap:默认值，不换行。
wrap:沿着主轴方向自动换行。
wrap-reverse：沿着主轴的反方向自动换行。
c，flex-flow：flex-direction和 flex-rawp的简写属性，没有顺序要求。
d,justify-content:如何分配空白空间（弹性元素如何排列）
flex-start：默认值，沿着主轴main start排列
flex-end：沿着主轴main end排列
center：弹性元素水平居中排列
space-between：空白分布到等量元素两侧。
space-around：空白分布到等量元素单侧。（实现效果是，弹性元素之间的距离以及两侧弹性元素距离父元素边框距离）
space-between：空白均匀分布到元素之间。
e,align-items
表示元素在侧轴如何对齐
flex-start：沿着cross start（起轴）对齐，不会被拉伸。
flex-end：沿着cross end（终轴）对齐，不会被拉伸。
center：弹性元素垂直居中排列
baseline：沿着基线对齐（用的不多）
stretch：默认值，将元素的长度设置为等同高度，元素高度不够会被拉伸。
f，align-content：
lex-start：默认值，沿着侧轴main start排列
flex-end：沿着侧轴main end排列
center：弹性元素垂直居中排列
space-between：空白分布到等量元素两侧。
space-around：空白分布到等量元素单侧。
space-between：空白均匀分布到元素之间。
13.3，弹性元素的属性：
a,flex-grow:指定弹性元素的伸缩系数（当弹性容器有空间时，弹性元素如何伸缩）
默认值是0，意思是有剩余空间也不进行分配。父元素的剩余空间会按照比例进行分配：例如两个弹性元素分别为1和2，弹性容器剩余空间长度为150px; 按照1:2的比例，一个元素可分得50，另一个元素可分得100.
b,flex-shrink:弹性元素的收缩系数。默认值是1，表示等比例收缩，取为零时，表示弹性元素不收缩。值越大，收缩的就越多。
c，flex-basis：指定的是元素在主轴上的基础长度，一般设置成auto就可以了。
如果主轴是横向的，该值指定的是元素的宽度。
如果主轴是纵向的，该值指定的是元素的高度。
默认为auto，表示参考元素自身的高度和宽度。
如果设置成一个值，就以此值为准。
d,flex:以上三个属性得劲简写，有顺序要求
flex：flex-grow flex-shrink flex-basis;
可选值：none
auto：一般选这个
e,order
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
14.less
css语法在less文件中都可用，但是less中扩充了css语法。
a:后代选择器
.box1{
.box2{
}
}
对比css为：
.box1 .box2{}
d:子类选择器
.box1{
>.box2{
}
}
c,变量：
语法：@变量名：变量值;（变量可以是类名,样式或者id名）
引用：样式使用：@变量名；
类名或者id名：.@{变量名}或#{变量名}
其他的也是@{变量名}
d:&符号：表示父类元素选择器。
.box1{
>.box2{
}
/*$表示.box1*/
${
}
}
e: :extend()(选择器分组)
表示继承其他元素的样式
p2{
height：100px;
}
.p1:extend(p2){
background-color:red;
}
编译成css之后：
.p1,p2{
height：100px;
}
p1{
background-color:red;
}
f：混合函数
定义函数：
.test(){
height：@h;
width:@w;
border:1px solid @b-color;
}
调用函数（样式模板）
.div{
//这种方式必须按顺序穿参数
.test(200px,300px,red);
//指定参数名传值
//.test(@h:200px,@b-color:red,@w:300px);
}
15,响应体布局
响应体布局可以根据窗口的大小来设置不同的样式，想要实现响应体布局，需要通过媒体查询设备的状态。
15.1.媒体查询
使用媒体查询
语法：@media 查询规则{}
查询规则有：
all：所有设备
print：打印设备
screen带屏幕的设备（常用）
speech：屏幕阅读器--可以使用，链接多个媒体类型，变成一个或关系
@media screen，speech{} 可以使用only关键字来规定只要那种媒体规则
media only screen{}使用这个只要是为了兼容一些老版本浏览器，有些老版本的浏览器知道媒体查询但是不能实现，加only只要是在新版本浏览器能用only关键字而老版本不认识，这样老版本浏览器就会忽视媒体查询。
15.2.媒体特征
width：视口宽度
height：视口高度
nim-width：视口最小宽度（视口大于指定宽度时生效）
max-width：视口最大宽度（视口小于指定宽度是生效）
max-height：视口最大高度
nim-height：视口最小高度上面这几个值叫做断点，表示网页在这个点发生样式切换。
常用的断点：
小于768：超小屏幕，
大于768：小屏幕
大于992：大屏幕
<style>
@media only screen and (min-width: 500px) and (max-width: 700px){
body{background-color: red;}
}
</style>
8857
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
