CSS（层叠样式表）
目录
一、css概述
1. 概念：
Cascading Style Sheets 层叠样式表（定义页面如何显示）
* 层叠：多个样式可以作用在同一个html的元素上，同时生效
2. 好处：
（1）功能强大
（2）将内容展示和样式控制分离
* 降低耦合度。解耦
* 让分工协作更容易
* 提高开发效率
二、css的使用
1. css语法
选择器（符）{属性名：属性值（声明）;属性名:属性值}
(属性名与属性之间用英文冒号连接,属性值后面以英文分号进行结尾。可以书写多个属性，当一个属性中，有多个属性值，属性值与属性值之间用空格隔开)
p{cursor: pointer（小手）/default（指针）;（指向某元素时显示的鼠标指针类型）;
visibility: hidden;（设置元素是否可见或不可见）}
p{color: green;font-size: 30px;}2. css三种引入方式
（1）内联样式表(行内样式表):在html标签中添加一个sytyle属性,在style属性里添加css效果
<p style="color: blue;"></p>（2）内部样式表:在head标签里添加一对style双标签，再css实现效果（用css语法）
<head>
<!-- 头部标签 -->
<style>
p {
color: green;
font-size: 30px;
}
</style>
</head>（3）外部样式表：新建css文件，在head标签中添加link单标签链接（英文输入法，书写link，单击tab键自动生成链接）css文件（用css语法）
<head>
<!-- 头部标签 -->
<link rel="stylesheet" href="css/style.css">
</head>
（rel=“告诉浏览器需要链接的文件是样式表的格式”）
（ href="需要链接的css文件路径"）
div{
color：green; 颜色
font size:36px; 字体大小
width:200px; 宽度
height: 200px; 高度
background-color: skyblue; 背景颜色
border: 2px solid red; 边框（线条粗细 线形(实线solid/虚线dotted（dashed）/double双实线 颜色)）
}
导入外部样式表：
<head>
<style type="text/css">
@import url("css/style.css");
/* @import放在style元素的最前面，语句后加分号 */
</style>
</head> 页面导入样式时，使用 link 和 @import 有什么区别
1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，
不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
@import是 CSS2.1 才有的语法， IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别，link支持使用Javascript控制DOM去改变样式；而@import不支持3. 选择器类型
（1）元素（标签）选择器:
以标签名(h / p / img / a / ul / ol / dl / li / form / div...)作为选择的方式添加属性效果
p {color: green;font-size: 30px;}（2）class（类）选择器
a.在html里面添加一个class属性，在css中添加相应的属性名添加效果
b.在class名之前要加英文输入法的点，用于识别class名
c.一个元素可以有多个class名，多个class名之间用空格隔开
d.不同元素之间，class名可以重名，但展现的效果是一样的
<p class="box box2">内容</p><!-- 多个class名，多个class名之间用空格隔开 -->
<h1 class="box2"> 内容</h1>
.box{
color: green;}
.box2 {
font-size: 30px;}（3）id选择器
a.在html里面添加一个id属性，在css中添加相应的属性名添加效果
b.在id名之前要加#，用于识别id名
c.id名相当于网页的证件号码，具有唯一性（体现在js中）
<div id="demo">内容</div>
#demo{color：red}通过标签的id属性进行-锚点跳转
设置锚点：<a id="text1"></a>
页面内锚点跳转：<a href="#text1"></a>
跨页面锚点跳转：<a href="网址#text1"></a>
（4）群组选择器（打组作用：不同选择器标签实现相同属性效果（不同选择器之间用英文逗号隔开））
选择器1，选择器2{属性名：属性值；属性名：属性值；}
<div id="demo2">内容</div>
<p class="box3">内容</p>
#demo2,.box3{color：purple；font-size：40px；}
（两个元素同时应用样式）<!-- 不同选择器之间用英文逗号隔开 -->（5）包含选择器（父级和子级的关系：前面的选择器必须是后面选择器的父级标签）
子选择器（父级与子级选择器之间用空格隔开，子元素应用样式）
选择器1 选择器2{属性名：属性值；属性名：属性值；}
<div class="text">内容
<p class="tt">内容</p>
</div>
.text .tt {color：purple；font-size：40px；}
父选择器（ 前面的选择器必须是后面选择器的直接父级标签，父元素应用样式 ）
选择器1>选择器2{属性名：属性值；属性名：属性值；}
<div class="text">内容
<p class="tt">内容</p>
</div>
.text>.tt{color：purple；font-size：40px；}（6）相邻兄弟选择器（相邻元素之间用+隔开，但只有后一个元素应用样式）
<div id="demo2">内容</div>
<p class="box3">内容</p>
#demo2+.box3{color：purple；font-size：40px；} <!-- 只有后一个元素.box3应用样式 -->
（7） 联合选择器
p.c3{元素+类选择器}
<p class="c3">内容</p>（8）伪类选择器-鼠标划过效果
选择器:hover{属性名：属性值；属性名：属性值；}
<a href="https://www.baidu.com/">内容</a>
a：hover{
color：yellow ；font-size：40px；
opacity:0.5（不透明度：0-1） }
.menubox ul li ul{
background：blue；
display：none； -隐藏不显示
}
.menubox ul li：hover ul{
display：block；鼠标划过展示
}
a:link{未被访问状态}
a:hover{鼠标划过} （必须置于link和visited之后才有效 ）
a:active{活动状态（点击时未松开鼠标）} （必须置于hover之后才有效 ）
a:visited{已被访问状态}
结构伪类选择器
p:first-letter{第一段}
p:first-line{第一行}
E：first—child 匹配父元素中的第一个子元素E
E：nth—child（n） 匹配父元素中的第n个子元素E
E：nth—child（even/2n） 匹配父元素中的第偶数个子元素E
E：nth—child（odd/2n+1） 匹配父元素中的第奇数个子元素E
E：nth—child（5+n） 匹配父元素中的第5个之后子元素E
E：nth—child（-5+n） 匹配父元素中的前5个子元素E
E：first—of-type 指定类型E的第一个
E：last—of-type 指定类型E的最后一个
E：nth—of-type（n） 指定类型E的第n个
E：nth—of-type（even/2n） 指定类型E的第偶数个
E：nth—of-type（odd/2n+1） 指定类型E的第奇数个 伪元素选择器
::before 在元素内部的前面插入内容
::after 在元素内部的后面插入内容
注意：before和after必须有content属性
before在内容前面插入一个行内元素，after在内容后面插入一个行内元素
before和after创建一个元素，但是属于行内元素
因为在dom里看不见创建的元素，所以成为伪元素
伪元素和标签选择器一样，权重为1
::before 和:after 中双冒号和单冒号的区别
单冒号( : )用于 CSS3 伪类，双冒号( :: )用于 CSS3 伪元素
用于区分伪类和伪元素
（7）通配符选择器 (代表所有元素)--清除元素自带间距
*{属性名：属性值；属性名：属性值；}
*{
padding:0;
margin:0;
}（8）属性选择器
定义属性选择器时，方括号“[]”将属性包围住
[title]{带有title属性的所有元素设置样式}
p[name*="text"]{名字中包含text}
p[name$="selector"]{名字中后缀包含selector}
p[name^="attribute"]{名字中以attribute开头}
p[name~="attribute"]{名字中只要含有attribute}
p[name="attribute"]{名字为attribute}选择器权重大小
（权重越大，css显示效果越优先）！impoertant>行内样式（权重1000）>id选择器（权重100）>class选择器(权重10)>元素选择器（权重1）
（1）元素选择器（和伪元素选择器）:0001
（2）class选择器:0010
（3）伪类选择器: 0010（建立在其他选择器的基础上进行效果展示，与其他选择器没有可比性）
（4）id选择器:0100
（5）包含类选择器：等于里面每个选择器之和
（6）群组选择器：单独计算（打组）
（7）如果权重相同，谁写在后面听谁的（后来居上）
（8）若果子元素没有规定样式，则子元素会继承父元素的样式，但继承的样式权重不如后来指定的css样式
（9）网页编写者设置的css样式优先权高于浏览器默认所设置的样式
（10）在同一组属性设置中标有“!important”规则的优先级最大（无穷大）
div{
color：pink！important；
}4. 浮动
定义了浮动的元素在一行之中向左或向右移动（会使像素向左或向右移动，其周围的元素也会重新排列，若浮动的元素父级一行装不下，则会另起一行排列）（相当于将disply属性改为inline-block，但元素之间没有空隙）
float：left；（向左浮动）/right；（向右浮动）
（1）正常情况下，父元素不设置高度的话，他的高度由子元素撑开
（2）子元素添加浮动之后，父元素高度为0，也就是高度塌陷（会影响父元素的兄弟级位置：自动补齐浮动后留下的空白）
（3）高度塌陷解决办法：
a. 给父元素添加一个固定高度（缺点：需要元素）
b. 给父元素添加溢出属性：隐藏 overflow：hidden（auto/scrool）；（最常用，但内容增多时不会换行，有些内容可能被隐藏）
c. 清除浮动（在最后一个浮动元素末尾添加一个空的标签，例如：
<div style="cleal:both"></div>） 缺点：增加额外标签
clear：right（元素右边不能有浮动元素）
left（元素左边边不能有浮动元素）
both（元素左右两边都不能有浮动元素）
d. 使用after伪类元素清除浮动（给浮动元素的父级标签添加）
after方式为空元素额外标签升级版，即不用单独加标签了
.clearfix：after{
content：“”；
disply：block；
height：0；
visbility：hidden；
clear：both；
}
.clearfix{
*zoom：1；（ie6和ie7浏览器不支持，需额外加上）
}
}
f. 使用双伪元素清除浮动
.clearfix：before，
.clearfix：after{
content：“ ”；
disply：table；
}
.clearfix：after{
clear：both；
}
.clearfix：{
*zoom：1；（ie6和ie7浏览器不支持，需额外加上）
}5. 定位
元素根据参照物的不同来进行位置的设置（同float一样，绝对定位和固定定位也会将disply属性默认转换成行内块元素，同时给盒子加了浮动和定位，就不会出现垂直外边距合并的问题了）
absolut：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位
fixed ：生成绝对定位的元素，相对于浏览器窗口进行定位
relative：生成相对定位的元素，相对于其正常位置进行定位
static 默认值。没有定位，元素出现在正常的流中
inherit 规定从父元素继承 position 属性的值position：
（1）relative 相对定位（参照自己本身的位置移动，移动时原有位置继续保留）
作用：a.微调元素位置 b.搭配绝对定位使用
（方向：top上/bottom下/left左/right右）
position：relative；
left：100px；（向左留出100像素的距离，相当于向右移动）
（2）absolute 绝对定位（参照第一级父级元素的位置移动，若第一级父级元素没有添加定位则参照向上一级父级元素的位置，层层递进直至参照浏览器的body位置移动）移动时不保留原有的位置
定位原则：父相子绝（父元素是相对定位，子元素是绝对定位）
（方向：top上/bottom下/left左/right右）
position：absolute；
right：0px； top：0x；（距自己的父级右上都为0像素的距离）
（3）fixed 固定定位（参照浏览器的窗口位置进行定位）
作用：固定导航栏，返回顶部栏，小广告
（方向：top上/bottom下/left左/right右）
position：fixed；
top：0x；
注意：绝对定位和固定定位的盒子不能通过设置margin：auto设置水平居中
解决办法：首先left：50%（让盒子左侧移动到父级元素的中心位置），然后margin- left：- 盒子自身宽度的一半像素（让盒子想左移动一半距离）
堆叠（图层）顺序：
（只能应用与相对定位/绝对定位/固定定位的元素上，其他标准流、浮动和静态定位无效）
z-index：正整数/负整数/0 默认是0，数值越大，盒子越靠上，如果属性值相同，则按书写顺序，后来居上
position：absolute
z-index：1（表示在第1层显示）
相当于图层顺序，数字越大越在上层显示，须结合定位使用
6. 盒模型
盒模型：CSS把每个元素视为一个盒子，每个盒子包括分为内容（content）、填充（padding）、边框 （border）、边界（margin）四个部分。盒模型是CSS布局的基本单元。
W3C标准盒模型（border-box）：属性width，height只包含内容content，不包含border和padding。
增加padding值和border值，不会改变盒子大小，即width和height设置了多大就是多大
IE盒模型（也称怪异盒模型）（content-box）：属性width，height包含content、border和padding
如果内边距增大了，整个盒子也是增大的，那么要保持整个盒子
不变大的话，就要减小宽读或者高度，即内容区的宽度或者高度
相互转换：
1 box-sizing：content-box 盒子大小为 width+padding+border（以前默认的）
2 box-sizing：border-box 盒子大小为width 所有html元素都可以看作盒子，在css中，盒模型是用来设计和布局时使用的，盒子描述了元素及其属性在页面布局中所占的空间大小（即规定了页面中元素和元素之间的间距，以及元素的内容到边缘之间的间距）
组成元素：margin（外边距），border（边框），box-shadow（盒阴影），padding（内边距/填充）和content（实际内容）
（1）内容 content：宽度和高度
（2）内边距 padding：内容和边框之间的距离（改变盒子的大小，撑开盒子，如果这个盒子没有宽度则padding不会撑开盒子）
padding-top/bottom/left/right：100px；（3）边框 border：边框粗细 线型 边框颜色
border: 2px solid red;
边框（线条粗细 线形(实线solid/虚线dotted（dashed）/double双实线 颜色)）
border-top/bottom/left/right
圆角效果：
border-radius：10px 20px 30px 40px； //左上顺时针开始
border-radius：50%（圆）；（4）盒阴影
box-shadow:1px -2px 5px 0px yellow；
（水平阴影 垂直阴影 模糊距离-虚实 阴影尺寸-大小 阴影颜色）
左右位移（左负右正） 上下位移（上负下正） 阴影粗细 阴影颜色（5）外边距 margin：盒子（边框）与盒子（边框）之间的距离（改变盒子（内容）的位置）--（同辈元素之间的关系）
（外边距）塌陷现象：对于两个嵌套关系的块元素，如果父元素没有上内边距或上边框，父元素的外边距会和子元素的外边距发生合并，合并后取外边距为两者中的较大者，即会出现控制子元素的外边距时，父元素的外边距会一起跟着变
解决办法：
a.为父元素定义上边框
b.为父元素定义上内边距
c.为父元素添加overflow：hidden
margin-top/bottom/left/right：100px
margin：0 auto；（上下边距为0，水平居中）（必须是块级元素，且设置宽高才有效）缩写方式：
padding / margin：10px / 10px 20px / 10px 20px 30px / 10px 20px 30px 40px（一个值：代表四个方向：上下左右/两个值：第一个值代表上下，第二个代表左右/三个值：第一个值代表上，第二个值代表左右，第三个值代表下/四个值：内边距顺时针方向分别代表上右下左）
注意：
（1）当盒子之间的上下外边距发生冲突时，浏览器默认取最大值
（2）如果添加浮动的盒子之间的左右外边距发生冲突时，浏览器会默认相加
（行内框、浮动框或绝对定位之间的外边距不会合并）
（3）浏览器body是最大的盒模型
（4）元素的总大小不包括外边距margin
a.元素的总宽度=border-left+padding-left+padding-right+border-right
b.元素的总高度=border-top+padding-top+padding-bottom+border-bottom
7. 弹性盒布局
为父元素书写弹盒属性，子元素按照弹盒样式来显示
优点：适应性强，在做不同屏幕分辨率的时候非常实用
弹性盒布局实现快捷，易维护
（1）父元素书写属性
a.弹盒属性：
display：flex ；
--弹盒布局（其下子元素浮动效果）（添加弹性盒属性后，它的大小由内容尺寸撑开，行内元素和块元素转化为行内块元素，可用text-align：center；实现居中效果，子元素的float、clear、vertical-align属性将失效）
b.设置主轴：
flex-direction：row（主轴在水平方向-x轴-起点为左端-默认状态）
/row-reverse（反向-起点为右端）
flex-direction：column（主轴在垂直方向-y轴-起点为上段端-默认状态）
/column-reverse（反向-起点为下端）c.控制子元素的换行效果
flex-wrap：nowrap；不换行-弹性盒自带默认效果
/flex-wrap：wrap；换行（换行条件：所有子元素的宽和大于父元素的宽） d.对齐方式
主轴（x轴）对齐：
justiify-content：flex-start；从行头对齐-默认
/justiify-content：flex-end；从尾端对齐
/justiify-content：center；水平居中
/justiify-content：space-between；水平平均分布（各子元素之间的间距相同）
/justiify-content：space-around；水平环绕分布（左右边距是元素间边距的一半）
侧轴（y轴）对齐 ：适用于单行排列
align-items：flex-start；从顶部对齐-默认
/align-items：flex-end；从底部对齐
/align-items：center；垂直居中多行排列：设置侧轴上的子元素多行排列，即换行时有效
align-content：flex-start；从顶部对齐-默认
/flex-end；从底部对齐
/center；垂直居中
/space-between；水平平均分布（各子元素之间的间距相同）
/space-around；水平环绕分布（左右边距是元素间边距的一半）
/stretch；设置子元素高度平分父元素高度 flex-flow：column wrap；复合属性，相当于同时设置了flex-dection和flex-wrap
（2）flex布局子项常见属性：
a. flex
子项占的份数
.item {flex:1;} 默认为0，分配剩余空间b. align-self
控制子项在自己侧轴的排列方式（允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto继承父元素align-items属性，如果没有父元素则等同于stretch）
c. order属性
定义子项的排列顺序
div span：nth-child（2）{
order：-1； <!-- 将第2个span盒子放到第一个盒子前面 -->
}8. 溢出
（1）容器溢出：内容（纵向）溢出元素框时的处理方式
容器添加css属性 overflow： hidden（隐藏-直接隐藏溢出的内容）/scroll（隐藏-溢不溢出都出现x轴和y轴滚动条）/auto（隐藏-若溢出出现y轴滚动条-比较智能）
图片元素为了方便排版一般要转换为块级元素
width：100% 表示img继承父级元素box的宽
height：100% 表示img继承父级元素box的高
.box img{
display：block
width：100%
height：100%
} *正常情况下，父元素不设置高度的话，他的高度由子元素撑开（如果子元素想设置100%满屏状态下的效果，就要给父元素设置高度100%，若父元素是body，body的父元素是html，则body和HTML都要设置高度100%显示）
（2）文本溢出：文字（横向）发生溢出时的处理方式
a.文本溢出也属于容器溢出
文本容器添加css属性 overflow： hidden（隐藏-直接隐藏溢出的内容）
b.text-overflow：ellipsis（溢出的内容以省略形式（省略号）出现）
/text-overflow：clip（直接裁剪）
溢出条件：
a. 明确宽度：块级元素默认继承父元素的宽度
b. 限定文本不换行：white-space：nowrap
9. 转换&过渡
（1）2D转换：可以对元素进行移动、缩放、转动、拉长或拉伸。
a. 属性：
transform：（向元素应用2D或3D转换）
transform-origin：x y(默认50% 50%；
或是方位名词 top bottom left right center)；（转换中心点）2D transform方法:
函数:
matrlx（n，n，n，n，n，n）定义2D转换，使用6个值的矩阵
transform：（要实现多个效果需进行总写（不同转换方法之间用空格隔开），否则上面添加的转换会被下面添加的转换效果覆盖）
同时使用多个转换，其格式为： transform：translate（） rotate（） scale（）；
同时有位移和其他属性的时候，位移需放在最前面（顺序会改变转换效果，先旋转会改变坐标轴方向）
a.位移（正-右移-下移，负数-左移-上移）-（单位：px或百分比50%）
-web前端里坐标轴 x轴：左负右正
y轴：上负下正
translate最大的优点：不会影响其他盒子的位置，
translate百分比单位是相对于自身元素的大小，
translate对行内标签没有效果
translate（x，y）定义2D转换，沿着x和y轴移动元素
translateX（n）定义2D转换，沿着x轴移动元素
translateY（n）定义2D转换，沿着y轴移动元素b.缩放（大于1: 放大，大于0小于1: 缩小，等于0: 不显示，等于1: 不变）-（单位：px）
scale（x，y）定义2D缩放转换，改变元素的宽度和高度
scaleX（n）定义2D缩放转换，改变元素的宽度
scaleY（n）定义2D缩放转换，改变元素的高度c.旋转-（顺时针是正数，逆时针是负数）-（单位：deg）
rotate（angle）定义2D旋转，在参数中规定角度d.倾斜-（单位：deg）
skew（x-angle，y-angle）定义2D倾斜转换，沿着x轴和y轴
skewX（angle）定义2D倾斜转换，沿着x轴
skewY（angle）定义2D倾斜转换，沿着y轴
（2）3d转换:（相较2d转换多了一个z轴，沿着z轴移动里负外正，即正对屏幕，越往里值越负，越往外值越正）
透视：perspective ：200px； 透视写到被观察元素的父级盒子上面，呈现出近大远小的视觉效果（数值越大，透视（视距）越大，眼睛距离盒子越远，物体越小）
3d呈现：transform-style：flat（默认不开启）/preserve-3d（子元素开启立体空间）；控制子元素是否开启三维立体环境，代码写给父级，但是影响的是子盒子
3d移动：translatez：100px；z轴单位一般用px，z轴即物体距离屏幕大 小，z轴越大，物体越大
3d移动简写：transform：translate3d（x，y，z px）；
3d旋转简写：transform：rotatate3d（x，y，z px）；
（3）过渡：元素从一种样式逐渐改变为另一种样式的效果（给哪个元素添加了鼠标划过效果，就给那个元素添加css过渡属性）
属性:
transition：all 1s；（简写属性，用于在一个属性中设置四个过渡属性）
transition-property：（规定应用过渡的css属性名称）
transition-duration：（规定过渡效果花费的时间，默认是0）
transition-timing-function：（规定过渡效果的时间曲线，默认是“ease”）
transition-delay：（规定过渡效果何时开始，默认是0）10. 动画
属性
@keyframes：定义（规定）动画
（ @ms.keyframes-IE浏览器，webket.@keyframes-谷歌浏览器，moz.@keyframes-火狐浏览器） @keyframes 动画帧的名称{
0%/from{初始样式}
20%/from{中间样式}
...可以书写多个步骤，尽量保证每个步骤的跨度相同
100%/to{最终样式}
}
@keyframes cheng{
0%/from{width：0%}
20%/from{width：20%}
40%/from{width：40%}
60%/from{width：60%}
80%/from{width：80%}
100%/to{width：100%}
} animation：动画帧的名称 动画的执行时间 动画的执行次数 动画执行的速度曲线（前两个属性必须写，所有动画的简写属性，除了animation-play-state属性），多个动画之间用逗号隔开
animation：cheng 2s 3/infinite（无限循环） linear（匀速）
动画执行的速度曲线：ease-由快到慢，linear-匀速，ease-in-加速，
ease-out-减速，ease-in-out-先加速再减速、
steps（5）指定了时间函数中间断数量（步长）
animation-name：（规定@keyframes动画的名称）
animation-duration：（规定一个动画完成一个周期所花费的秒或毫秒，默认是0）
animation--timing-function：（规定动画的速度曲线，默认是“ease”）
animation-delay：（规定动画何时开始，默认是0）
animation-iteration-count：（规定动画被播放的次数，默认是1，还有infinity）
animation-direction：（规定动画是否在下一周期逆向的播放，
默认是“normal”，反方向就写alternate）
animation-play-state：（规定动画是否正在运行或暂停，默认是“running”，还有pause）
animation-fill-mode：（规定对象时间之外的状态，保持forwards回到起始backwards）11. 背景声明
css可以通过设置纯色作为背景，也可以通过设置图片作为背景(背景图片的前提条件：书写背景图片的容器必须有一个确定的尺寸）
网页中图片的两种存在形式：html：img
css：background
css背景属性
（1）背景颜色 background-color：pink（背景颜色）/transparent(透明)
background:rgb(红色,绿色, 蓝色)
background:rgba(红色,绿色, 蓝色,不透明度（0-1）)
（2）背景图片 background-image：url（图片路径）（背景图片）
-若图片尺寸小于容器的尺寸时，x轴y轴图片自动进行平铺显示
-若图片尺寸大于于容器的尺寸时，图片只显示容器大小的尺寸
（3）背景平铺 background-repeat：repeat-平铺-默认/no-repeat-不平铺/repeat-x-在x轴进行横向平铺/repeat-y-在y轴进行纵向平铺（背景图片的平铺设置）
（4）背景位置 background-position：left top
/10px 50px
水平（x轴横向）位置 垂直（y轴纵向）位置
（背景图片的显示位置-建立在背景图片不平铺的前提下）
水平位置（包含左中右）：left center right
水平位置（包含上中下）：top center bottom
单位：px（距x轴y轴像素的留白）/%（距x轴y轴百分比的留白）
（5）背景大小 background-size：水平位置（单位：px/%） 垂直位置（单位：px/%）
/cover -常用（图片等比例缩放-当背景图片与容器尺寸宽高不一致时，可能会出现某一部分不能显示的现象）
/contain（图片等比例缩放）（背景图片的尺寸更改-当背景图片与容器尺寸宽高不一致时，可能会出现留白的现象-只要有一个方向铺满，里面一个方向就不会发生变化，只能贴合一个边）
（6）背景附着 background-attachment: scroll(随页面滚动)/fixed固定;
总写方式（不包含尺寸）：
background：背景图片的链接地址 背景图片的平铺设置 背景图片的显示位置
background: url(../img/background_img01.png) no-repeat center top;
12. 媒体查询
针对不同的媒体类型定义不同的样式，特别是响应式页面，可以针对不同屏幕的大小，编写多套样式，从而达到自适应的效果
两种网站页面：
（1）响应式网站：一套界面同时运行到pc端分辨率>1200px），平板端（980px
<分辨率<1200px），移动端（分辨率<980px）各个不同的视口。通过检测设备的分辨率，来对页面做出不同的布局和内容（里面内容随浏览器窗口大小实时变化） 方法（采用多个css样式表）
a.新建一个默认效果的css文件，再分别新建pc，平板和移动端页面显示效果的css文件
b.在html文件中分别链接这四个css样式表
c.分别在链接pc，平板和移动端页面css样式表的标签中定义不同的屏幕分辨率大小条件（media="screen and （min-width：最小宽度）" media：属性
<link rel="stylesheet" href="css/style.css"> 默认
<link rel="stylesheet" media="screen and （max-width：980px）"
href="css/style1.css" >
移动端
<link rel="stylesheet" media=“screen and （min-width：980px）
and （max-width：1200px）”
href="css/style2.css">
平板端
<link rel="stylesheet" media="screen and （min-width：1200px）"
href="css/style3.css">
pc端 （2）自适应网站：为不同类别的设备建立不同的网页，检测到设备分辨率大小后调用相应的网页（自适应布局主要应用在pc端）（里面内容在浏览器窗口大小变化到一定时才会更换布局）
方法（只采用一个css样式表）
采用media控件
@media 设备类型 and（多个媒体类型连接到一起）/not（排除某个媒体类型）/only（指定某一个媒体类型） （设备尺寸：min-width max-width）{相应元素的css属性}
@media screen and （min-width：980px） {
.box{
background-color：green
}
}
@media screen and （min-width：980px） and （max-width：1200px）{
.box{
background-color：black
}
}
@media screen and （max-width：980px）{
.box{
background-color：yellow
}
}
13. 视口
meta视口标签
<meta name="viewport" content="width=device-width,user-scalable=no,
initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
width 宽度设置是viewport宽度，可以设置device-width特殊值
initial-scale 初始缩放比，大于0的数字
maxmum-scale 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字
user-scalable 用户是否可以缩放，yes或no（1或0）
14. 显示与隐藏
a.disply：none（隐藏元素且不再保留位置）/block（除了转换为块级元素，同时还有显示元素的效果）
b.visbility：hidden（对象隐藏但保留位置）/visible（对象可视）
几种隐藏元素的方法
visibility:hidden,这个属性只是简单隐藏，但是元素占用的空间任然存在。
opacity:0,一个 CSS3 属性，设置 0 为透明，它可以被 transition 和 animate。
position:absolute, 元素脱离文档流，处于普通文档之上，给它设置一个很大的 left 负值
定位，使元素定位在可见区域之外。
display:none, 元素不可见，不占用文档空间。
transform:scale(0), 将一个元素设置无限小，这个元素将不可见。、
html5 hidden attribute:hidden, 属性效果和 display:none 一样，记录一个元素的状态。
height:0;overflow:hidden； 将元素在垂直方向上收缩为 0，使元素消失。
filter:blur(0), 将一个元素的模糊度设置为 0
15. 鼠标样式
cursor：pointer；
default 默认
pointer 小手
move 移动
text 文本
not-allowed 禁止
16. css精灵技术
将网页中的一些背景图片整合放到一张大图中（精灵图），网页中元素通常只需要精灵图中某个位置的某个小图，需要的时候只需要精确的定位到某个小图就行，这样，当用户访问页面时，只需向服务器发送一次请求，网页中的背景图片即可全部展示出来，这样可以减少服务器的访问次数，减少负荷.
方法：使用background-position：0 -107px ；属性精确定位
17 . 滑动门
父级盒子的宽度由内容撑开，且有背景，如导航栏效果
<a>
<span>首页</span>整个导航栏都是链接，所以a包含span
</a>
a.设置左侧背景门
a {
disply:inline-block;<!-- 由内容撑开盒子 -->
height:33px;
padding-left:15px;
background:url('img/220455croynga9dcjohwc8.jpg.jpg') no-repeat;
}
b.设置右侧背景门
a span {
disply:inline-block;
height:33px;
padding-right:15px;
background:url('img/220455croynga9dcjohwc8.jpg.jpg') no-repeat top right;
<!-- 需要背景图片右对齐 -->
}
18. css三角形效果
<div> </div>
div {
width：0；
height：0；
border：1px solid transparent；
border-top-color： #333；角朝下
}
方法：a. 宽度和高度都为0
b. 四个边框只设置一边的边框颜色，其他颜色都设为透明
19.字体图标
图片不但增加了总文件大小，还增加了额外的http请求，这会大大降低网页性能，图片缩放时会失真，字体图标，就是将一个图标改为字体的格式（由svg格式转换为ico格式），不仅可以做出跟图片一样的效果，改变透明度，旋转等，但是本质上是文字，可以随意改变颜色，产生阴影，透明效果等，而且本身体积更小，几乎支持所有浏览器，移动端常用
20. 页面布局
（1）单独制作页面
a.流式布局（百分比布局）：通过min-width/max-height限制随页面自由缩放的边界
b.flex弹性布局（父元素添加disply：flex；）
c.rem适配布局（可以通过修改html里面的文字大小来改变页面中元素的大小实现整体控制-通过媒体查询/flexible.js（自动分成10等份）更改html字体大小）
rem单位：rem是一个相对单位，类似于em，em是父元素字体大小（vscode里cssrem插件自动将px转化成rem--需根据需要修改默认的16px字体大小）
不同的是rem的基准是相对于html元素的字体大小
比如，根元素html设置font-size=12px；非根元素设置width：2em；则换成px表示非跟元素width：24px
px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。
em 得值不是固定的，并且 em 会继承父级元素的字体大小。
浏览器的默认字体都是 16px。所以未经调整的浏览器都符合:1em=16px。那么
12px=0.75em , 10px=0.625em 。
Less
Less是一门css扩展语言，也称为css预处理器，他不但没有减少css功能，反而在现有基础上，为css引入了 变量、mixin(混入)、运算以及函数等功能，大大简化了css的编写，降低了css的维护成本，Less即用更少的代码做更多的事情（常见的预处理器：Sass、Less、Stylus）
less安装步骤（安装nodejs——基于nodejs安装Less：cmd命令 cnpm install -g Less）
Less使用：新建一个后缀为.less的文件，在文件里书写less语句
less变量：比如将css中一些常用的颜色和数值设为变量，方便调用（变量名自定义但必须@为前缀，不能包含特殊字符，不能以数字开头，大小写敏感）
@变量名：值；
Less编译：需要把less文件编译生成css文件，html页面才能使用（vscode中使用easyless插件，保存less文件自动生成相应css文件）
Less嵌套：与HTML结构语法相似
.header{ <!-- 子代选择器 -->
.logo{width：300px；}
}
.header{<!-- 伪类/交集/伪元素选择器--加&符号 -->
.logo{
width：300px；
&hover：{color：white；}
}
}
Less运算：任何数字、颜色或者变量都可以参与加减乘除运算（运算符两侧需加空格--单位以第一个为准）
导入less文件：important：“文件名”；
（2）响应式页面
响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个
终端做一个特定的版本。
基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有 meta 声明的 viewport。
响应式布局容器：响应式需要一个父级作为布局容器，来配合子元素实现变化效果，原理就是在不同屏幕下，通过媒体查询来改变布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下不同页面布局
通过媒体查询根据屏幕大小控制父级元素大小
<!-- 超小屏幕 -->
@media screen and （max-width：767px）{
.container{
width:100%;
}
}
<!-- 小屏幕 -->
@media screen and （min-width：768px）{
.container{
width:750px;
}
}
<!-- 中等屏幕 -->
@media screen and （mmin-width：992px）{
.container{
width:970px;
}
}
<!-- 大屏幕 -->
@media screen and （mmin-width：1200px）{
.container{
width:1170px;
}
}案例： 多种方式实现已知或者未知宽度的垂直水平居中
第一种：
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
}
第二种：
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
第三种：
.wraper {
.box {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
}
第四种：
.wraper {
display: table;
.box {
display: table-cell;
vertical-align: middle;
}
}21 .bootstrap前端开发框架
使用：创建文件夹结构--创建HTML骨架结构（布局容器.container）--引入相关文件--书写内容
bootstrap栅格系统：bootstrap里面container的宽度是固定的，container的宽度不同，我们再把container划分为12等份
要实现平分12等份（每一列默认有15px的padding）需要给列添加类前缀：.col-xs-（超小extra small屏幕）、.col-sm-（小small屏幕）、.col-md-（中等medium屏幕）、.col-lg（大lage屏幕）
列小于12，则一行留空白，列大于12，则多余的列另起一行排列
可同时为一列指定多个设备类名，以便划分不同份数，例如<div class="col-md-4 col-sm-6"></div>
bootstrap嵌套：列嵌套最好加1个行row ，这样可以取消父元素的padding值，而且高度自动和父级一样高
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
</div>
</div>
列偏移：使用.col-md-offset-类可以将列向右偏移，这些类实际是通过使用*选择器为当前元素增加左的边距（margin）（左右各占4份，中间4份留空白）
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4 col-md-offset-4">
</div>
</div>
列排序：通过使用.col-md-push-（左推右）和.col-md-pull-（右拉左）类改变column的顺序
bootstrap响应式工具：.hidden-xs（超小屏下隐藏）、.hidden-sm（小屏下隐藏）、.hidden-md（中屏下隐藏）、.hidden-lg（大屏下隐藏）
.visible-xs（超小屏下显示）、.visible-sm（小屏下显示）、.visible-md（中屏下显示）、.visible-lg（大屏下显示）
22.浏览器私有前缀（兼容老版本浏览器）
-moz-：firefox浏览器私有属性
-ms-：ie浏览器私有属性
-webkit-：safari、chrome浏览器私有属性
-o-：Opera私有属性
23.移动端特殊样式：
css3盒子模型：-webkit-box-sizing:border-box;
清除超链接等标签点击时默认的高亮效果：-webkit-tap-highlight-color:transparent;
移动端默认浏览器给按钮和输入框自定义样式：-webkit-appearance:none;
禁用长按页面时弹出菜单：img ，a{-webkit-touch-callout:none;}
22. 整体页面搭建
页面搭建流程
明确网站类型（常规/响应式/自适应）
页面逻辑（页面与页面之间的跳转关系）
页面分块编写（头部/bannner/内容/底部）
模块内部结构（盒子与盒子之间嵌套并列关系）