2021年CSS 实用手册

1. CSS 样式表的使用方式

(1). 内联方式，又称为行内样式，将样式定义在某 html 元素中(style 属性中)

语法:

内容部分

</div>

(2). 内部样式表，以独立的方式，定义页面元素的样式(元素与样式相分离)，并且能够让样式应用在多个元素中(提升可重用性和可维护性)

语法:

<head>

<style>

color:red;

background-color:yellow;

font-size:24px;

}

</style>

</head>

(3). 外部样式表，将样式定义在外部独立的 css 文件中(*、css)，哪个页面想使用，可以引入css 文件

语法:

<head>

</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)设置的字体大小来指定倍数

想要CSS布局快速精通的可以上

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\ ul\li \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 取消边框

想要快速精通CSS布局和CSS3动画的,可以去

下载CSS练习工具,和看纯CSS的动画视频

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

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 下生效

B. 只在 IE6 下生效

C. 只在 IE6 以上版本上生效

D. 只在 IE8 上不生效

E. 非 IE 浏览器生效

F. IE6 浏览器上字体显示为红色

<div>

<!--[if IE6]>

<![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，指定哪个属性值在变化时使用过渡效果展示,允许设置过渡效果的属性如下:

①. 颜色属性

②. 渐变属性

③. 取值为数字的属性

1. CSS 样式表的使用方式

(1). 内联方式，又称为行内样式，将样式定义在某 html 元素中(style 属性中)

语法:

内容部分

</div>

(2). 内部样式表，以独立的方式，定义页面元素的样式(元素与样式相分离)，并且能够让样式应用在多个元素中(提升可重用性和可维护性)

语法:

<head>

<style>

color:red;

background-color:yellow;

font-size:24px;

}

</style>

</head>

(3). 外部样式表，将样式定义在外部独立的 css 文件中(*、css)，哪个页面想使用，可以引入css 文件

语法:

<head>

</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\ ul\li \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;无轮廓(常用)

(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 像素值

②. % 百分比

③. 负值

⑤. 特殊注意

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,……)

(2). radial-gradient 径向渐变

语法:background-image:radial-gradient（[size at position],color-point1,color-point2,……）

②. 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 清除当前元素前面元素任何一种浮动方向所带来的影响

(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

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). 弹性布局的潜在问题

②. 弹性布局如果与浮动布局混用，会出现一些问题，解决方案是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 下生效

B. 只在 IE6 下生效

C. 只在 IE6 以上版本上生效

D. 只在 IE8 上不生效

E. 非 IE 浏览器生效

F. IE6 浏览器上字体显示为红色

<div>

<!--[if IE6]>

<![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 伪类中，管去不管回

④. 转换属性

⑤. 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 伪类中，管去不管回

2021年CSS 实用手册相关推荐

2021年JavaScript实用手册
1. JavaScript 是专门编写网页交互行为的语言,HTML 和 CSS 是静态语言,编写静态内容,无法编写逻辑,无法执行计算,所有静态网页必须使用 JavaScript 添加上交互行为,才能让 ...
2021年Bootstrap实用手册和最强总结以及工具
1. 什么是响应式网页 Responsive Web Page,响应式网页/自适应网页,即一个页面既可以在 PC 浏览器中浏览,也可以在手机.平板中浏览,并且配合不同设备有不同的响应结果,响应式网页的 ...
Web开发编程实用手册
不要被这个名字吓到.这本手册,真的很实用.你能猜猜它有多少页么?只有62页,比起那些砖头书来,这本可以说是苗条得不能再苗条了.现在卓越搞活动,购买电子工业出版社图书,凡购买专题内图书满69元,均可获赠 ...
Oracle 精编实用手册
<Oracle精编实用手册> by Else 序章第1章 Oracle 基础概念 1.1 数据库简介 1.2 Oracle 简介第2章 Oracle 建立和介绍 2.1 Oracle ...
2021年最实用的12款SEO工具
最近有很多卖家朋友问到,关于查询谷歌独立站SEO的各种工具,那么今天我来总结一下 2021年最实用的12款SEO工具 .我自己列表中收藏了以及用过的50多款工具,但今天要分享的工具只有12个,只要把这 ...
前端新手必看的CSS参考手册
CSS 参考手册定期通过所有主流浏览器进行测试. CSS 属性 CSS 属性组: 动画背景边框和轮廓盒(框) 颜色内容分页媒体定位可伸缩框字体生成内容网格超链接行框列表外边距 ...
python控制caxa模块_CAXA二次开发实用手册.doc
您所在位置:网站首页 > 海量文档 &nbsp>&nbsp汽车/机械/制造&nbsp>&nbsp机械软件 CAXA二次开发实用手册.doc119页本 ...
实用手册：11种常见滤镜及使用效果
实用手册:11种常见滤镜及使用效果 2015-06-23 16:20 来源:新摄影网如果你是才刚刚入坑的摄影新手,相信对市场上琳琅满目的滤镜产品产生过疑问,保护镜是什么?UV镜有什么效 ...
Bootstrap4+MySQL前后端综合实训-Day01-AM【实训安排、HBuilder下载及使用、双飞翼布局（圣杯布局）案例、CSS在线手册、flex布局中的对齐方式】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录实训安排日常要求.项目要求项目开发流程 HTML+CSS+JavaScript 基 ...

2021年CSS 实用手册

2021年CSS 实用手册相关推荐

最新文章

热门文章