CSS总纲
其实一个静态网页他有很多层次，而我们所能看见的仅仅只是表面的那一层，而css（Cascading Style Sheets）是层叠样式表，所谓层叠，可以将整个网页想象成一层一层的结构，层次高的将会覆盖层次低的，而css就可以分别为网页的各个层次设置样式。
我们使用插件可以看到网页的3d效果，如图所示我们可以清晰的看到一个网页不仅仅只有一层，我们看到的只是表象，好处在于将内容展示和样式控制分离，解耦合，让分工协作更容易
CSS分为根据位置的变化分为三种样式表
内联样式
在标签内部用style添加属性，修改样式，耦合太高，不推荐使用
代码如下：
<div style="color:red;">hello css</div>
内部样式
在head标签内，定义style标签，style标签的标签体内容就是css代码，提高复用，但有多个页面共享样式的局限性
代码如下：
<style>
div{
color:blue;
}
</style>外部样式
使用link和@import引入外部样式，页面只要引入都可以使用，极大提高复用性，是样式和结构完全分离，推荐使用
代码如下：
a.css文件：
div{
color:green;
}<link rel="stylesheet" href="css/a.css"> //这一段的意思是引入css/a.css这个文件作为style样式表
<div>hello css</div>
<div>hello css</div>
也可以不写link，采用@import引入，写法如下：
在head标签内写入：
<style>
@import "css/a.css";
</style>
CSS语法
1.选择器：通过选择器选中页面中指定内容，将声明块中的样式应用到选择器对应的元素上
2.声明块：声明块紧跟在选择器后面，使用{}括起来，声明块中实际就是一组一组的键值对结构，这每一组的键值我们称为声明
具体选择器格式：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
...
}
三种基本选择器
标签（元素）选择器，id选择器（唯一），类选择器
1.标签选择器：选择具有相同标签名称的元素
语法： 标签名称{css样式}
2.Id选择器：每个元素的id唯一，所以id一般只使用在一个地方，通常跟js配合使用
语法：#id属性值{}
3.类选择器：选择具有相同的class属性值的元素
语法：.class属性值{}
有相同属性的选择器优先级：内联样式>ID选择器 > 类选择器 > 标签选择器
不过我们可以在属性后面加入!important使此选择器的优先级最高，例如：
.content{
height:80px;
background:#ffff00 !important;
}
这样设置就让类选择器的背景色属性优先级达到最高
扩展选择器：
1. 选择页面所有元素：
* 语法： *{}
2. 并集选择器：两个选择器有相同样式
* 选择器1,选择器2{}
3. 后代选择器：筛选选择器1元素下的选择器2元素（选择器2不一定是1的直接后代）
* 语法： 选择器1 选择器2{}
4. 子选择器：筛选选择器2的父元素选择器1（选择器2一定是选择器1的直接后代儿子）
* 语法： 选择器1 > 选择器2{}
5. 属性选择器：选择元素名称，属性名=属性值的元素
* 语法： 元素名称[属性名="属性值"]{}
6. 伪类选择器：选择一些元素具有的状态
* 语法： 元素:状态{}
* 如： <a>
* 状态：
* link：初始化的状态
* hover：鼠标悬浮状态
* active：正在访问状态
* visited：被访问过的状态
内联元素和块元素和行内块元素
概念：（元素就是标签）
块元素
独占一整行的元素就叫做块元素
（例子：div就是一个块元素，她没有任何语义，就是一个纯粹的块元素，不会为它里面的元素设置任何的默认样式，主要作用是用于页面布局，像p,h1这些块元素则有设置默认的样式）
块元素会把整行占满,设置了高度和宽度都有效果,如果不设置高度和宽度,宽度会默认为100%,高度会随内容填充
内联元素（行内元素）
只占用自身大小的元素，不会独占一整行
常见的内联元素:a,iframe,span
Span标签也没有任何语义，，span标签专门用来选中内容，为内容设置样式
两者分工：块元素主攻布局，内联元素主攻选中内容样式，一般只会块包含内联，不会内联包含块
元素不会把整行占满,设置了高度和宽度都无效,高度和宽度只会随内容填充
行内块元素
元素不会把整行占满,设置了高度和宽度也都有效果,如果不设置高度和宽度,随内容填充
想实现行内块需要用到display属性
display: 改变元素的性质
block 将元素转换成块元素
inline 将元素转换成行元素
inline-block 将元素转换成行内块
none 将元素隐藏并脱离文档流
特殊情况介绍：
a元素可以包含任何元素，让包含的整块内容变成超链接，除了她本身
p元素不能包含其他任何块元素
元素之间的关系
元素之间的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
后代元素选择器
* - 作用：
* - 选中指定元素的指定后代元素
* - 语法：
* 祖先元素 后代元素{}
子元素选择器
* - 作用：
* - 选中指定父元素的指定子元素
* - 语法：
* 父元素 > 子元素{}
Css长度单位
像素 px
像素是我们在网页中使用的最多的一个单位， 一个像素就相当于我们屏幕中的一个小点， 我们的屏幕实际上就是由这些像素点构成的，但是这些像素点，是不能直接看见。不同显示器一个像素的大小也不相同， 显示效果越好越清晰，像素就越小，反之像素越大。分辨率就是指多少个像素点，分辨率越高代表着屏幕越清晰
百分比 %
也可以将单位设置为一个百分比的形式，这样浏览器将会根据其父元素的样式来计算该值 使用百分比的好处是，当父元素的属性值发生变化时， 子元素也会按照比例发生改变 在我们创建一个自适应的页面时，经常使用百分比作为单位
em
em和百分比类似，它是相对于当前元素的父元素的字体大小来计算的 ，1em = 10font-size （当父元素font-size设置为10px时，则1em就为10px，如果是2em就是20px），使用em时，当父元素字体大小发生改变时，em也会随之改变
rem单位
1rem = html元素设置的font-size,如果html没设置font-size属性，则默认是16px
vh和vw
vh:参照屏幕高度的百分比
vw:参照屏幕宽度的百分比
相当于%改变了参照物，参照物这时候为屏幕，而不是父元素了
如果设置100vh相当于设置了一个屏幕的高度，50vh相当于设置了半个屏幕的高度。vw类似
Css颜色单位
在CSS可以直接使用颜色的单词来表示不同的颜色
红色：red
绿色：green
蓝色：blue
也可以使用RGB值来表示不同的颜色
- 所谓的RGB值指的是通过Red Green Blue三元色，
通过这三种颜色的不同的浓度，来表示出不同的颜色
- 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);
- 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有
- 浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字
使用百分数最终也会转换为0-255之间的数
0%表示0
100%表示255
也可以使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样，
只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色
每组表示一个颜色,第一组表示红色的浓度，范围00-ff
第二组表示绿色的浓度，范围是00-ff
第三组表示蓝色的浓度，范围00-ff
语法：#红色绿色蓝色
十六进制：
0 1 2 3 4 5 6 7 8 9 a b c d e f
00 - ff
00表示没有，相当于rgb中的0
ff表示最大，相当于rgb中255
红色：
#ff0000
像这种两位两位重复的颜色，可以简写
比如：#ff0000 可以写成 #f00
#abc #aabbcc
使用rgb颜色小技巧：使用qq截图工具，当鼠标放在某处时，下方会显示此种颜色的rgb，所以以后想用什么颜色直接使用这种方法即可
盒子模型(外边距，边框，内边距，内容)
网页中的每一个元素都是一个盒子，每一个网页都是由一个个盒子组成的
盒子模型包括四个部分：
1：内容：就是图中的content部分，可以设置宽高
2：内边距 ：就是内容到边框的距离 （padding）
3：边框：就是盒子的边，可以设置厚度大小(border)
4.：外边距：这个盒子离其他盒子的距离，可以理解为这个div设置的多少外边距可以放下一个div（margin）
（记住：如果我们想要让我们的body顶着浏览器左上角，完全重合的话，必须设置body的外边距也就是margin为0，这时候我们可以想象body就是一个巨大的盒子，它的外边距就是它离浏览器的距离）
内容区
使用width来设置盒子内容区的宽度内容区：
使用height来设置盒子内容区的高度
width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，
盒子可见框的大小由内容区，内边距和边框共同决定
外边距
外边距指的是当前盒子与其他盒子之间的距离，
他不会影响可见框的大小，而是会影响到盒子的位置。
margin:外边距
1个值：上下左右四个边距等值
2个值：上下 左右
4个值：上 右 下 左（顺时针）
盒子有四个方向的外边距：
margin-top：盒子上边框和其他的盒子的距离
margin-right：盒子右边框和其他的盒子的距离
margin-bottom：盒子下边框和其他的盒子的距离
margin-left：盒子左边框和其他的盒子的距离
由于页面中的元素都是靠左靠上摆放的，
所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，
而如果是设置右和下外边距会改变其他盒子的位置（其实外边距就相当于扩大了元素实际占页面的大小，类似于孙悟空画的那个圈，虽然里面只有一个唐僧，那些多余的部分没有放东西，但是你需要跟我保持一个距离），外边距也可以指定为一个负值，如果外边距设置的是负值，则元素会向反方向移动（反方向指的是正值向右向下，则负值向左向上）
margin还可以设置为auto，auto一般只设置给水平方向的margin
如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值，垂直方向外边距如果设置为auto，则外边距默认就是0
如果将margin-left和margin-right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
以使子元素在父元素中水平居中，简单写法就是margin:0 auto;
边框
为元素设置边框
要为一个元素设置边框必须指定三个样式
border-width:边框的宽度
border-color:边框颜色
border-style:边框的样式
例如:border: 10px solid #000000
也可以单独设置上右下做的边框宽度：
border-top,border-left,border-right,border-bottom
边框的宽度
使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值，
则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的
如果指定三个值，
则三个值会分别设置给 上 左右 下
如果指定两个值，
则两个值会分别设置给 上下 左右
如果指定一个值，则四边全都是该值
除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度
设置边框的颜色
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
border-xxx-color
边框的样式
设置边框的样式
border样式可选值：
none，默认值，没有边框
solid 实线
dotted 虚线（点状）
dashed 虚线（长方体）
double 双线
inset 凹陷感
outset 凸起感
style也可以分别指定四个边的边框样式，规则和width一致，
同时它也提供border-xxx-style四个样式，来分别设置四个边
大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none（也就是说只要我们指定出了boder-style属性，那么浏览器会默认加上他的宽度和颜色默认值，就有了边框）
内边距
内边距（padding），指的是盒子的内容区与盒子边框之间的距离
padding:内边距
1个值：上下左右四个边距等值
2个值：上下 左右
4个值：上 右 下 左（顺时针）
一共有四个方向的内边距，可以通过：
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距
来设置四个方向的内边距
内边距会影响盒子的可见框的大小
盒子的大小由内容区、内边距和边框共同决定
盒子的宽度 = border-left-width + padding-left + width + padding-right + border-right-width
盒子的高度 = border-top-width + padding-top + height + padding-bottom + border-bottom-width
我们绘制图形默认padding跟border是在width和height之外绘制的，如果我们想要padding跟border的大小算在width和height之内，需要加一个属性box-sizing: border-box;
Display和visibility
开发中有时候我们需要将内联元素与块元素之间能相互转换
将一个内联元素变成块元素，
通过display样式可以修改元素的类型
可选值：
inline：可以将一个元素作为内联元素显示
block: 可以将一个元素设置块元素显示
inline-block：将一个元素转换为行内块元素
- 可以使一个元素既有块元素的特点又有行内元素的特点
既可以设置宽高，又不会独占一行
none: 不显示元素，并且元素不会在页面中继续占有位置
关于不显示元素，另外一个属性visibility也能做到，但是两者还是有区别
visibility
- 可以用来设置元素的隐藏和显示的状态
- 可选值：
visible 默认值，元素默认会在页面显示
hidden 元素会隐藏不显示
使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持
Overflow属性（处理溢出内容）
子元素默认是存在于父元素的内容区中，
理论上讲子元素的最大可以等于父元素内容区大小
如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我们称为溢出的内容
父元素默认是将溢出内容，在父元素外边显示，
通过overflow可以设置父元素如何处理溢出内容：
可选值：
- visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示
- hidden, 溢出的内容，会被修剪，不会显示
- scroll, 会为父元素添加滚动条，通过拖动滚动条来查看完整内容
- 该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条
- auto，会根据需求自动添加滚动条，
需要水平就添加水平
需要垂直就添加垂直
都不需要就都不加
文档流
文档流
文档流处在网页的最底层，它表示的是一个页面中的位置，
我们所创建的元素默认都处在文档流中（类似于盖房子的地基）
元素在文档流中的特点
块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列。
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则换到下一行，
继续自左向右。
2.在文档流中，内联元素的宽度和高度默认都被内容撑开
正常文档流的官方定义：将窗体自上而下分成一行一行，块元素独占一行，相邻行内元素在每行中按从左到右地依次排列元素。
什么叫脱离正常文档流？
脱离文档流是相对正常文档流而言的。正常文档流就是我们没有用CSS样式去控制的HTML文档结构，你写的界面的顺序就是自然网页展示的顺序，而在CSS布局中，我们可以使用浮动或者定位这两种技术来实现，脱离正常文档流，当脱离文档流后，那么脱离文档流元素不会占用原来的底层位置，会漂浮起来，正常文档流页面就相当于盖房子的地基，而脱离文档流相当于我们设计的页面布局放到了二层三层楼等地方，而我们看页面是俯看的，所以先看到的是二三层的位置，也就是脱离文档流的布局
浮动（float）
块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，
如果希望块元素在页面中水平排列，可以使块元素脱离文档流
使用float来使元素浮动，从而脱离文档流
可选值：
none，默认值，元素默认在文档流中排列
left，元素会立即脱离文档流，向页面的左侧浮动
right，元素会立即脱离文档流，向页面的右侧浮动
当为一个元素设置浮动以后（float属性是一个非none的值），
元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
元素浮动以后，会尽量向页面的左上或这是右上漂浮
清除浮动
我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能，但是只能是清除兄弟元素间的影响
clear可以用来清除其他浮动元素对当前元素的影响
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
等同于清除对他影响最大的那个元素的浮动
清除浮动以后，元素会回到其他元素浮动之前的位置
定位（相对定位和绝对定位）
定位：
- 定位指的就是将指定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素
- 通过position属性来设置元素的定位
-可选值：
static：默认值，元素没有开启定位（元素处于正常的文档流中）
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
相对定位
当元素的position属性设置为relative时，则开启了元素的相对定位
1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
2.相对定位是相对于元素在文档流中自身原来的位置（top和left为0的位置）进行定位
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级，换句话说就是比文档流（最底层）高一个层级
5.相对定位不会改变元素的性质，块还是块，内联还是内联
当开启了元素的定位（position属性值是一个非static的值）时，
可以通过left right top bottom四个属性来设置元素的偏移量
left：元素相对于其定位位置（原来的位置）的左侧偏移量
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上边的偏移量
bottom：元素相对于其定位位置下边的偏移量
(相对定位我们可以将元素本身位置的某个角当做原点，之后设置left,top属性是往右往下)
relative：相对元素还是在这个文档（dom）内，使用相对定位时，无论盒子是否进行移动，元素（盒子）仍然占据原来的空间，别的盒子不会自动填充这块区域，相对定位设置top,bottom,left,right 等属性是相对于它的起始位置来设定
官方说法：相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
绝对定位
当position属性值设置为absolute时，则开启了元素的绝对定位
绝对定位：
1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的开启了定位（只要position属性不是默认值static就算开启了定位）的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口（body）进行定位
4.绝对定位会使元素提升一个层级
5.绝对定位会使内联元素变成块元素，块元素的宽度和高度默认都被内容撑开
6.如果我们想测试绝对定位原位置在哪，我们可以将绝对定位元素left与top都设为0，这样我们就能知道这个元素相对于哪里进行定位了
固定定位fixed
当元素的position属性设置fixed时，则开启了元素的固定定位
固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
不同的是：
固定定位永远都会相对于浏览器窗口左上角进行定位
固定定位会固定相对于浏览器窗口的某个位置，不会随滚动条滚动，假如一个div在左上角，那么它就一直在左上角（比如一些广告，客服窗口就是固定定位）
（当本身浏览器窗口大小无法满足所设置的分辨率的时候就会出现滚动条，换句话说就是桌面所设置的分辨率小于我们页面所设置body 的宽和高时就会出现滚动条）
absolute:让盒子从文档中脱离出来，漂浮到空中，原本的位置会被其他的盒子自动填充，绝对定位的元素位置是相对于他的父元素的左上角位置决定的，前提是它的父元素（盒子）使用的是绝对或者相对定位，不能是static，如果没有父元素，则参考的是body左上角位置设定top和left值做定位
（官方说法：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body），绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的覆盖顺序）
元素的层级
如果定位元素的层级是一样，则下边的元素会盖住上边的（结构上来说，也就是说下面的div会盖住上面的一个div）
通过z-index属性可以用来设置元素的层级（xy轴表示水平方向，而z表示垂直方向，可以想象成第几层楼，高层肯定优先显示）
可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，可以把正常文档流里面的元素的层级想象为0
z-index值越大，层级越高，越优先显示
对于没有开启定位的元素不能使用z-index
父元素的层级再高，也不会盖住子元素（因为正常显示的时候子元素是在显示在父元素上面的，两个同时设置了层级且父元素层级比子元素高时我们可以理解为子元素是在父元素层级的基础上再增高，比如父：z-index:10 子：z-index:5，那么我们可以理解为子元素的真实层级为15）
层级总结三条特点：
- 下面元素盖上面元素
- 层级高的盖住层级低的
- 父元素盖不住子元素
浏览器的默认样式
浏览器为了在页面中没有样式时，也可以有一个比较好的显示效果，
所以为很多的元素都设置了一些默认的margin和padding，
而它的这些默认样式，正常情况下我们是不需要使用的。
所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的 去掉
去除默认样式方法（*通配符选中所有元素）
*{
margin: 0;
padding: 0;
}
CSS的属性计算
calc(值1 运算符 值2)
运算符左右一定要有空格（必须有，否则没效果）
例如一个html块，如果分上下两块，上面60px，下面要做到屏幕分辨率自适应就要用到这个公式
height:calc(100vh - 60px)
CSS弹性模型
专门用于做布局使用，子元素来分父元素的区域
举例来说：比如父亲给三个儿子分房子，必须要具备的前提条件：
1.有房子（父元素要有宽度和高度）
2.父亲同意把房子分给儿子（将父元素设置为弹性模型）
怎样将父元素设置为弹性模型：使用display:flex
子元素设置flex:权重值，也可以用权重值和固定大小进行搭配使用
分配方式：默认左右分
如果父元素设置为弹性模型，左右分，子元素默认高度为100%
如果父元素设置为弹性模型，上下分，子元素默认宽度为100%
父元素中设置fiex-direction为分配方式
row 默认值 左右分
row-reverse 反向左右分
column 上下分
column-reverse 反向上下分父元素中设置align-items为对齐方式（这个对齐方式只对不是铺满的高度和宽度有效）
flex-start 开始位置对齐
flex-end 结束位置对齐
center 中间位置对齐<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin:0; padding:0; } #father{ width: 100%; height: 100vh; background: #00FF00; display: flex; flex-direction: row; align-items: center; } #father>#child1 { flex: 1; height:200px; background: #00FFFF; } #father>#child2 { flex: 1; height:150px; background: #ceb734; } #father>#child3 { flex: 1; height:225px; background: #ff6183; } </style> </head> <body> <div id="father"> <div id="child1"></div> <div id="child2"></div> <div id="child3"></div> </div> </body> </html>效果如下：
行间距
在CSS并没有为我们提供一个直接设置行间距的方式，
我们只能通过设置行高来间接的设置行间距，行高越大行间距越大
使用line-height来设置行高
行高类似于我们上学单线练习本，单线本是一行一行，线与线之间的距离就是行高，网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示（比如行高为20px，文字大小（其实是包含文字的格子大小）为10px，则上面留5px，下边留5px，这就是垂直居中，而行间距也就是行高-文字大小=10px）
行间距 = 行高 - 字体大小
通过设置line-height可以间接的设置行高，
可以接收的值：
1.直接接收一个大小
2.可以指定一个百分数，则会相对于字体去计算行高
3.可以直接传一个数值，则行高会设置字体大小相应的倍数
举例：设置字体大小为10px；
设置line-height为以下形式效果是一样的：
- line-height：20px;
- line-height: 200%;
- line-height: 2
使用技巧：
对于单行文本来说，可以将行高设置为和父元素的高度一致，
这样可以使单行文本在父元素中垂直居中，设置行高默认文字会行高间垂直居中
文本样式
text-transform可以用来设置文本的大小写
可选值：
none 默认值，该怎么显示就怎么显示，不做任何处理
capitalize 单词的首字母大写，通过空格来识别单词
uppercase 所有的字母都大写
lowercase 所有的字母都小写
（对中文没意义，中文没有大小写，只能设置英文的大小写）
text-decoration可以用来设置文本的修饰
可选值：
none：默认值，不添加任何修饰，正常显示
underline 为文本添加下划线
overline 为文本添加上划线
line-through 为文本添加删除线
（超链接默认添加了下划线，也就是说超链接默认的text-decoration属性值为underline，我们可以将其改变为none，这样就没下划线了）
letter-spacing可以指定字符间距（字与字的距离，默认值为0）
word-spacing可以设置单词之间的距离
实际上就是设置词与词之间空格的大小，如果我们有设置word-spacing属性，
检测到有空格的地方，就会采用我们设置的样式
text-align用于设置文本的对齐方式
可选值：
left 默认值，文本靠左对齐
right ， 文本靠右对齐
center ， 文本居中对齐（两边都不齐）
justify ， 两端对齐
- 通过调整文本之间的空格的大小（增大文本间的间隙），来达到一个两
端对齐的目的
text-indent用来设置首行缩进
当给它指定一个正值时，会自动向右侧缩进指定的像素
如果为它指定一个负值，则会向左移动指定的像素,
通过这种方式可以将一些不想显示的文字隐藏起来（我们会想既然不想显示为什么还要写，这就跟<input type="hidden">(这个隐藏域通常是在网页存储一些ID信息)类似，这些东西我们不希望用户看见，但是我们希望浏览器可以看到，方便我们做一下其他的操作）
这个值一般都会使用em作为单位,这样无论是字体大小如何变化，都会跟随字体大小变化缩进距离，比较方便
页面背景图片设置
使用background-image来设置背景图片
- 语法：background-image:url(相对路径);
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景图片和元素一样大，则会将背景图片全部显示
- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，
这样背景颜色将会作为背景图片的底色
一般情况下设置背景图片时都会同时指定一个背景颜色
background-repeat用于设置背景图片的重复方式
可选值：
repeat，默认值，背景图片会双方向重复（平铺）
no-repeat ，背景图片不会重复，有多大就显示多大
repeat-x， 背景图片沿水平方向重复
repeat-y，背景图片沿垂直方向重复
背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的位置
可选值：
该属性可以使用 top right left bottom center中的两个值任意组合
来指定一个背景图片的位置
top left 左上
bottom right 右下
如果只给出一个值，则第二个值默认是center
也可以直接指定两个偏移量，
第一个值是水平偏移量
- 如果指定的是一个正值，则图片会向右移动指定的像素
- 如果指定的是一个负值，则图片会向左移动指定的像素
第二个是垂直偏移量
- 如果指定的是一个正值，则图片会向下移动指定的像素
- 如果指定的是一个负值，则图片会向上移动指定的像素
background-attachment用来设置背景图片是否随页面一起滚动
可选值：
scroll，默认值，背景图片随着窗口滚动，当滚动条向下滚动，则图片向上移动
fixed，背景图片会固定在相对于浏览器窗口的某一位置，不随页面滚动
（相当于我们经常看到的一些背景图片不变，文字在滑动的效果）
3D效果
如果要实现3D效果，就必须要有两个前提
1.把要实现3D效果的标签上面加上属性：transform-style: preserve-3d;
2.把要实现3D效果的标签 父标签加上一个镜头的距离：perspective，一般为800px—1200px
如果要看出3D效果，还需要一个很重要的属性
transform:
rotateX(数值deg) 沿X轴旋转 deg为角度单位
rotateY(数值deg) 沿Y轴旋转
rotateZ(数值deg) 沿Z轴旋转
translateX(数值px) 沿X轴平移
translateY(数值px) 沿Y轴平移
translateZ(数值px) 沿Z轴平移
transform的平移方位是会随着旋转角度的改变而改变，而相对定位和绝对定位的平移是绝对不会改变的，就是left朝右平移，top向下平移
元素的透明度
当层级高的元素的一部分盖住了层级低的元素，而这时我们又想看到层级低的元素的情况，我们就可以设置高层级元素的透明度
设置元素的透明背景
opacity可以用来设置元素背景的透明，
它需要一个0-1之间的值
0 表示完全透明
1 表示完全不透明
0.5 表示半透明
opacity属性在IE8及以下的浏览器中不支持
IE8及以下的浏览器需要使用如下属性代替
filter:alpha(opacity=透明度)
透明度，需要一个0-100之间的值
0 表示完全透明
100 表示完全不透明
50 半透明
也就是为了兼容性，可以两种都设置，这样在所有浏览器就都能看见效果了
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
