提示：你的眼睛很好看，眼中应倒映着山川湖泊，星辰大海，更应该去看浩瀚无垠的知识，
为天地立心，为生民立命，为往圣继绝学，为万世开太平 （北宋儒学家张载）
文章目录
前言
来吧，学学这该死的CSS，理清它到底是个什么玩意哈哈哈哈，顺便送大家一段话，天空黑暗到一定程度，星辰就会熠熠生辉，请相信你自己也会成为一束光
一、CSS入门
1.CSS样式介绍
CSS样式由一条或多条以分号隔开的样式声明所组成，每条样式声明包含着一个CSS属性和属性值（即：键值对），键值间用冒号隔开，以分号结束
2.元素内嵌样式
<p style="color:red;font-size:30px">这是一段文本</p>//body区
//style 是元素内嵌样式属性（行内样式属性）
//color 是字体颜色属性 ，red是属性值（形成键值对）
//font-size是字体大小属性，30px是属性值（形成键值对）
3.文档内嵌样式
<style type="text/css">//head区
p{
color:blue;
font-size:40px;
}
</style>
<p>这是一段传说</p>//body区
//在文档head区中创建style元素，再通过选择器的方式来调用指定元素并设置CSS样式
4.外部引用样式
是未来我们做项目的时候，用的最多的一种引用方式
style.css：首先新建CSS文件并在其内设置CSS样式
@charset"utf-8";
//首先声明CSS的字符编码为utf-8（若不写，则默认utf-8）
p{
color:green;
font-size:30px;
}
index.html：在html文件中引用css文件
<link rel=“stylesheet” type="text/css" href="style.css">
//rel是关联的意思，关联的是一个样式表(stylesheet)文档，它表示这个link在文档初始化时将被使用,一般这里是不需要改动的
5.如何调用CSS
1）直接链接法
使用link元素在html页面中链接css文件
//html
<link rel="stylesheet" type="text/css" href="style.css">
//style.css
@charset "utf-8";
p{
font-style:italic;//字体风格设置为古意大利斜体
}
2）间接导入法
如果有多个css文件，可以使用@import在另一个已经链接成功的css文件中导入新的文件(性能不如link链接，还是直接链接法更实用)
//style.css
@charset "utf-8";
@import "text.css";
p{
font-style:italic;//字体风格设置为古意大利斜体
}
6.元素的隐含样式
也就浏览器样式，指的是这个元素在这款浏览器中运行时默认附加的样式
<span style="font-weight:bold;">span手动设置加粗</span>
//span:行内标签,组合文档中的行内元素,在行内定义一个区域，也就是一行内可以被<span>划分成好几个区域，从而实现某种特定效果。其实<span>本身没有任何属性，只有当对它应用样式时，它才会产生视觉上的变化。
<b style="font-weight:normal;">去除b元素的隐含样式</b>
//font-weight:设置文本的粗细，以下有几个属性值
//normal:默认值，定义标准的字符
//bold：定义粗体字符
//bolder：定义更粗的字符
//lighter：定义更细的字符
//100~900：400等同于normal，700等同于bold
//inherit：规定应该从父元素继承字体的粗细
7.层叠与优先级
样式表层叠：对一个元素多次用不同方式设置同一个样式
五种样式优先级排序（从低到高）
- 浏览器样式（元素自身携带的隐含样式）
- 外部引用样式（link元素引用）
- 文档内嵌样式（style元素在head区设置）
- 元素内嵌样式（style属性在元素里面设置）
- 强行设置最高优先级（important属性设置）
<style>
b{
color:blue;!important
font-size:50px;!important
font-style:italic;
}
</style>
速记：自<link<head<style<important
- 层叠规则：若不产生样式的冲突，则进行样式的叠加
- 若产生样式的冲突：则已优先级高的样式为准，进行样式的冲突替换；
- 若优先级相同：则以后来定义的样式为准，进行样式id冲突替换
<style>
//id选择器权重最大，最终会显示的背景色
#div {
background: blue;
}
//class选择器权重比ID选择器小，但是比id选择器大，所以background会被覆盖
.div {
font-size: 20px;
background: red;
}
//元素选择器权重最小，所以font-size和background会被覆盖
div {
padding: 10px;
font-size: 14px;
background: red;
}
</style>
8.继承和强制继承
样式继承一般只适用于元素的外观（文字、颜色、字体等），而元素在页面的布局样式，则不会被继承，如果你想强制继承布局样式的话，则必须使用强制继承：inherit（强制继承一般很少使用）
<p style="color:red;">这是一段<b>历程</b>经历</p>
//<b>元素嵌套在<p>元素里，<b>元素就继承了<p>的样式
有趣的问题问有趣的人@你
子元素b为何不继承父元素span的字体颜色样式？
因为子元素已经设置过字体颜色样式，就不会继承父元素span的字体颜色样式了
父元素p加了外边框，但子元素b没有外边框？
方法1：直接在子元素b的文档内嵌样式里写一个和父元素一模一样的布局样式
方法2：在子元素b的文档内嵌样式中写一个强制继承inherit
b{boder:inherit;}
二、基本选择器
也称单一型选择器
| 选择器 | 名称及说明 |
|---|---|
| * | 通用选择器（选择所有元素） |
| type | 元素选择器（选择指定类型的元素） |
| #id | id选择器（选择指定id属性的元素） |
| .class | class选择器（选择指定class属性的元素） |
| [attr]系列 | 属性选择器（选择指定attr属性的元素） |
1.通用选择器
【*】可以匹配到HTML文件中的所有元素
包括：body和html标签，head标签属于页面不可见区域，即使被匹配到了，也显示不出任何效果
html标签和body标签属于页面可见区域，它们都可以被匹配到并显示出效果
*{
boder:1px solid red;
//给元素设置边框：线宽1像素 线型实线 颜色红色
}
2.元素选择器
【type】直接使用元素名作为选择器名，可以匹配到HTML文件中的同一种元素
//html
<p>这是一个段落</p>
//css
p{
color:red;
}
3.ID选择器
【#id】直接使用元素id值作为选择器名，可以匹配到HTML文件中的唯一元素
//html
<b id="abc">这是一个段落</b>
//css
#abc{
color:green;
}
4.类选择器
【.class】类选择器可以匹配到HTML中的同一类元素
//html
<b class="abc">这是一个段落</b>
<span class="abc">这是一个什么都没有</span>
//css
.abc{
color:blue;
}
若使用"元素名.class值"作为类选择器名，则可以使用类选择器锁定到某一类的某一种元素
//html
<b class="abc">这是一个段落</b>
<span class="abc">这是一个什么都没有</span>
//css
p.abc{
color:blue;}
5.属性选择器
【attr】直接使用中括号包括属性名作为选择器名可以匹配到HTML文件中含有某一种属性的元素
//html
<a href="http://www.baidu.com">百度</a>
//css
[href]{
color:red;
}
1）匹配1
匹配时，不但要满足某一属性，还要满足指定属性值
//html
<a href="http://www.baidu.com">百度</a>
<a href="http://www.163.com">网易</a>
//css
[href="http://www.baidu.com"]{
font-size:30px;
}
2）匹配2
匹配时，不但要满足某一属性，还要满足其属性值由指定字符开头^
//html
<input type="text">
<input type="password">
//css
[type^="pass"]{
border:1px solid red;
}
3）匹配3
匹配时，不但要满足某一属性，还要满足其属性值由指定字符结尾$
//html
<input type="text">
<input type="password">
//css
[type$="xt"]{
background:red;
}
4）匹配4
匹配时，不但要满足某一属性，还要满足其属性值包含指定字符*
//html
<a href="http://www.baidu.com">百度</a>
<a href="http://www.163.com">网易</a>
//css
[href *="baidu"]{
background:yellow;
}
5）匹配5
匹配时，不但要满足某一属性，属性值具有多个值且用多个值且用空格隔开时，还要满足其中一个属性值~
//html
<b class="abc def">这是一个段落</b>
<span class="abc">这是一个什么都没有</span>
//css
[class~="def"]{
color:red
}
6）匹配6
匹配时，不但要满足某一属性，属性值具有多个值且用多个值且用减号隔开时，还要满足其中一个属性值
//html
< i lang="ec-us">HTML5</i>
//css
[lang]="en"{
color:red;
}
三、复合选择器
将基本选择器的很多功能进行组合，形成新的特定匹配
| 选择器 | 名称及说明 |
|---|---|
| s1,s2,s3 | 分组选择器（选择多个选择器的元素） |
| s1,s2 | 后代选择器（选择指定选择器的后代元素） |
| s1>s2 | 子选择器（选择指定选择器的子元素） |
| s1+s2 | 相邻兄弟选择器（选择指定选择器相邻的元素） |
| s1~s2 | 普通兄弟择器（选择指定选择器后面的元素） |
1.三种层次
//祖先、后代、兄弟
<body>
<b id="1">这是一个加粗</b>
//b1
<p >这是<b id="2">一个</b>段落</p>
//b2<p
<b id="3">这是另一个加粗</b>
//b3
<span>这是<i><b id="4">一个</b></i>什么都没有</span>
//b4<span
<b id="5">这是第三个加粗</b>
//b5
</body>
祖先与后代关系：body是祖先父元素
b1,p,b3,span,b5都是body的后代子元素
兄弟关系：b1,p,b3,span,b5
相邻兄弟关系：b1&p - p&b3 - b3&span - span&b5
普通兄弟关系：b1&b5 - b1&b3 -b1&span -p&span - p&b5 - b3&b5
祖先与后代：p是祖先父元素，b2是p的后代子元素
祖先与后代：span是祖先元素；i是后代子元素，b4是后代孙元素
2.分组选择器
【,】将多个选择器通过逗号分割的方式进行混合使用，可以匹配多个元素。(不但可以把某一类基本选择器进行分组，还可以把类选择器、ID选择器、元素选择器、属性选择器等多种不同类型的基本选择则其进行混合分组)
//css1
p,b,span{
color:red;
}
//css2
.abc,#def,span,[href]{
background:yellow;
}
3.后代选择器
【】将两个基本选择器通过空格分割的方式进行混合使用，可匹配某元素的后代元素（后代元素可以是儿子，也可以是孙子，与层次深度无关），也可以混合使用类选择器、ID选择器、元素选择器、属性选择器
//html
<p>这是<b>一个</b>段落</p>
<p>这是<span><b>另一个</b></span>段落</p>
//css
p b{
color:red;
//选择p元素内部所有后代元素b，而不在乎b的层次深度
}
4.子选择器
【>】将两个基本选择器通过大于号分割的方式进行混合使用，可匹配某元素的后代子元素（子元素只能是儿子，不能是孙子，与层次深度有关）
//html
<p>这是<b>一个</b>段落</p>
<p>这是<span><b>另一个</b></span>段落</p>
//css
p>b{
color:red;
//选择p元素下一层元素b，而不能选择下下一层b元素
}
5.相邻兄弟选择器
【+】将两个基本选择器通过加号分割的方式进行混合使用，可匹配某元素下方紧挨着它的相邻兄弟元素（二者具有相同父元素）
//html
<b id="abc">这是一个加粗</b>
<p>这是<b>一个</b>段落</p>
<b >这是另一个加粗</b>
//css1
p+b{
color:red;
//选择与p相邻且与它是兄弟关系的b元素
}
//css2
ul>li+li{
background:red;
//选择ul元素的子元素li是相邻兄弟关系的li元素
}
6.普通兄弟选择器
【~】将两个基本选择器通过波浪号分割的方式进行混合使用，可匹配某元素下方任意的兄弟元素（大家具有相同父元素）
//html
<b id="abc">这是一个加粗</b>
<p>这是<b>一个</b>段落</p>
<b >这是另一个加粗</b>
<span>这是<b>我</b>呀</span>
//css
p~b{
font-size:30px;
}
四、伪元素选择器
细分为为伪元素选择器和伪类选择器
| 选择器 | 名称及说明 |
|---|---|
| ::first-line | 伪元素选择器（选择块级元素文本的首行） |
| ::first-letter | 伪元素选择器（选择块级元素文本的首字母） |
| ::before | 伪元素选择器（选择元素之前插入内容） |
| ::after | 伪元素选择器（选择元素之后插入内容） |
1.选定块级首行
【::first-line】块级元素首行文本被选定，如果想限定某种元素，还可以在两冒号前加上元素名
//css1
::first-line{
color:red;
//开头的首行变成了红色
}
//css2
p::first-line{
color:green;
//块级元素p的首行变成了红色
}
2.选定块级首字母
【::first-letter】块级元素首行字符被选定，如果想限定某种元素，还可以在两冒号前加上元素名
//css1
::first-letter{
color:red;
//开头的首字母变成了红色
}
//css2
p::first-letter{
color:green;
//块级元素p的首字母变成了绿色
}
//css3
span::first-letter{
color:green;
//块级元素span的首字母没有任何变化，因为span是行内元素，本身是不会变色的
}
3.文本前插入
【before】在文本前插入内容
a::before{
content:'点击';
}
4.文本后插入
【after】在文本后插入内容
a::after{
content:'搜索';
}
五、结构性伪类选择器
| 选择器 | 名称及说明 |
|---|---|
| :root | 根元素选择器（选择文档中的根元素） |
| :first-child | 子元素选择器（第一个子元素） |
| :last-child | 子元素选择器（最后一个子元素） |
| :only-child | 子元素选择器（唯一子元素） |
| :only-of-type | 子元素选择器（特定类型的唯一子元素） |
| :nth-chlid(n) | 子元素选择器（第n个子元素） |
1.根元素选择器
【:root】用来匹配HTML文档中的根元素html
:root{
border:1px solid red;
//线宽 1像素 线型 实线 颜色 红色
//可匹配到html文档中的根元素，即html元素
}
2.子元素选择器
【>】带结构性伪类的子元素，可匹配直接包含在其他元素中的单个元素
1）第一个
子元素选择器
ul>li{
color:red;
//子元素选择器:可匹配到父元素ul的每一个li子元素
}
后代元素选择器
ul li:first-child{
color:red;
//带结构性伪类的后代元素选择器:可匹配到元素ul后代中的第一个li子元素
}
元素选择器
li:first-child{
color:red;
//带结构性伪类的元素选择器:可匹配到html中所有元素内部的第一个li子元素
}
无前置选择器
:first-child{
color:red;
//无前置选择器的结构性伪类:可匹配到html文档中的所有元素
//伪类都需要加上前置选择器来限制它的范围，否则将无法做精准匹配
}
ul>li:first-child{
color:red;
//带结构性伪类的子元素选择器:可匹配到父元素ul的第一个li子元素
}
2）最后一个
ul>li:last-child{
color:red;
}
//带结构性伪类的子元素选择器:选择最后一个子元素
3）唯一一个
ul>li:only-child{
color:red;
}
//带结构性伪类的子元素选择器:选择只有唯一子元素的那个子元素
//父元素中有且只有一个子元素，即为独生子元素
4）某一类型
div>p:only-of-type{
color:red;
}
//带结构性伪类的子元素选择器:选择具有特点类型的唯一子元素
//父元素中含有若干子元素，但某一类型的子元素有且只有一个
3.第n个子元素
【:nth-chlid(n)】可匹配直接包含在其他元素中的第n个子元素
ul>li:nth-child(2){
color:red;
//带结构性伪类的子元素选择器:选择子元素的第二个元素
}
ul>li:nth-last-child(2){
color:red;
//带结构性伪类的子元素选择器:选择子元素的倒数第二个元素
}
div>p:nth-of-type(2){
color:red;
//带结构性伪类的子元素选择器:选择特定子元素的第二个元素
}
div>p:nth-last-of-type(2){
color:red;
//带结构性伪类的子元素选择器:选择特定子元素的倒数第二个元素
}
六、UI伪类选择器
UI伪类选择器前置冒号，能够根据元素在文档中的状态匹配元素，主要用于匹配input表单控件
| 选择器 | 名称及说明 |
|---|---|
| :enabled | UI选择器（选择启用状态的元素） |
| :disabled | UI选择器（选择禁用状态的元素） |
| :checked | UI选择器（选择被选中input勾选元素） |
| :default | UI选择器（选择默认元素） |
| :valid | UI选择器（验证有效选择input元素） |
| :invalid | UI选择器（验证无效选择input元素） |
| :required | UI选择器（有required属性选择元素） |
| :optional | UI选择器（无required属性选择元素） |
1.启用状态
【:enabled】可根据元素是否处于启用状态来匹配html文档中的元素
:enabled{
border:1px solid red;
}
2.禁用状态
【:disabled】可根据元素是否处于禁用状态来匹配html中的元素
:disabled{
border:1px solid red;
//文本框是禁用状态，边框变为红色
}
3.勾选状态
【:checked】可根据元素是否处于勾选状态来匹配html中的元素（只用于input单选框和复选框）
:checked{
display:none;//设置为隐藏效果
//UI伪类选择器:可匹配到html文档中处于勾选状态的表单元素
}
4.默认状态
【:default】可根据元素是否处于默认值状态来匹配html文档中的元素（常用于从一组类似的元素中选择默认元素）
一组单选或复选框中，设置为checked已勾选状态的input元素即为默认状态
:default{
diaplay:none;//设置为隐藏效果
//UI伪类选择器:可匹配到html文档中处于勾选状态的表单元素
}
5.输入验证合法
【:valid】可根据元素输入验证时是否处于合法状态来匹配html文档中的元素
:valid{
border:1px solid green;
//文本框输入合法，边框变为绿色
}
6.输入验证不合法
【:invalid】可根据元素输入验证时是否处于不合法状态来匹配html中的元素
:valid{
border:1px solid blue;
//邮箱框输入不合法，边框仍为蓝色
}
7.必填状态
【:required】可根据元素输入验证时是否处于必填状态来匹配html中的元素
:required{
border:1px solid red;
}
8.非必填状态
【:optional】可根据元素输入验证时是否处于非必填状态来匹配html中的元素
:otional{
border:1px solid red;
}
七、动态伪类选择器
| 选择器 | 名称及说明 |
|---|---|
| :link | 动态选择器（未访问的超链接元素） |
| :visited | 动态选择器（已访问的超链接元素） |
| :hover | 动态选择器（悬停在超链接上的元素） |
| :active | 动态选择器（激活超链接上的元素） |
| :foucs | 动态选择器（获取焦点的元素） |
1.鼠标未点击
【:link】对鼠标未点击访问过的超链接设置样式
a:link{
color:redl
}
2.鼠标已点击
【:visited】对鼠标已点击访问过的超链接设置样式
a:visited{
color:orange;
}
3.鼠标悬停
【:hover】可对鼠标悬停在超链接上设置样式
a:hover{
color:blue;
}
4.鼠标按住
【:active】可对鼠标按在超链接上不放时设置样式
a:active{
color:blue;
}
5.鼠标获取焦点
【:focus】可对鼠标获取焦点时进行样式设置
a:focus{
border:1px solid red;
}
八、其它伪类选择器
| 选择器 | 名称及说明 |
|---|---|
| :not | 其它选择器（否定选择的元素） |
| :empty | 其它选择器（选择没有任何内容的元素） |
| :lang | 其它选择器（选取包含lang属性的元素） |
| :target | 其它选择器（选取URL片段标识指向元素） |
1.not选择器
【:not()】也称否定选择器或反选择器，能够匹配与括号中所写情况正好相反的元素
a:not([href*="baidu"]){
color:red;
}
2.empty选择器
【:empty】也称空内容选择器，能够匹配没有添加任何内容的元素
:empty{
display:none;
//空内容不等同于空元素
//本身不能添加任何内容的元素被称为“空元素”
//空元素:<br> <hr> <input> <img> <link> <meta>
}
九、CSS颜色与度量单位
1.CSS颜色
| 英文颜色值(含义) | 十六进制颜色值(十进制颜色值) |
|---|---|
| black(黑色) | #000000(0,0,0) |
| silver (银灰色) | #c0c0c0(192,192,192) |
| gray(灰色) | #808080(128,128,128) |
| white(白色) | #ffffff(255,255,255) |
| maroon(栗色) | #800000(128,0,0) |
| red(红色) | #ff0000(255,0,0) |
| purple(紫色) | #800080(128,0,128) |
| fuchsia(紫红) | #ff00ff(255,0,255) |
| green(绿色) | #008000(0,128,0) |
| lime(闪光绿) | #00ff00(0,255,0) |
| olive(橄榄色) | #808000(128,128,0) |
| yellow(黄色) | #ffff00(255,255,0) |
| navy(海军蓝) | #000080(0,0,128) |
| blue(蓝色) | #0000ff(0,0,255) |
| teal(水鸭色) | #008080(0,128,128) |
| aqua(浅绿色) | #00ffff(0,255,255) |
十六进制颜色值可以进行缩写
#ff0000-------->#f00
2.十进制颜色值方案
十进制表示方法比较多样化，主要RGB模型和HSL模型
| 函数 | 说明及示例 |
|---|---|
| rgb(r,g,b) | 用rgb(红、绿、蓝)模型表示颜色 rgb(0,128,128) |
| rgba(r,g,b,a) | 用rgb(红、绿、蓝、透明度)模型表示颜色 rgb(0,128,128,0.5) |
| hsl(h,s,l) | 用HSL(色相、饱和度、亮度)模型表示颜色 hsl(120,100%,30%) |
| hsla(h,s,l,a) | 用HSL(色相、饱和度、亮度、透明度)模型表示颜色 hsla(120,100%,30%,0.5) |
a表示透明度在0~1之间
1）rgb(红+绿+蓝)
//css1
@charset "utf-8";
p{
color:rgb(255,0,0)
//红色
}
//css2
@charset "utf-8";
b{
color:rgba(255,0,0,0.5)
//红色，透明度为50%
}
2）hsl(色相+饱和度+透明度)
//css1
@charset "utf-8";
p{
color:hsl(120,100%,30%)
//绿色
}
//css2
@charset "utf-8";
b{
color:hsla(120,100%,30%,0.5)
//绿色且透明度为20%
}
3.度量单位
1）绝对长度单位
现实世界的度量单位，CSS支持五种绝对长度单位
| 单位标识符 | 说明 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 磅 |
| pc | 秒差距 |
2）相对长度单位
依托其它类型的单位，CSS支持五种相对长度单位
| 单位标识符 | 说明 |
|---|---|
| em | 与元素字号挂钩（根据字号来改变大小） |
| ex | 与元素字体的“x高度”挂钩 |
| rem | 与根元素的字号挂钩 |
| px | 像素，与分辨率挂钩 |
| % | 百分比，相对于另一值的百分比 |
十、CSS文本样式1
font-size 设置字体的大小
xx-small：设置最小号字体
x-small：设置更小号字体
small：设置小号字体
medium：设置中等字体
large：设置大号字体
x-large：设置更大号字体
xx-large：设置最小号字体
font-variant 设置英文字体是否转换为小型大写
normal：所有小型大写字母全部恢复成与汉字等高的大型小写字母
small-caps：所有的大型小写字母全部转换成比汉字略矮一点的小型大写字母
font-style 设置字体是否倾斜
italic：表示(使用语言包中)斜体字
oblique：表示让文字倾斜（在语言包中没有斜体字时使用）
normal：默认值，表示让倾斜状态恢复到正常状态
font-weight 设置字体是否加粗
bold：粗体
bolder：更粗的字体（在浏览器上无表现）
lighter：更细的字体
normal：默认值，让加粗的字体到正常
100~900：600及之后为加粗
font-family 设置font字体
font 设置字体样式复合写法
[是否倾斜 是否加粗 是否转大型小写 字体大小 字体名称]
@font-face 设置web字体
| 属性值 | 说明 |
|---|---|
| 数字+px | 使用像素单位精确设置固定字体大小 |
| small，large | 非精确设置更小或更大 |
| 数字+% | 使用百分比单位精确设置字体相对于父元素字体的百分比大小 |
| smaller，larger | 非精确设置字体相对于父元素字体的更小或更大值 |
十一、CSS文本样式2
text-decoration 装饰文本出现各种划线
underline：让文本的底部出现一条下划线
overline：让文本的顶部出现一条上划线
line-through：让文本的中部出现一条删除划线
blink：让文本进行闪烁（基本都不支持）
none：让本身具有划线装饰的文本取消
text-transform 将英文文本转换大小写
capitalize：将英文单词首字母大写
uppercase：将英文转换为大写字母
lowercase：将英文转换为小写字母
none：将已被转换大写或小写的值恢复到最初的状态
text-shadow 给文本添加阴影
[水平偏移 垂直偏移 模糊度 阴影颜色]
text-align 设置文本对齐方式
left：设置文本水平左对齐
right：设置文本右对齐
center：设置文本居中对齐
justify：设置文本两端对齐
white-space 设置文本中空白格的处理方式
normal：空白符被压缩为1个，文本排满时只能做自动换行（默认）
nowrap：空白符被压缩为1个，文本不能做任何换行
pre：空白符被全部保留，文本只能强制换行
letter-spacing 设置文本中字符的间距（每个字母之间的距离）
word-spacing 设置文本中英文单词的间距（每个单词之间距离）
line-height 设置文本中段落间距（行高）
word-wrap 控制段词
normal：不断开过长的英文单词（默认值）
break-word：断开单词
text-indent 设置文本中段落首行缩进
十二、CSS+Div布局
在CSS样式中，将盒子模型的内边距、边框和外边距，按top、bottom、left、right的四个方向，分别进行定义和设置，描述盒子的属性
content（内容）、padding（内边距或填充）
border（边框）、margin（外边距）
1.position属性
为什么要提出position指定元素的定位类型？
作用就是决定元素在文档中的定位方式，虽然元素可以使用top、bottom、left、right定位，但是这些属性无法工作
1） static静态定位(默认值)
即没有定位，遵循正常的文档流现象，不会受到top、bottom、left、right的影响
2） relative相对定位
没有脱离文档流，相对于自身在常规流的位置进行偏移定位
3） absolute绝对定位
脱离文档流，相对于离自身最近的定位祖先元素的位置进行偏移定位
4）fixed固定定位(窗口)
脱离文档流，相对于浏览器窗口进行偏移定位，即使窗口是滚动的它也不会移动，像一个不能移动的悬浮窗
5） sticky粘性定位
- 当top、bottom、left、right都不设置具体值，sticky不会生效，其效果与static一致
- 当top、bottom、left、right至少设置一个具体值时，元素具备两种状态（相对定位、固定定位）
以top:100px为例：当元素相对于窗口顶部大于100px，元素处于类似relative相对定位状态；
一旦元素相对于窗口顶部的距离小于或等于100px，元素立马切换到类似fixed固定定位状态
2.float属性
- float:left;
控制网页元素向左浮动 - float:right;
控制网页元素向右浮动 - float:none;
没有浮动 - clear:left;
清除向左浮动 - clear:right;
清除向右浮动 - clear:none;
没有清除
总结
欲穷千里目，更上一层楼，小伙伴们通过本章的学习是否更了解CSS了呢>-<求点赞，求分享，求关注，嘿嘿
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
