1. CSS 样式表的使用方式
(1). 内联方式，又称为行内样式，将样式定义在某 html 元素中(style 属性中)
语法:
<div style="color:red;font-size:24px;">
内容部分
</div>
(2). 内部样式表，以独立的方式，定义页面元素的样式(元素与样式相分离)，并且能够让样式应用在多个元素中(提升可重用性和可维护性)
语法:
<head>
<style>
p{
color:red;
background-color:yellow;
font-size:24px;
}
</style>
</head>
(3). 外部样式表，将样式定义在外部独立的 css 文件中(*、css)，哪个页面想使用，可以引入css 文件
语法:
<head>
<link rel="stylesheet" href="文件 URL">
</head>
2. CSS 语法规范
(1). 继承性，大部分的样式属性是可以被继承的
(2). 层叠性，可以为一个元素定义多个样式规则或样式声明,只要样式声明不冲突时,那么所有的样式声明都可以应用到元素上
(3). 优先级，层叠性基础上，如果样式声明冲突的话，则按照样式规则的优先级来进行样式的使用
低=>浏览器缺省设置(User Agent)
中=>内部样式表 或 外部样式表 ，内部样式表中就近原则，即后定义者优先
高=>内联方式
(4). !important 规则，显示调整样式属性的优先级
语法: 属性:值 !important;
3. 选择器(重点)，规范页面中哪些元素能够使用声明好的样式，起始选择器也是为了匹配页面中的元素
(1). 通用选择器，匹配页面中所有的元素，效率低
语法:*{样式声明;}
(2). 元素选择器，匹配指定标记的元素
语法:标记名{样式声明;}，如 div{color:red;}
(3). 类选择器(重点)，允许被任何一个元素的 class 属性进行引用的选择器
语法: .类名{样式声明;} ，引用：<标记 class="类名"></标记>
注意:类名允许包含字母，数字、-、 _ 、，不允许以数字开头
(4). 多类选择器，多类选择器的引用方式，允许一个元素同时引用多个选择器
语法:<标记 class="class1 class2 class3">
(5). 分类选择器，允许将元素选择器和类选择器放在一起进行声明定义，以便达到对某种元素中不同样式的细分控制
语法:元素选择器、类选择器{样式声明;}
div.redColor{
margin:0;
padding:0;
list-style:none;
}
(6). id 选择器，与元素 id 相关，专门定义指定 id 值的元素的样式
语法：#idName{样式声明;}，
引用：<标记 id="idName"> </标记>
(7). 群组选择器，将多个选择器放在一起，统一声明样式
语法:选择器 1,选择器 2,选择器 3{ }
#top，redColor ，span，heavy ，div，important{
color:blue;
}
等同于:
#top{color:blue;}
.redColor{color:blue;}
span{color:blue;}
heavy{color:blue;}
div.important{color:blue;}
(8). 后代选择器，不限制层级关系的元素(出现在某元素中的)，称之为后代
语法:选择器 1 选择器 2{ }
div span{
/*div 中所有的 span*/
}
#d1 span{
/*id 为 d1 元素中所有的 span */
}
#d1 .span1{
/*id 为 d1 中的 所有的 class 为 span1 的元素*/
}
(9). 子代选择器，只具备一层层级关系的元素，称之为子代
语法:选择器 1>选择器 2>选择器 3{ }
div>span>i{
/*匹配 div 中 span 中 i 元素*/
}
#d1>span >i{
/*匹配 id 为 d1 中 span 中的 i 元素*/
}
(10). 伪类选择器，匹配元素不同状态的、
语法:伪类{ }、a:伪类{ }、#d1:伪类{ }
①. 链接伪类
A. link 适用于未被访问的链接的状态
B. visited 适用于访问过的链接的状态
②. 动态伪类
A . hover 适用于鼠标悬停在元素上的状态
B . active 适用于元素被激活时的状态
C . focus 适用于元素获取焦点时的状态
③. 目标伪类
④. 元素状态伪类
⑤. 结构伪类
⑥. 否定伪类
注意:自定的选择器中的样式永远都会覆盖继承的样式(不看权值)
4. CSS 尺寸单位
(1). %
(2). in 英寸 1in = 2、54cm
(3). cm 厘米
(4). mm 毫米
(5). pt 磅 1pt = 1/72in 多用于文字大小的描述
(6). px 像素 1024px * 768px
(7). em 倍数，1em 相当于父元素默认大小
(8). rem 相对于根元素(html)设置的字体大小来指定倍数
5. 颜色单位(取值)
(1). rgb (r,g,b)
r:red , 0~255
g:green ,0~255
b:blue ,0~255
color:rgb(128,12,6)
(2). rgb(r%,g%,b%)
(3). rgba(r,g,b,alpha) alpha : 透明度 0~1 之间的数字
(4). #rrggbb，通过 6 位 16 进制数字表示一种颜色，每位数字的范围：0-9 ，A-F
(5). #rgb #rrggbb 的缩写形式，只有在每两位数字相同的情况下可以使用简写，如:#ff0000 -> #f00 #ffaacd -> 无简写
(6). 颜色的英文表示法
6. 尺寸属性，设置元素的宽度和高度，取值单位一般为 px 或 %
(1). width 宽度
max-width 最大宽度
min-width 最小宽度
(2). height 高度
max-height 最大高度
min-height 最小高度
(3). 页面中哪些元素允许修改尺寸
A. 所有的块级元素都能修改尺寸
div p pre h1~h6 ulli ol dl dt dd
B. 大部分行内块元素允许修改尺寸，input 元素为行内块元素允许修改尺寸，但是 radio和 checkbox 除外
C. 小部分行内元素允许修改尺寸，html 元素中本身就具备 width 和 height 属性的行内元素允许修改尺寸，否则不能改，如:img
7. 溢出，当使用尺寸属性限制元素大小时，如果内容所需的空间大于元素本身空间，则会产生溢出的效果
(1). overflow:溢出处理
overflow-x:横向溢出处理
overflow-y:纵向溢出处理
(2). 属性
A. visible 默认值，溢出可见
B. hidden 溢出隐藏
C. scroll 滚动，默认显示滚动条，内容溢出时，滚动条可用
D. auto 自动，只有在溢出的方向才会显示滚动条
8. border 边框属性，通过一个属性设置四个方向边框的 宽度、样式、颜色，为元素设置边框后，元素的占地面积会发生更改
语法: border:width style color；如 border:1px solid red；
(1). width:边框宽度，以 px 为单位
(2). style:边框样式
solid:实线
dotted:点状虚线
dashed:线状虚线
(3). color:边框颜色，取值为颜色值或透明
(4). border:none 取消边框
9. border 只设置一个方向的边框
(1). 单方向设置，只设置某一条边的 宽度，样式，颜色
语法:border-方向:width style color；
方向:top/right/bottom/left
(2). 单属性设置，只设置某一条边相关属性
语法:border-属性:值；
属性:width/style/color
(3). 单边单属性设置，只设置某条边的某个属性值
语法:border-方向-属性:值；
方向:top/right/bottom/left
属性:width/style/color
10. border-radius 边框倒角
(1). 具体数值(px) 或 %
(2). 最少一个值，最多 4 个值
(3). border-top-left-radius:左上角倒圆角
border-bottom-right-radius:右下角倒圆角
11. box-shadow 边框阴影
语法:box-shadow：h-shadow v-shadow blur spread color inset;
(1). h-shadow:(必须)，阴影的水平偏移距离，取值为正，右偏移，取值为负，左偏移
(2). v-shadow:(必须)，阴影的垂直偏移距离，取值为正，下偏移，取值为负，上偏移
(3). blur:模糊距离，取值为数值
(4). spread :阴影的大小
(5). color :颜色
(6). inset :将默认的外阴影改为内阴影
12. outline 轮廓位于元素和边框之外的一条线
语法:outline:width style color;
(1). outline-width:宽度;
(2). outline-style:样式;
(3). utline-color:颜色;
(4). outline:none;无轮廓(常用)
13. 框模型(Box Model) ，框模型定义了元素框处理元素内容尺寸、内边距、边框和外边距的一种方式 ,元素一旦增加框模型对应属性的属性，那么实际的占地区域会发生改变元素的实际宽度=左右外边距 左右边框 左右内边距 width；元素的实际高度=上下外边距 上下边框 上下内边距 height；
(1). margin 外边距，围绕在元素边缘周围的空白区域，默认不能被其他元素所占据，作用是拉伸两个元素间的距离，页面中具备默认外边距的元素
语法:margin:value; 四个方向外边距的值
margin:v1 v2; v1 上下外边距 v2 左右外边距
margin:v1 v2 v3; v1 上外边距 v2 左右外边距 v3 下外边距
margin:v1 v2 v3 v4; v1 上外边距 v2 右外边距 v3 下外边距 v4 左外边距
margin-方向:value；方向：top/right/bottom/left
①. px 像素值
②. % 百分比
③. 负值
④. auto 自动 ,由浏览器计算外边距的值应该是多少，默认情况下，auto 只对左右有效，上下无效，为块级元素设置宽度后，再设置其左右外边距为 auto，该元素能水平居中显示。
⑤. 特殊注意
A. 当两个垂直外边距相遇时，将合并成一个
B. 大部分行内元素垂直外边距无效 ，img 允许设置
C. 行内块元素设置垂直外边距，该行的所有元素都跟着变
D. 外边距的溢出, 特殊场合下，为子元素设置外边距(上下)会作用到父元素上
特殊场合：
a. 父元素没有边框(上下)
b. 为第一个(最后一个)子元素设置外边距
解决方案：
a. 为父元素增加边框(透明的)，弊端：父元素会变高
b. 可以为父元素设置上内边距来取代子元素上外边距，弊端：父元素高度会变高
c. 为父元素增加一个空子元素<table></table>，弊端：多一个子元素
(2). padding 内边距 内容区域和边框(边缘)之间的距离，内边距会扩大边框所占用的区域
语法: padding: value；四个方向内边距的值
padding:v1 v2；v1 上下内边距 v2 左右内边距
padding:v1 v2 v3；v1 上内边距 v2 左右内边距 v3 下内边距
padding:v1 v2 v3 v4；v1 上内边距 v2 右内边距 v3 下内边距 v4 左内边距
padding-方向:值；方向：top/right/bottom/left
①. px 像素值
②. % 百分比
③. auto
④. 特殊注意，为行内元素增加上下内边距时，只影响自己，并不影响其他元素
(3). box-sizing 重新指盒模型尺寸大小
占地宽度 = margin border padding width
可见宽度 = border padding width
①. content-box 默认值，width 只表示内容区域的宽度，border 和 padding 额外进行计算
可见宽度=border padding width
②. border-box，width 包含边框内所有的距离(padding,border)
可见宽度=width(border padding width)
14. 背景
(1). background-color 背景颜色
语法:background-color：颜色值 或 transparent
注意:背景颜色从边框位置处开始绘制
(2). background-image 背景图像
语法:background-image :url(背景图 url)
(3). background-repeat 背景重复
①. repeat 默认值，即横向又纵向平铺
②. repeat-x 只在横向平铺
③. repeat-y 只在纵向平铺
④. no-repeat 不平铺
(4). background-size 背景图片尺寸
语法: background-size : value1 value2
①. value1 value2 指定背景图像宽度和高度
②. value1% value2% 采用当前元素宽和高的占比，来作为背景图大小
③. cover 覆盖，会将背景图像等比放大，直到背景图完全覆盖到元素为止
④. contain 包含，会将背景图像等比放大，直到右边或下边碰到元素边缘为止
(5). background-attachment 背景图片固定
语法:background-attachment :value
①. scroll 滚动，默认值
②. fixed 固定，让背景图一直在可视化区域中
(6). background-position 背景图片定位
语法: background-position:value
①. x y 指定背景图水平和垂直偏移距离
x : 水平偏移距离，取值为正，背景图右偏移，取值为负，背景图左偏移
y : 垂直偏移距离，取值为正，背景图下偏移，取值为负，背景图上偏移
②. x% y% 指定背景图相对模型大小的百分比位置
③. 关键字
x :left / center / right
y : top / center/ bottom
(7). 在一个 background 属性中声明所有的背景属性值
background:color url repeat attachment position;
(8). CSS Sprites(精灵图/雪碧图)
15. background-image 渐变
(1). linear-gradient 线性渐变
语法:background-image:linear-gradient（angle,color-point1,color-point2,……)
①. angle 为第一个参数，指定渐变的方向，可以是角度值，也可以是关键词，如 to top(对应 0 deg)，to right (对应 90 deg)，to bottom (对应 180 deg)，to left (对应 270 deg)
②. color-point 表示颜色的起始点、中间点或者是结束点，取值为颜色和和位置的组合，如 red 0%、green 50%，也可以(to top,red,green,blue)让系统指定色标的位置
(2). radial-gradient 径向渐变
语法:background-image:radial-gradient（[size at position],color-point1,color-point2,……）
①. size at position:size 为渐变区域，at 为特定的介词，position 指定渐变圆心的渐变位置，默认为 center，可以取值为:数值、百分比、或者关键字，如(200px at left top ,red,blue)此参数可以省略
②. color-point 表示颜色的起始点、中间点或者是结束点，取值为颜色和和位置的组合，如 red 0%、green 50%
(3). repeating-linear-gradient 重复线性渐变
语法:background-image:repeating-linear-gradient（angle,color-point1,color-point2,……)
(4). repeating-radial-gradient 重复径向渐变
语法:background-image:repeating-radial-gradient（[size at position],color-point1,color-point2,…)
(5). 浏览器兼容性问题,主流浏览器都支持渐变,对于不支持的浏览器，需要添加浏览器前缀的方式实现兼容性,相关前缀如下
①. Firefox:-moz-
②. Chrome 和 Safari :-webkit-
③. Opear :-o-
④. Microsoft IE :-ms-
如果浏览器不支持属性的话，则将前缀添加到属性名称前，如下所示:
①. -moz-aniamtion:值
②. -webkit-aniamtion:值
③. -o-aniamtion:值
④. -ms-animation:值
如果浏览器支持属性，但不支持属性值的话，则将前缀添加到属性值前，如下所示:
①. background-image:-moz-linear-gradient( )
②. background-image:-webkit-linear-gradient( )
③. background-image:-o-linear-gradient( )
④. background-image:-ms-linear-gradient( )
16. font-family 设定字体样式
语法:font-family:value1,value2
注意:字体中包含中文或特殊字符的话，尽量使用 "" 引起来，浏览器在加载的时候会默认以第一种为首选，如果没有第一种，则依次往后加载
17. font-size 设定字体小
语法:font-size:value (单位为 px 或 pt)
18. font-weight 字体加粗
语法:font-weight:value
①. normal 非加粗显示，正常体
②. bold 加粗显示,类似于<b></b>
③. 400 ~ 900 其中 400 相当于 normal ,900 相当于 bold，而且取值只能以整百为准
19. font-style 字体样式
语法:font-weight:value
①. normal 正常体
②. italic 斜体 类似于<i></i>
20. font-variant 小型大写字符
语法:font-variant:value
①. normal 正常，默认值
②. small-caps 小型大写字符
21. font 字体属性 用于把所有针对字体的属性设置在一个声明中
语法:font:font-style font-variant font-weight font-size font-family
注意:该简写属性中，必须包含 family 的值，不设置的值，则使用默认的设置
22. color 文体颜色
语法:color:value
23. text-align 文本排列
语法:text-align:value
①. left
②. center
③. right
④. justify(两端对齐)
24. text-decoration 文本修饰
语法:text-decoration:value
①. none 无线条修饰
②. underline 显示下划线
③. line-through 显示删除线，相当于<s></s>
④. overline 显示上划线
25. line-height 一行数据的高度
语法:line-height:value
①. 50px 字体大小
②. 1.5 当前字体大小的倍数
注意:文字将在指定行高的范围内垂直居中显示
26. text-indent 首行文本缩进
语法:text-indent:value
①. 4px 字体大小
27. text-shadow 文本阴影
语法:text-shadow: h-shadow v-shadow blur color
①. h-shadow 阴影水平的偏移距离，正值向右偏移，负值向左偏移
②. v-shadow 阴影垂直的偏移距离，正值向下偏移，负值向上偏移
③. blur 是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将其值设置为 0
④. color 指阴影的颜色
28. padding 设置表格内边距
语法:padding:value
29. margin 设置表格外边距
语法:margin:value
注意:不能为 td 设置外边距
30. width 设置表格的宽度
语法:width:value
31. height 设置表格的宽度
语法:height:value
32. font-*、text-*、line-height、color 文本格式化属性
33. background 设置背景颜色 图片 渐变、
34. border 设置边框
35. vertical-align 垂直方向对齐
语法:vertical-align:value
①. top
②. middle
③. bottom
36. border-collapse 边框合并
语法:border-collapse:value
①. separate 默认值
②. collapse 合并
37. border-spacing 边框边距
语法:border-spacing:value
①. 指定 1 个值，每个单元格的水平和垂直间距相同
②. 指定 2 个值，第一个值，表示水平间距 ，第二个值，表示垂直间距
注意:此命令类似于 cellspacing，必须保证 border-collapse 是 separate 时才有效
38. caption-side 标题位置
语法:caption-side:value
①. top 标题位于表格上方，为默认值
②. bottom 标题位于表格下方
39. table-layout 显示规则，指定浏览器如何来布局一张表格
语法:table-layout:value
(1). auto 自动，即自动表格布局为默认值，列的宽度高度是由内容来决定
(2). fixed 固定，即固定表格布局，列的宽度和高度由设定的值决定
(3). 自动表格布局 VS 固定表格布局
①. 自动表格布局
A. 单元格的大小会适应内容
B. 表格复杂时，加载速度较慢(缺点)
C. 适用于不确定每列大小时使用
D. 特别灵活(优点)
②. 固定表格布局
A. 尺寸取决于设定的值，与单元格内容无关
B. 任何情况下，都会加速显示表格(优点)
C. 不够灵活(缺点)
③. 推荐:复杂的布局不能使用 table，简单显示数据的布局可以使用 table
40. 定位，改变元素在网页中的默认位置，按照定位效果，可以分为以下几种方式：
(1). 普通流定位/文档流定位
(2). 浮动定位
(3). 相对定位
(4). 绝对定位
(5). 固定定位
41. 普通流定位，又称为文档流定位，网页元素默认定位方式
(1). 页面中所有元素都有自己的位置
(2). 按照从左到右，从上到下的方式排列
(3). 块级元素，从上到下排列
(4). 行内/行内块，从左到右排列
42. 浮动定位
(1). 语法:float:value
①. none 默认值，即无任何浮动
②. left 元素左浮动，停靠在父元素的左边或其他已浮动元素的右边上
③. right 元素右浮动，停靠在父元素的右边或其他已浮动元素的左边上
(2). 浮动定位特点
①. 会排除在文档流之外即"脱离文档流"，不再占据页面空间，后续元素则上前补位
②. 浮动元素只在当前行内浮动
③. 浮动元素会停靠在父元素的左边或右边或其他已浮动元素的边缘上
④. 浮动元素依然位于父元素之内
⑤. 解决问题-多个块级元素在一行内的显示问题
(3). 浮动引发的特殊效果
①. 当父元素容纳不下所有已浮动子元素，最后一个将换行显示(有可能被卡住)
②. 元素一旦浮动起来后，宽度将变成自适应(非手动指定情况下)
③. 元素一旦浮动起来后，都将变成块级元素
块级:允许修改尺寸，允许设置上下 margin
行内元素:不能改尺寸，不能设置上下 margin
④. 行内块元素，文本采用的是环绕的排列方式，无法被浮动元素压在底下
43. Clear 清除浮动，清除当前元素前面元素浮动所带来的影响，清除浮动影响后，当前元素不会上前占位
语法:clear:value
(1). none 默认值，无清除效果
(2). left 清除当前元素前面元素左浮动带来的影响
(3). right 清除当前元素前面元素右浮动带来的影响
(4). both 清除当前元素前面元素任何一种浮动方向所带来的影响
44. 浮动元素为父元素高度带来的影响，父元素的高度是以未浮动的子元素高度为准，如果一个元素中所有的子元素全部都是浮动的，那么该父元素的高度为 0，解决父元素的高度问题方案：
(1). 直接设置父元素高度，
弊端:必须知道父元素的高度
(2). 让父元素也浮动
弊端:对后续元素会产生影响
(3). 为父元素增加溢出处理属性
属性:overflow
取值:hidden 或 auto
弊端:要溢出显示的内容，也一同被隐藏
(4). 在父元素中，增加空子元素到最后一个位置处,并且设置其 clear 属性为 both
弊端:多一个子元素在页面上
45. position:relative 相对定位，元素会相对于它原来的位置偏移某个距离，以实现元素位置微调，元素原来所占的空间会被保留
语法:position:relative :value
(1). top 顶部偏移距离(px)
(2). bottom 底部偏移距离(px)
(3). left 左边偏移距离(px)
(4). right 右边偏移距离(px)
46. position:absolute 绝对定位
语法：position:absolute：value
(1). top 顶部定位距离(px)
(2). bottom 底部定位距离(px)
(3). left 左边定位距离(px)
(4). right 右边定位距离(px)
(5). 绝对定位的特点:
①. 绝对定位的元素会脱离文档流即不占据页面空间
②. 绝对定位的元素会相对于离它最近的已定位的祖先元素去实现定位
③. 如果没有已定位的祖先元素，那么就会相对于最初的包含块去实现定位比如 body 或html
④. 绝对定位元素会变成块级元素
⑤. 绝对定位元素的 margin 可以使用，默认情况下，auto 会失效
47. position 定位属性，改变元素定位方式
语法: position:value
(1). static 静态的，默认值
(2). relative 相对的
(3). absolute 绝对的
(4). fixed 固定定位
注意：relative，absolute，fixed 被称之为 "已定位元素"
48. z-index 堆叠顺序，在已定位元素中调整堆叠顺序
语法:z-index:value
取值为无单位的数字，数值越大，显示越靠前，默认是 0，可以取负值，当前元素在页面所有内容之下
(1). 只有已定位元素才能设置 z-index
(2). 默认的堆叠顺序是后来者居上
(3). 父子元素中，永远都是子压在父上，是不受 z-index 影响的
49. display 显示方式
语法:display:value
(1). none 将指定的元素不显示 并且不占据页面空间(脱离文档流)
(2). block 将指定的元素显示为块级
(3). inline 将指定的元素显示为行内
(4). inline-block、 将指定的元素显示为行内块，行内块特点：
①. 多个元素能够在一行内显示
②. 允许修改尺寸
(5). table 将指定的元素显示为 table，实现任意行垂直居中
50. visibility 显示效果，规范元素可见性
语法:visibility:value
(1). visible 元素 默认值
(2). hidden 元素不可见，但是占据页面空间
(3). collapse 用在表格元素上，删除一行或一列时，不影响表格整体布局
51. display:none 和 visibility:hidden 区别
(1). display:none 脱离文档流，所以不占据页面空间
(2). visibility:hidden 只是改变可见性，并不脱离文档流，空间依然占据
52. opacity 改变元素的透明度
语法:opacity:value
取值:从 0、0(完全透明) ~ 1、0(完全不透明) 之间的数字
53. vertical-align 垂直对齐
语法:vertical-align:value
(1). top 顶端对齐
(2). middle 中间对齐
(3). bottom 底部对齐
(4). baseline 基线对齐
(5). 运用场合
①. 在 td 中，设置文本的垂直对齐方式
②. 设置行内块元素两边文本的垂直对齐方式
③. 设置图片两端文本垂直对齐方式
54. cursor 光标，改变鼠标在页面(元素)中的状态
语法:cursor :value
(1). default
(2). pointer 小手
(3). crosshair
(4). text 文本状态 I
(5). wait 等待
(6). help 帮助
55. list-style 列表属性
语法: list-style:type url position
常用方式：list-style:none
56. list-style-type 列表项标识
语法:list-style-type:value
(1). none 无标识
(2). disc 实心圆
57. list-style-image 列表项图像
语法:list-style-image :url(图像的地址)
58. list-style-position 列表项标识位置
语法:list-style-position:value
(1). outside 默认值，列表项标识的默认位置是在内容区域之外
(2). inside 将列表项标识的位置改为内容区域之内
59. CSS Reset (CSS 重写)，修改元素的默认样式
body,p,h1,h2,h3,h4,h5,h6,pre,ul,ol,dl,dd{
margin:0;
padding:0;
list-style:none;
}
60. 复杂选择器
(1). 兄弟选择器 通过兄弟级别的位置关系来匹配页面元素，注意：兄弟选择器只能向后找，不能向前找
①. 相邻兄弟选择器，通过相邻(紧紧挨着)位置关系匹配元素
语法:选择器 1 选择器 2
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
A. div p :匹配 div 后面 p 元素的内容
B. #top 、important :匹配 id 为 top 元素后面 class 为 important 的元素
②. 通用兄弟选择器，用于匹配某元素后面所有的兄弟元素
语法:选择器 1~选择器 2
A. #d1~div:匹配 id 为 d1 元素后面所有的 div 元素
B. #box~p:匹配 id 为 box 元素后面所有的 p 元素
(2). 属性选择器 通过元素所附带的属性及其值来匹配页面中的元素
①. 基础属性选择器
语法:[attr]
语义:匹配页面中所有附带 attr 属性的元素
A. [id] 匹配页面中所有附带 id 属性的元素
②. [attr1][attr2]
语义:匹配页面中同时附带 attr1 和 attr2 属性的所有元素
A. [id][class] 匹配页面中既有 id 属性又有 class 属性的所有元素
B. input[name][value] 匹配页面中既有 name 属性又有 value 属性的所有 input 元素
③. elem[attr]
elem 表示任意元素名称
attr 表示任意属性名称
语义:匹配页面中附带 attr 属性的 elem 元素
A. div[id] 匹配页面中所有附带 id 属性的 div 元素
B. input[name] 匹配页面中所有附带 name 属性的 input 元素
④. [attr=value]
语义:匹配页面中所有 attr 属性的值为 value 的元素
A. input[type=text] 匹配页面中所有的输入文本
⑤. [class~=value] 主要使用在多类选择器上
语义:匹配页面中 class 属性值列表中包含 value 选择器的元素
A. div[class~=redColor] 匹配 class 属性值列表中包含 redColor 独立选择器的 div 元素，如后面这个 div，<div class="important redColor blueBack"></div>
⑥. [attr^=value]
^= 以…作为开始
语义:匹配以 value 值作为开始的 attr 属性的元素
A. div[class ^= col] 匹配页面中 class 属性值是以 col 作为开始的 div 元素，如后面这个 div，<div class="col-sm-5"></div>
⑦. [attr$=value]
$= 以 … 作为结束
A. [class$="ant"] 匹配页面中 class 属性值是以 ant 作为结尾的元素
⑧. [attr*=value]
* 包含什么字符
语义:匹配 attr 属性值中包含 value 字符的所有元素
A. [class*=ac] 匹配 class 属性值中包含 ac 字符的所有元素
(3). 伪类选择器
①. 目标伪类 作用是突出显示活动的 HTML 锚元素
语法: :target
②. 结构伪类 通过元素之间的结构关系来匹配元素
A. :first-child 获取属于其父元素中的 首个子元素
a. td:first-child 获取属于每个 tr 中的第一个 td
b. #tbl td:first-child 获取 id 为 tbl 表格中每个 tr 中的第一个 td
B. :last-child 获取属于其父元素中的最后一个子元素
C. :nth-child(n) 获取属于其父元素中的第 n(数字)个子元素
注意:td:nth-child(1)等同于 td:first-child
D. :empty 匹配没有子元素(包含文本)的元素
a. <div><span></span></div>，<div >非 empty ，<span>是 empty
b. <div> </div>，<div>非 empty，有一个空格
c. <div></div>，<div>是 empty
E. :only-child 匹配属于其父元素中的唯一子元素
③. 否定伪类将匹配某选择器的元素排除出去
语法: :not(选择器)
A. #tbl tr:not(:first-child) 匹配 id 为 tbl 表格中除第一行以外的所有行
(4). 伪元素选择器
① . :first-letter 或 ::first-letter，作用:匹配某元素的首字符
②. :first-line 或 ::first-line，作用:匹配某元素的首行字符
③. ::selection ，作用:匹配用户选取的内容部分
(5). 伪类选择器和伪元素远择器
①. 伪类匹配元素不同的状态，伪元素匹配的是元素中的内容
②. 在 CSS 2.1 中，伪类选择器和伪元素选择器都是用 : 来表示
如:hover 、:active、 :first-line、:first-letter
在 CSS3 中，所有的伪类选择器用 : 表示，所有的伪元素选择器用 :: 表示
61. 内容生成，通过 css 动态的向某个元素的内容区域之前/之后增加一部分内容
(1). 伪元素选择器
①. :before 或 ::before，定位到元素的内容区域之前
②. :after 或 ::after，定位到元素的内容区域之后
(2). 属性:content
①. 普通文本
②. 图像 url(图像地址)
③. 计数器
(3). 语法
div:before{
content:"小明:";
color:#f00;
font-weight:bold;
margin-right:10px;
}
p:before{
content:"老王:";
display:block;
float:right;
}
(4). 解决的两个问题
①. 外边距溢出问题
外边距常规的解决方法:
A. 为父元素添加边框
B. 使用父元素的内边距，取代子元素的外边距
D. 在父元素的第一个或最后一个子元素位置处，增加一个空 table
用内容生成解决外边距的代码如下:
选择器:before{
content:""；
display:table；
}
②、解决浮动元素父元素的高度问题，代码如下:
.clear:after{
content:""；
display:block；
clear:both；
}
62. 弹性布局(Flexible Box)，可伸缩布局，为普通布局带来更大的灵活性
(1). 基本概念
①. flex 容器:简称容器，将元素设置为 Flex 容器后，其子元素允许实现灵活的位置摆放
②. flex 项目:简称项目，存放在 Flex 容器中的内容
(2). 语法 display:value
①. flex 将块级元素 变为 flex 容器
②. inline-flex 将元素变为行内flex 容器，容器的宽度为子元素的宽度
注意:将元素设置为 flex 布局之后，子元素的 float、clear、vertical-align 属性将失去作用
(3). 容器的属性，该组属性要添加在容器元素上，控制子元素的位置
#container{
display:flex;
flex-direction:row;
flex-wrap:wrap;
justify-content:space-around;
align-items:center;
align-content:space-between;
}
①. flex-direction 决定主轴(main-axsis)的方向
A. row 主轴为水平方向的轴，起点在容器左端，默认值
B. row-reverse主轴为水平方向的轴，起点在容器右端
C. column 主轴为交叉轴，起点在容器的顶端
D. column-reverse 主轴为交叉轴，起点在容器的底端
②. flex-wrap 当一条轴线(一行)排列不下时，子元素将如何换行
A. nowrap 默认值，不换行,窗口大小改变不换行
B. wrap 换行，第一行在上方,窗口大小改变会换行
C. wrap-reverse，第一行在下方, 窗口大小改变会换行
③. flex-flow direction 和 wrap 的缩写方式
A. row nowrap 默认值
B. direction wrap
如:flex-flow:column wrap-reverse
④. justify-content 定义项目在主轴上的对齐方式
A. flex-start 主轴起点对齐
B. flex-end 主轴终点对齐
C. center 居中对齐
D. space-between 两端对齐，项目之间的距离是相等的
E. space-around 每个项目两侧间距是相等的，注意:项目与项目之间的间隔，要比项目与父元素之间的间隔大一倍
F. space-evenly 所有的间隙距离平均分配
⑤. align-items 定义项目在交叉轴的对齐方式(单行项目有效)
A. flex-start 在交叉轴的起点对齐, 交叉轴为与主轴相反的轴
B. flex-end 在交叉轴的终点对齐, 交叉轴为与主轴相反的轴
C. center 在交叉中的中间对齐
D. baseline 基线对齐,以所有项目中的第一行文本为准
E. stretch 默认值，如果项目不设置高度或高度为 auto 时，那么项目将沾满整个容器的高度
⑥. align-content 定义了多跟轴线的对齐方式，如果项目只有一根轴线，该属性无效
A. flex-start 交叉轴起点对齐, 交叉轴为与主轴相反的轴
B. flex-end 与交叉轴的终点对齐, 交叉轴为与主轴相反的轴
C. center 与交叉轴的中间对齐, 交叉轴为与主轴相反的轴
D. space-between 与交叉轴两端对齐，轴线之间的间隔平均分布
E. space-around 每个轴线的两侧的间隔都相等。所以，轴线之间的间隔比轴线边框的间隔大一倍
F. stretch 默认值，轴线占满整个交叉轴
(4). 项目的属性 该组属性主要设置于项目中
①. order 定义项目的排列顺序，值越小越靠前,默认为0，取值要为整数,可为负数
②. flex-grow 指定项目的放大比例，取值整数，默认为 0，即不放大
③. flex-shrink 指定项目的缩小比例，取值整数，默认为 1，即空间不足时，等比缩小，取值 越大，容器大小改变时，缩小的越严重
注意:取值为 0，即不缩小
④. flex-basis 指定项目占据主轴的剩余空间大小，取值为数字
A. auto 为默认 即项目本身大小
B. length 自定义大小，可以跟width和height属性值一样，则项目占据固定空间
⑤. flex 是 flex-grow，flex-shrink，flex-basis 的简写模式，默认为 0 1 auto
A. auto 相当于 1 1 auto
B. none 相当于 0 0 auto
C. flex-grow [,flex-shrink,flex-basis]
⑥. align-self 作用：允许定义当个项目与其他项目不一样的交叉轴对齐方式(类似于 align-items)，能够覆盖 align-items 的效果
A. auto 默认值，使用 align-items 的值
B. flex-start
C. flex-end
D. center
E. base-line
F. stretch
(5). 弹性布局的另一种写法
①. 父元素：
display：-webkit-box;
-webkit-box-pack：center;
-webkit-box-align：center;
②. 子元素
-webkit-box-orient：horizontal/vertical;
-webkit-box-flex：1
(6). 弹性布局的兼容性写法
.container{
/* Chrome 4 , Safari 3.1, iOS Safari 3.2 */
display: -webkit-box;
/* Firefox 17- */
display: -moz-box;
/* Chrome 21 , Safari 6.1 , iOS Safari 7 , Opera 15/16 */
display: -webkit-flex;
/* Firefox 18 */
display: -moz-flex;
/* IE 10 */
display: -ms-flexbox;
/* Chrome 29 , Firefox 22 , IE 11 , Opera 12.1/17/18, Android 4.4 */
display: flex;
}
(7). 弹性布局的潜在问题
①. input与另一个元素作为子元素弹性布局时，另一元素的宽度如果是按份等分，那么input的宽度将不准确，解决方案是将另一元素的宽度设为固定宽度,如百度移动端
②. 弹性布局如果与浮动布局混用，会出现一些问题，解决方案是position:relative
③. 父元素的高度如果参照上级元素设为100%,那么在弹性布局时，子元素也参照父元素设为100%,子元素将无法显示，解决方案时将子元素设为固定高度
63. CSS Hack
IE6 之前无兼容性可言，IE6 之后 各个浏览器追求标准统一，开始支持标准
IE 的其他浏览器要向前兼容，所以出现各种模式
(1). 三种模式
①. 混杂模式、无标准可言，编写代码时，不写<!doctype>就是混杂模式，采用的是 IE5.5的内核进行渲染
②. 标准模式 、完全支持标准
③. 准标准模式、即支持标准代码，也同时向前兼容非标准代码
(2). 属性前缀
在 CSS 样式属性名称前加上一些只有特定浏览器才能识别的的 hack 前缀，如下表所示
(3). 选择器 Hack、在 CSS 选择器前加上一些只有某些特定浏览器才能识别前缀，如下所示
①. *前缀:IE6，比如*html
②. * 前缀:IE7，比如* html
(4). HTML 头部引用 Hack，即为 IE 条件注释，通过 html 的条件注释来判断浏览器版本，去执行不同的 CSS
语法：
<!--[if 条件 IE 版本]>
<![endif]-->
①. 相关判断条件
A. gt: greater than，选择条件版本以上的版本，不包含条件版本
B. lt: less than ，选择条件版本以下的版本，不包含条件版本
C. gte: greater than or equal，选择条件版本以上版本，包含条件版本
D. lte: less than or equal，选择条件版本以下版本，包含条件版本
E. ! :选择条件版本以外所有版本，无论高低
②. 语句示例
A. 只在 IE 下生效
<!--[if IE]>这段文字只在 IE 浏览器显示<![endif]-->
B. 只在 IE6 下生效
<!--[if IE 6]>这段文字只在 IE6 浏览器显示<![endif]-->
C. 只在 IE6 以上版本上生效
<!--[if gate IE6]>这段文字只在 IE6 以上(包括)版本 IE 浏览器上显示<![endif]-->
D. 只在 IE8 上不生效
<!-- [if ! IE 8]>这段文字在非 IE8 浏览器显示<![endif]-->
E. 非 IE 浏览器生效
<!--[if ! IE]>这段文字只在非 IE 浏览器显示<![endif]-->
F. IE6 浏览器上字体显示为红色
<div>
<!--[if IE6]>
<style>div {color:red;}</style>
<![endif]-->
一些文本
</div>
64. 转换 改变元素在页面中的形状、角度、大小，位置的一种效果，允许进行 2D 和3D 方向的转换、
(1). transform 转换属性，为元素应用 2D 或 3D 转换效果
①. none：没有任何转换效果
②. transform-function ：value 指定转换类型
A. translate( ) : 位移转换函数
B. skew( ) ：改变形状函数
注意：如果指定多个转换函数的话，中间用空格隔开
(2). transform-origin 转换原点，默认转换原点在元素中心处
①. 两个值，表示原点在 x 轴 和 y 轴上的位置
②. 三个值，表示原点在 x 轴 y 轴和 z 轴上的位置
(3). 2D 转换
①. 位移 改变元素在页面中的位置
语法：transform：value
A. translate(x) 改变元素在 x 轴的位置
x 取值为正向右移动
x 取值为负向左移动
B. translate(x，y) 改变元素在 x 和 y 轴的位置
x 取值为正向右移动
x 取值为负向左移动
y 取值为正向下移动
y 取值为负向上移动
C. translateX(x) 元素只在 x 轴上移动
D. translateY(y) 元素只在 y 轴上移动
②. 缩放 改变元素在页面中的大小
语法：transform：value
A. scale(value) 表示横向和纵向等比缩放
a. 原始大小:默认值 1
b. 放大：大于 1 的数值
c. 缩小：0~1 之间小数
B. scale(x,y) 改变元素在 x 和 y 轴的比例
C. scaleX(x) 改变元素在 x 轴的比例
D. scaleY(y) 改变元素在 y 轴的比例
③. 旋转 改变元素在页面上的角度，要根据转换原点实现转换效果
语法：transform：rotate(ndeg) || rotate(1turn),turn代表一圈
n 为旋转角度，n 取值为正顺时针旋转，n 取值为负逆时针旋转，旋转时元素的坐标轴也一同旋转
④. 倾斜改变元素在页面中的形状
语法：transform：value
A. skew(xdeg) 横向倾斜指定度数
x 取值为正 y 轴逆时针倾斜一定角度
x 取值为负 y 轴顺时针倾斜一定角度
B、skew(ydeg) 纵向倾斜度数
y 取值为正 x 轴顺时针倾斜一定角度
y 取值为负 x 轴逆时针倾斜一定角度
C. skewX(xdeg) x 轴单向倾斜一定角度
D. skewY(ydeg) y 轴单向倾斜一定角度
(4). 3D 转换
①. perspective 假定人眼到投射平面的距离，取值越大越远，取值越小越近，单位为 px
A. 该属性要放在 3D 转换元素的父元素上
B. 兼容性问题 Chrome 和 Safari 需要加前缀，如 -webkit-perspective:500px；
②. 旋转
语法：transform：value
A. rotateX(xdeg) 以 x 轴为中心轴旋转元素
X 取值为正顺时针旋转
X 取值为负逆时针旋转
B. rotateY(ydeg) 以 y 轴为中心轴旋转元素
Y 轴取值为正顺时针旋转
Y 轴取值为负逆时针旋转
C. rotateZ(zdeg) 以 z 轴为中心轴旋转元素
Z 轴取值为正顺时针旋转
Z 轴取值为负逆时针旋转
D. rotate3D(x，y，z，ndeg) 多个轴同时旋转时使用
X 、Y、Z,取值为 1，该轴参与旋转，如 rotate3D(1,1,1,45deg)
X 、Y、Z,取值为 0，该轴不参与旋转，如 rotate3D(1,0,0,45deg)
③. 位移 改变元素在 z 轴上的位置
语法：transform：translateZ(z)
④. transform-style 定义如何在 3D 空间中呈现被嵌套的元素
A. flat 默认值，子元素不保留其 3D 位置
B. preserve-3d，子元素将保留其 3D 位置(translateZ(z)必须)
65. 过渡 使得 CSS 属性值在一段时间内平缓变化的效果
(1). transition-property:属性名称 | all，指定哪个属性值在变化时使用过渡效果展示,允许设置过渡效果的属性如下:
①. 颜色属性
②. 渐变属性
③. 取值为数字的属性
④. 转换属性
⑤. visibility 属性
⑥. 阴影属性
(2). transition-duration：s | ms，指定过渡时长，取值为数值(1s=1000ms)
(3). transition-timing-function：指定过渡时间速度曲线函数(速率)
①. ease 默认值，慢速开始，快速变快，慢速结束
②. linear 匀速
③. ease-in 慢速开始，加速结束
④. ease-out 快速开始，减速结束
⑤. ease-in-out 慢速开始和结束，先加速再减速
(4). transition-delay：s | ms， 指定过渡的延迟时间
(5). transition：prop duration timing-fun delay；简写属性
transition：prop1 duration1 timing-fun1 delay1,prop2 duration2 多过渡效果
(6). 触发过渡
①. 将过渡编写在元素声明的样式中，由:hover、:active 等进行触发，即管去又管回
②. 将过渡编写在 :hover ，:active 伪类中，管去不管回
