css总结

什么是css

用于美化页面, 装饰页面的

css样式规则

#dv {width: 32px; height: 40; color:"red"}

1, 选择器后面跟一个花括号, 选择器和花括号之间要有一个空格

2, 花括号内有多个键值对, 每一对后面跟个分号

3, 数值不用双引号, 字符串需要双引号

css样式属性

font-size: 字号大小

​ 单位:

• em: 相对于文本字体大小
• px:像素
• in: 英寸
• cm:厘米
• mm: 毫米
• pt:点

font-family: 字体

​ p{ font-family:“微软雅黑”;} 直接写中文xp系统不支持

​ 方法一: 写对应的英文

​ 方法二: 写对象的编码

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

font-weight: 字体粗细

​ font-weight属性用于定义字体的粗细，其可用属性值：normal、bold、bolder、lighter、100~900（100的整数倍）。

​ 数字 400 等价于 normal，而 700 等价于 bold。 但是我们更喜欢用数字来表示。

font-style: 字体风格

​ font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

​ normal：默认值，浏览器会显示标准的字体样式。

​ italic：浏览器会显示斜体的字体样式。

​ oblique：浏览器会显示倾斜的字体样式。

font综合设置

​ 选择器{font: font-style font-weight font-size/line-height font-family;}

​ 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。

​ 注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

选择器

标签选择器 (元素选择器)

标签名 {键:值;键:值}; 
例如: div {width:300px; height:300px}
<div></div>

类选择器

这个类名可以被多个标签使用, (多个标签起同一个类名)

.类名 {键:值;键:值}; 
例如: .dv {width:300px; height:300px}
    <div class = "dv"></div>

多类名选择器

一个标签名, 有多个选择器名

#noe {键:值;键:值}; 
#tow {键:值;键:值}; 
#three {键:值;键:值}; 
例如: #noe #tow #three {width:300px; height:300px}
    <div id="noe tow three"></div>

id选择器

这个id名只能使用一次, (只能有一个标签使用)

#id名 {键:值;键:值}; 
例如: #dv {width:300px; height:300px}
    <div id="dv"></div>

通配符选择器

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
例如: * {margin: 0; padding: 0;}

伪选择器

连接伪类选择器

:link 未访问的连接

visited 已访问的连接

:hover 鼠标移动到连接上

active 选定的连接

a {   /* a是标签选择器  所有的链接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
		}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
			color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

结构(位置)伪类选择器

:first-child 选取属于其父元素的首个子元素的指定选择器

:last-child 选取属于其父元素的最后一个字元素的指定选择器

:nth-child(N) 匹配属于父元素的第N个字元素, 不论元素类型

:nth-last-child(N) 选取匹配属于其元素的第N个元素的每一个元素,不论元素类型, 从最后一个元素开始计数

li:first-child { /*  选择第一个孩子 */
        		color: pink; 
        	}
li:last-child {   /* 最后一个孩子 */
        		color: purple;
        	}
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
				color: skyblue;
        	}

目标伪类选择器

:target, 用于选取当前活动的目标元素

:target {
		color: red;
		font-size: 30px;
}

复合选择器

交集选择器

交集选择器由两个选择器构成, 期中第一个为标签选择器, 第二个为类选择器, 中间不能有空格

含义: 交集为并且的意思, (选中的是P标签, 并且这个标签的类名叫noe)

标签名.类名 {键:值; ...}
例如: p.noe {width:200px; height:200px}

并集选择器

由多个选择器 构成, 可以是标签选择器,类选择器id选择器. 中间由逗号隔开

含义: 和的意思, (P, ,noe,#tow,三个都这个设置)

标签名,.类名,#id名 {键:值; ...}
例如: p,.noe,#tow {width:200px; height:200px}

后代选择器 (包含选择器)

由多个选择器组成, 可以是标签,类名, id名, 中间由空格隔开

含义: 层级选中 (选择爷元素下的, 子元素下的, 曾孙元素, 将该元素设置属性),

注意: 可以隔代选择 ,只要是子孙(被包含的)都可以选择

标签名 .类名 #id名 {键:值; ...}
例如: p .noe #tow {width:200px; height:200px}

子元素选择器

由多个选择器组成, 可以是标签,类名, id名, 中间由大于号隔开

含义: 选择爷元素下的, 父元素下的, 子元素下的, 曾孙元素, 将该元素设置属性

注意: 只能选择自己的子元素, 一层一层选择下去, 不能跳过子元素直接选中曾孙元素

标签名>.类名>#id名 {键:值; ...}
例如: p>.noe>#tow {width:200px; height:200px}

属性选择器

**选择器	**示例	**含义
E[attr]****		存在attr属性即可
E[attr=val]****		属性值完全等于val
E[attr*=val]****		属性值里包含val字符并且在“任意”位置
E[attr^=val]****		属性值里包含val字符并且在“开始”位置
E[attr$=val]****		属性值里包含val字符并且在“结束”位置

/* 获取到 拥有 该属性的元素 */
li[type] {
  border: 1px solid gray;
}
/* 获取 属性等于某个值的 元素 属性值 可以使用 引号进行包裹 */
li[type="vegetable"] {
  background-color: green;
}
/* 使用空格分隔的 多个属性 其中有某个属性即可获取 */
li[type~="hot"] {
  font-size: 40px;
}
/* 获取以某个属性开头的语法  */
li[color^='green'] {
  background-color: orange;
}
/* 获取以某个值 结尾的属性 */
li[type$='t']{
  color: hotpink;
  font-weight: 900;
}

/* 获取 属性中 拥有某个值的 元素 */
li[type*=ea] {
  font-size: 100px;
}
/*  如果属性的值 只有very 也能够获取  用来获取 多个属性 并且 使用-连接 */
li[price|='very'] {
  background-color: darkred;
}

<ul>
<li\ type=‘fruit’ color=‘green’>西瓜</li>
<li\ type=‘vegetable’ color=‘greenyellow’>西兰花</li>
<li\ type=‘meat’>牛肉</li>
<li\ type=‘meat hot’>猪肉</li>
<li\ type=‘drink hot’>可乐</li>
<li\ type=‘drink hot’>雪碧</li>
<li\ price=‘very-cheap’>红酒</li>
<li\ price=‘very’>白酒</li>
</ul>

伪元素选择器

1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）

2. E::first-line 文本第一行；

3. E::selection 可改变选中文本的样式；

   p::first-letter {
     font-size: 20px;
     color: hotpink;
   }
   
   /* 首行特殊样式 */
   p::first-line {
     color: skyblue;
   }
   
   p::selection {
     /* font-size: 50px; */
     color: orange;
   }
   
   

4、E::before和E::after

在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

“:” 与 “::” 区别在于区分伪类和伪元素

css外观属性

color: 文本颜色

有三种取值

1.预定义的颜色值，如red，green，blue等。

2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

line-height: 行间距

有三种单位

​ px, em, %

text-align: 水平对齐

1, left: 左对齐(默认)

2, right: 右对齐

3, center: 居中

text-index: 首行缩进

​ 单位 em, 一个 em 就是一个字的宽

letter-spacing: 字间距

​ 字与字之间的距离, 单位可以是数值, 默认值为normal

word-spacing: 单词间距

​ 单词与单词之间的距离, 单位可以是数值, 默认值为normal

颜色透明度

​ color: rgba(r,g,b,a) a 是alpha 透明的意思 取值范围 0~1之间 color: rgba(0,0,0,0.3)

text-shadow:文字阴影

​ 给文字添加阴影

​ text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;

​ h-shadow: 必写, 水平阴影, 允许负值

​ v-shadow: 必写, 垂直阴影, 运行负值

​ blur: 可选 模糊距离

​ color: 可选

​

css书写位置

行内样式 (内联样式)

​ 将样式直接写的标签中

内部样式(内嵌式)

​ 在head内, 写style标签, 在style标签中写

外部样式 (外链式)

​ 1, 写一个css文件, 直接写在文件内

​ 2, 在需要的页面, head中引入

<link rel="stylesheet" href="xxx.css">

display: 标签显示模式

块级元素block-level

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

行内元素inline-level

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签最典型的行内元素。

块元素 和 行内元素的区别

块级元素特点:
	1, 总是从新的一行开始
	2, 高,宽,外边距, 内边距都 可以控制
	3, 默认宽为容器的100%
	4, 可以容纳行内元素和其他元素

行内元素的特点:
	1, 和相邻的行内元素在同一行
	2, 高宽无效,但是水平方向的mrign和padding可以设置,垂直方向无效
	3, 默认高度就是内容的高度
	4, 行内元素只能容纳文本或其他行内元素

行内块元素inline-block

在行内元素中有几个特殊的标签——<img />、<input />、<td>，可以对它们设置宽高和对齐属性，有些资料可能会称它们为行内块元素。

行内块元素的特点：
（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
（2）默认宽度就是它本身内容的宽度。
（3）高度，行高、外边距以及内边距都可以控制。

css背景background

background-image背景图片

background-image : none | url (url) 

none: 无背景图(默认)

url: 图片地址, 不要双号

background-repeat背景平铺

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

repeat : 　背景图像在纵向和横向上平铺（默认的）

no-repeat : 　背景图像不平铺

repeat-x : 　背景图像在横向上平铺 (单横向平铺)

repeat-y : 　背景图像在纵向平铺 (单纵向平铺)

background-position背景位置

background-position : length || length

background-position : position || position 

length : 　百分数 | 由浮点数字和单位标识符组成的长度值
position : 　top | center | bottom | left | center | right

1, 设置或检索对象的背景图像位置。必须先指定background-image属性。

2, 默认值为：(0% 0%)。

3, 如果只指定了一个值，该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。

background-attachement背景附着

background-attachment : scroll | fixed 

scroll : 　背景图像是随对象内容滚动
fixed : 　背景图像固定

说明： 设置或检索背景图像是随对象内容滚动还是固定的。

背景简写

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

rgba(0,0,0,0.3)背景透明(CSS3)

CSS3支持背景半透明的写法语法格式是:

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度 取值范围 0~1之间

注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。

同样， 可以给 文字和边框透明 都是 rgba 的格式来写。

color:rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);

###### background-size背景缩放(CSS3)

background-size: 300px 100px;
background-size: contain;
background-size: cover; 

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

多背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局

background-image: url('images/gyt.jpg'),url('images/robot.png');

css三大特性

层叠 继承 优先级

css层叠

是指css的样式重复, 当浏览器发现两个选择器设置同一个元素时, 会将另一个的选择器样式覆盖掉,

如果出现样式冲突, 会按照css书写的顺序, 以最后的样式为标准

css基础

有两个元素是嵌套关系(父子元素), 给父元素设置样式, 子元素也会基础到父元素的样式

继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

css优先级

​ 默认样式 < 基础样式 < 通配符 < 标签名 < class < id < 行内样式

​ 设置!important该样式优先级最大

div {
           width: 300px;
           height: 300px;
           background-color: red !important; //无法基础, 基础权重为0
       }

css的特殊性

关于CSS权重，我们需要一套计算公式来去计算，这个就是 CSS Specificity，我们称为CSS 特性或称非凡性，它是一个衡量CSS值优先级的一个标准 具体规范入如下：

specificity用一个四位的数 字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值	0,0,0,0
每个元素（标签）贡献值为	0,0,0,1
每个类，伪类贡献值为	0,0,1,0
每个ID贡献值为	0,1,0,0
每个行内样式贡献值	1,0,0,0
每个!important贡献值	∞ 无穷大

例如:

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

注意： 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div能赶上一个类选择器的情况。

盒子模式

CSS就三个大模块： 盒子模型 、 浮动 、 定位

盒子边框border

border : border-width  border-style  border-color 
例如: border: 1px solid red;

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

设置单边样式

设置内容	样式属性	常用属性值
上边框	border-top-style:样式; border-top-width:宽度;border-top-color:颜色;border-top:宽度 样式 颜色;
下边框	border-bottom-style:样式;border- bottom-width:宽度;border- bottom-color:颜色;border-bottom:宽度 样式 颜色;
左边框	border-left-style:样式; border-left-width:宽度;border-left-color:颜色;border-left:宽度 样式 颜色;
右边框	border-right-style:样式;border-right-width:宽度;border-right-color:颜色;border-right:宽度 样式 颜色;
样式综合设置	border-style:上边 [右边 下边 左边];	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
宽度综合设置	border-width:上边 [右边 下边 左边];	像素值
颜色综合设置	border-color:上边 [右边 下边 左边];	颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)
边框综合设置	border:四边宽度 四边样式 四边颜色;

圆角边框

Border-radius: 水平半径/垂直半径；
border-radius: 左上角  右上角  右下角  左下角;

单位: px || %

内边距padding

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

当关键字后面跟的数值不一样时, 表达的意思也不一样

值的个数	表达意思
1个值	padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值	padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值	padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值	padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

外边距marign

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”， 这段空白通常不能放置其他内容。

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

清除元素的默认内外边距

元素之间是有默认内外边距的

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

边距合并

1, 如果有两个元素是垂直上下的关系时.	
当上元素设置了下外边距为20, 下元素设置了上外边距为10. 这个边距将会合并, 最后的边距为最大的哪一方

解决方法:  避免这种行为即可

2, 如果有两个元素嵌套垂直关系.	
父元素没有上内边距及边框, 父元素的上外边距和子元素的上外边距发生合并, 合并边距为两者最大的那个值, 即使父元素的上外边距是0也会发生合并

解决方法:
    1. 可以为父元素定义1像素的上边框或上内边距。
    2. 可以为父元素添加overflow:hidden

盒子的大小

盒子的总宽度= width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度= height+上下内边距之和+上下边框宽度之和+上下外边距之和

注意:

​ 1、宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（ img 标签和 input除外）。

​ 2、计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况

盒子模型布局稳定性

按照 优先使用 宽度 （width） 其次 使用内边距（padding） 再次 外边距（margin）。

原因：

1. margin 会有外边距合并 还有 ie6下面margin 加倍的bug 所以最后使用。

2. padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。

3. width 没有问题

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

1. 前两个属性是必须写的。其余的可以省略。
2. 外阴影 (outset) 但是不能写    默认      想要内阴影  inset 
3. 取值为 正整数

浮动float

标准流:

​ 又叫, 普通流, 文档流.

​ 当一个页面元素的排版从上到下, 从左到右依次排序, 快元素会独占一行, 行内元素会在一行, 的时候就叫普通流

元素的浮动是指设置了浮动属性的元素会脱离标准流, 移动到其父元素的中指定的位置

选择器 {float:属性值;}

取值:
	left 元素向左浮动
	right: 元素向右浮动
	none: 元素不浮动(默认值)

浮动的特性

1. 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。

2. 当两个块元素浮动时, 会并排显示, 加了浮动的元素,不占位置, 位置将会留出来给标准流的元素

3. 元素浮动后具有行内块元素的特性

清除浮动

​ 有两个元素是嵌套关系, 父元素没有高度, 子元素浮动了, 父元素的高度会显示0

方法一

选择器{clear:属性值;}

取值:
	left:	清除左边的浮动影响
	right:	清除右边浮动的影响
	both:	同时清除两边的浮动影响

方法二

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如

，或则其他标签br等亦可。

优点： 通俗易懂，书写方便

缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

方法三: overflow

可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

方法四: 使用after伪元素清除浮动

 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 专有 */

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

方法五: 使用before和after双伪元素清除浮动

使用方法：

.clearfix:before,.clearfix:after { 
  content:".";
  display:table;
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

定位position

将元素定在某个位置就是定位

元素的定位属性主要包括定位模式和边偏移两部分。

1、边偏移

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左侧偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

也就说，以后定位要和这边偏移搭配使用了， 比如 top: 100px; left: 30px; 等等

2、定位模式

在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：

选择器{position:属性值;}

position属性的常用值

值	描述
static	自动定位（默认定位方式）
relative	相对定位，相对于其原文档流的位置进行定位
absolute	绝对定位，相对于其上一个已经定位的父元素进行定位
fixed	固定定位，相对于浏览器窗口进行定位

静态定位static

​ 恢复标准流, left,right等都不能使用, 是默认值

相对定位relative

​ 配置后在标准流的位置还在, 元素相对于该位置定位

绝对定位absolute

​ 配置后不会保留原先的位置, 元素会根据父元素定位, 如果父元素没有定位, 会根据浏览器定位, 浏览器滑动, 定位元素也会跟着滑动, 一直保持这个距离

固定定位fixed

​ 固定定位的元素跟父亲没有任何关系，只认浏览器。

​ 固定定位完全脱标，不占有位置，不随着滚动条滚动。

叠放次序z-index

多个元素定位时, 可能会层叠覆盖掉其他的元素,

z-index=1;
取值为数值,  正整数, 或负整数

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。

2. 如果取值相同，则根据书写顺序，后来居上。

3. 后面数字一定不能加单位。

4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

四种定位总结

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置

定位模式转换

跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，

元素的显示与隐藏

display 显示

display 设置或检索对象是否及如何显示。

display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： 隐藏之后，不再保留位置。

visibility 可见性

设置或检索是否显示对象。

visible : 　对象可视

hidden : 　对象隐藏

特点： 隐藏之后，继续保留原有位置。（停职留薪）

overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 　不剪切内容也不添加滚动条。

auto : 　 超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条

CSS用户界面样式

鼠标样式cursor

设置鼠标样子

cursor :  default  正常 | pointer  小手  | move  移动  |  text  文本

轮廓 outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline : outline-color outline-style  outline-width 

防止拖拽文本域resize

resize：none 这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域

vertical-align 垂直对齐

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， 通常用来控制图片和表单等。

vertical-align : baseline |top |middle |bottom 

baseline: 文字和图片基线对齐

middle: 文字和图片中间对齐

top: 文字和图片头部对齐

去除图片底侧空白缝隙

如果一个元素没有基线，比如图片或者表单等行内块元素，则他的底线会和父级盒子的基线对齐。 这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决方法:

​ 1, 给img vertical-align:middle | top等等。 让图片不要和基线对齐。

​ 2, 给img 添加 display：block; 转换为块级元素就不会存在问题了。

css精灵技术

CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去，然后将大图应用于网页，这样，当用户访问该页面时，只需向服务发送一次请求，网页中的背景图像即可全部展示出来

将图标生成兼容性字体文件包

推荐网站： http://icomoon.io

阿里巴巴矢量图库

http://www.iconfont.cn/

fontello

http://fontello.com/

在线定制你自己的icon font字体图标字库，也可以直接从GitHub下载整个图标集，该项目也是开源的。

Font-Awesome

http://fortawesome.github.io/Font-Awesome/

字库 目前已经有369个图标了。

Glyphicon Halflings

http://glyphicons.com/

这个字体图标可以在Bootstrap下免费使用。自带了200多个图标。

Icons8

https://icons8.com/

提供PNG免费下载，像素大能到500PX

图标使用

1. 输入阿里矢量图库地址

2. 搜索自己需要的的图标

3. 点击放入购物车
   

   3.点击购物车
   
   ​ 4.下载代码
   

​

​ 5.解压文件包, 将括号中的文件复制到需要的项目中

​ 6.打开index.html文件

​ 7.查看使用教程

滑动门

设置文本背景时, 文本长度不一样, 背景需要更改, 不想更改的情况下使用该技术

核心技术就是利用CSS精灵（主要是背景位置）和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的：

<li>
  <a href="#">
    <span>导航栏内容</span>
  </a>
</li>

li {
    float: left;
    height: 33px;
    line-height: 33px;
    background: url(img/ao.png); /*设置为背景图片 */
    padding-left: 15px; 
    margin: 0 10px;
}

a {
    display: inline-block;
    height: 33px;
    background: url(img/ao.png) no-repeat right top; /*给a标签也设置背景*/
    padding-right: 15px; /*将右边补齐*/
}

伸缩布局(CSS3)

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向

侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多

2、各属性详解****

a、flex-direction调整主轴方向（默认为水平方向）

b、justify-content调整主轴对齐

c、align-items调整侧轴对齐

d、flex-wrap控制是否换行

e、align-content堆栈（由flex-wrap产生的独立行）对齐

f、flex-flow是flex-direction、flex-wrap的简写形式

g、flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

h、order控制子项目的排列顺序，正序方式排序，从小到大

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值

过渡(CSS3)

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。

语法格式:

transition: 要过渡的属性  花费时间  运动曲线  何时开始;

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

运动曲线示意图：

img {
  width:80px; height: 80px; border:8px solid #ccc; border-radius: 50%;
  transition:transform 0.5s ease-in 0s;
}
img:hover {
  transform:rotate(180deg);
}

2D变形(CSS3)

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

变形转换 transform

• 移动 translate(x, y)

translate(50px,50px);

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

可以改变元素的位置，x、y可为负值；

 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
 translateX(x)仅水平方向移动（X轴移动）
 translateY(Y)仅垂直方向移动（Y轴移动）

缩放 scale(x, y)

transform:scale(0.8,1);

可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。

scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)元素仅水平方向缩放（X轴缩放）
scaleY(y)元素仅垂直方向缩放（Y轴缩放）

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大

旋转 rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针；

transform:rotate(45deg);

1. 当元素旋转以后，坐标轴也跟着发生的转变
2. 调整顺序可以解决，把旋转放到最后
3. 注意单位是 deg 度数

倾斜 skew(deg, deg)

transform:skew(30deg,0deg);

该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

transform-origin可以调整元素转换的原点

 div{transform-origin: left top;transform: rotate(45deg); }  /* 改变元素原点到左上角，然后进行顺时旋转45度 */    

3D变形

rotateX() 就是沿着 x 立体旋转.(翻转)

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}

rotateY()沿着y轴进行旋转(翻转)

img {
  transition:all 0.5s ease 0s;
}
img:hove {

  transform:rotateX(180deg);
}

rotateZ()沿着z轴进行旋转(翻转)

img {
  transition:all .25s ease-in 0s;
}
img:hover {
  /* transform:rotateX(180deg); */
  /* transform:rotateY(180deg); */
  /* transform:rotateZ(180deg); */
  /* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}

透视(perspective)

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective有两种写法

1. 作为一个属性，设置给父元素，作用于所有3D转换的子元素
2. 作为transform属性的一个值，做用于元素自身

理解透视距离原理：

开门案例

body {
}
.door {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  border: 1px solid gray;
  perspective: 1000px;
  background: url('images/dog.gif') no-repeat center/cover;
  position: relative;
}
.door > div {
  box-sizing: border-box;
  border: 1px solid black;
}
.left {
  float: left;
  width: 50%;
  height: 100%;
  background-color: brown;
  transform-origin: left center;
  transition: 1s;
  position: relative;
}
.left::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  right: 0px;
  transform: translateY(-10px);
  border: 1px solid whitesmoke;
}
.right {
  width: 50%;
  height: 100%;
  float: left;
  background-color: brown;
  transform-origin: right center;
  transition: 1s;
  position: relative;
}
.right::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  top: 50%;
  left: 0px;
  transform: translateY(-10px);
  border: 1px solid whitesmoke;
}
.door:hover .left {
  transform: rotateY(-130deg);
}
.door:hover .right {
  transform: rotateY(130deg);
}

translateX(x)

仅水平方向移动**（X轴移动）

主要目的实现移动效果

translateY(y)

仅垂直方向移动（Y轴移动）

translateZ(z)

transformZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，我相信你正常情况下，是看不到自己的后脑勺的。

3D呈现（transform-style）

设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为转换原素。

flat：所有子元素在 2D 平面呈现

preserve-3d：保留3D空间

3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。

一般而言，该声明应用在3D变换的兄弟元素们的父元素上。

翻转盒子案例(百度钱包)

body {
  margin: 0;
  padding: 0;
  background-color: #B3C04C;

}

.wallet {
  width: 300px;
  height: 300px;
  margin: 50px auto;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.5s;
}

.wallet::before, .wallet::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(./images/bg.png);
  background-repeat: no-repeat;
}

.wallet::before {
  background-position: right top;
  transform: rotateY(180deg);
}

.wallet::after {
  background-position: left top;
  transform: translateZ(2px);
}

.wallet:hover {
  transform: rotateY(180deg);
}

动画(CSS3)

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

语法格式：

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r

@keyframes 动画名称 {
  from{ 开始位置 }  0%
  to{  结束  }  100%
}

animation-iteration-count:infinite;  无限循环播放
animation-play-state:paused;   暂停动画"