共计 9481 个字符，预计需要花费 24 分钟才能阅读完成。
站点：前端开发文档原文：CSS 选择器原文：CSS 继承属性原文：CSS3 核心模块原文：CSS 盒子模型原文：CSS 背景图像原文：CSS 清除浮动原文：CSS 定位
CSS 选择器
并集：对选择器进行分组，被分组的选择器可以分享相同的声明。用逗号将需要分组的选择器开分。
h1,h2,h3,h4,h5,h6{}
交集：两种属性同属一个元素
p.name{}、p#id{}、.name1.name2{}
后代（派生）：根据元素在位置上的关系定义样式，使用空格隔开，后代选择器尽量不要超过 3 个，不必把每个层级都列出，只需要写关键点即可
li strong {}
子代：只能选择作为某元素的子元素，只选择子代，往后孙子一代不选择
h1 > strong {}
兄弟和相邻兄弟：选择紧接在另一元素后的，并且二者有相同父元素
h1 + p {}
属性：对带有指定属性的 HTML 元素设置样式，权重为 10
属性选择器：为带有 title 属性的所有元素设置样式，[title] {}
属性和值选择器：为 title=”name” 的所有元素设置样式，[title=name] {}
设置表单的样式：input[type=”text”] {}
伪类：
:active：被激活的元素
:focus：有键盘输入焦点的元素
:hover：鼠标悬停
:link：未被访问的链接
:visited：已被访问的链接
:first-child：元素的第一个子元素
:lang：带有指定 lang 属性的元素
权重：
div（1）
class/ 类选择器（10）
id（100）
结构选择器（新增伪类（面试题））
:not：排除
:nth-child(n)：第几个元素 从 1 开始设置
:nth-child(2n)：偶数元素 从 0 开始设置
:nth-child(2n+1)：奇数元素
:nth-of-type(n)：某个元素下同类型的第几个元素
:nth-last-child：倒数第几个元素
:first-child->:nth-child(1)：
:fisrt-of-type：第一个同级兄弟元素
:last-of-type：最后一个同级兄弟元素
:nth-of-type(n)：第几个同级兄弟元素
:last-child：最后一个子元素
:only-child：仅有一个子元素
:only-of-type：只有一个同类型的子元素
:empty：空内容
:checked：被选中 主要用在 input 表单元素
属性选择器
E[attr=val]：
E[attr|=val]：只能等于 val 或只能以 val- 开头
E[attr*=val]：包含 val 字符串
E[attr~=val]：属性值有多个，其中一个是 val
E[attr^=val]：以 val 开头
E[attr$=val]：以 val 结尾
目标伪类选择器
:target()：用来匹配 URL 指向的目标元素（存在 URL 指向该匹配元素时，样式效果才会生效）
伪元素：
:first-line：匹配首行文本，只能用于块级元素
:first-letter：匹配首字符
:before/:after：DOM 元素前后插入额外的内容
遇到伪元素 before/after 就要加上 content=”
display: block;：独占一行
display: inline-block;：不独占一行
CSS 继承属性
无继承性的属性
display：规定元素应该生成的框的类型
文本属性：
vertical-align：垂直文本对齐
text-decoration：添加文本装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向
盒子模型的属性：
width、height
margin、margin-top/right/bottom/left
border、border-top/right/bottom/left
border-style、border-top/right/bottom/left-style
border-width、border-top/right/bottom/left-width
border-color、border-top/right/bottom/left-color
padding、padding-top/right/bottom/left
背景属性：
background
background-color
background-image
background-repeat
background-position
background-attachment
定位属性：
float
clear
position
top/right/bottom/left
min-width/min-height、max-width/max-height
overflow
clip
z-index
生成内容属性：
content
counter-reset
counter-increment
轮廓样式属性：
outline-style
outline-width
counter-color
outline
有继承性的属性
字体系列属性
font：组合字体
font-family：字体系列
font-weight：字体粗细
font-size：字体尺寸
font-style：字体风格
font-variant：小写字母转换为大写，字体尺寸更小
font-stretch：对当前 font-family 进行伸缩变形。所有主流浏览器不支持。
font-size-adjust：为某个元素规定一个 aspect 值，保持首选字体的 x -height
文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：字间距
letter-spacing：字符间距
text-transform：控制文本大小写
direction：文本书写方向
color：文本颜色
元素可见性：visibility
表格布局属性
caption-side
border-collapse
border-spacing
empty-cells
table-layout
列表布局属性
list-style-type
list-style-image
list-style-position
list-style
生成内容属性：quotes
光标属性：cursor
页面样式属性
page
page-break-inside
windows
orphans
CSS3 核心模块
过渡动画
transition：过渡动画
transition-property：过渡属性 all[attr]
transition-duration：过渡时间
transition-delay：延迟时间
transition-timing-function：运行类型
ease：（逐渐变慢）默认值
linear：匀速
ease-in：加速
ease-out：减速
cubic-bezier：贝塞尔曲线
过渡动画效果思考步骤：
找到过渡属性
找到过渡属性起始值和结束值
在合适的位置上增加 transition 属性
2D 变换
transform：变形属性
rotate()：旋转函数
deg：度数
transform-origin：旋转的基点
skew()：倾斜函数
skewX()
skewY()
scale()：缩放函数 默认值是 1
scaleX()
scaleY()
translate()：位移函数
translateX()
translateY()
animation- 声明关键帧
关键帧——@keyframes
类似于 flash
定义动画在每个阶段的样式，即帧动画
关键帧的时间单位
数字：0%、25%、100% 等（设置某个时间段内任意时间点的样式）
字符：from(0%)、to(100%)：
格式
@keyframes：动画名称
{动画状态}
animation- 调用动画
必要属性
animation-name：动画名称（关键帧名称）
animation-duration：动画执行时间
可选属性：
animation-timing-function
linear：匀速
ease：缓冲
ease-in：由慢到快
ease-out：由快到慢
ease-in-out：由慢到快再到慢
ease-bezier(num,num,num,num)：特定的贝塞尔曲线类型，4 个数值需在 [0,1] 区间内
animation-delay：动画延迟
animation-iteration-count：重复次数
animation-direction：动画运行的方向 normal|reverse|alternate|alternate-reverse
animation-play-state：动画状态 running|paused
animation-fill-mode：动画结束后的状态 none|forwards|backwards|both
3D 变换
transform-style: flat|preserve-3d：3D 空间展示
perspective：景深效果
transform: persective(800px)：直接作用在子元素上
transform：新增函数
translate3d(tx, ty, tz)：translateX() translateY() translateZ()
rotate3d(rx, ry, rz, a)：rotateX() rotateY() rotateZ()
scale3d(sx, sy, sz)：sacleX() sacleY() sacleZ()
圆角 border-radius
border-radius：1- 4 个数字 /1- 4 个数字
水平半径 / 垂直半径
四个数字方向分别是左上 右上 右下 左下
没有 / 则水平半径和垂直半径一样
border-radius: 10px/5px;
border-radius: 60px 40px 30px 30px/30px 20px 10px 5px
例子：圆 椭圆 半圆 扇形
线性渐变 linear-gradient
linear-gradient：（[< 起点 >||< 角度 >,]?< 点 >,< 点 >…）
只能用在背景上
颜色是沿着一条直线轴变化
参数
起点：开始渐变方向
角度：开始渐变角度
点：渐变点的颜色和位置
重复线性渐变
径向渐变 radial-gradient
radial-gradient
从“一点”向多个方向颜色渐变
shape 形状：ellipse、circle 或设置水平半径，垂直半径
size：渐变的大小，即渐变停止位置：
closet-side：最左边
farthest-side：最远边
closet-corner：最近角
farthest-corner：最远角（默认值）
position：关键词 | 数值 | 百分比
重复的径向渐变
背景
background-origin
padding-box：从 padding 区域显示
border-box：从 border 区域显示
content-box：从 content 区域显示
background-clip
padding-box：从 padding 区域向外裁剪
border- box：从 border 区域向外裁剪
content-box：从 content 区域向外裁剪
text：文本裁剪
background-size
100% 100%：百分比
10px 10px：数值
contain：按原始比例收缩，背景图显示完整，但不一定铺满整个容器
cover：按原比例收缩，背景图可能显示不完整，但铺满整个容器
background-attachment
背景图片是滚动 / 固定 fixed(固定的) 默认是滚动的
盒子阴影
box-shadow：h v blur spread color inset;
h：水平方向偏移
v：垂直方向偏移
blur：模糊半径
spread：扩展半径
color：颜色
inset：内阴影，默认是外阴影
文本阴影
text-shadow：x y blur color
x 轴偏移 y 轴偏移 模糊度 颜色
多层阴影制作文字立体效果，设置多种颜色，中间以逗号隔开
文字添加边框
text-stroke：2px blue
通过设定 1px 的透明边框，可以让文字变得平滑
颜色设成透明能够创建镂空字体
滤镜
-webkit-filter:normal;：正常
-webkit-filter:grayscale(1);：灰度，取值范围 0 -1
-webkit-filter:brightness(0);：亮度，取值范围 0 -1
-webkit-filter:invert(1);：反色，取值范围 0 -1，0 为原图，1 为彻底反色
-webkit-filter:sepia(0.5);：叠加褐色，取值范围 0 -1
-webkit-filter:hue-rotate(30deg);：色相（按照色相环旋转，顺时针方向）（红 - 橙 - 黄 - 黄绿 - 绿 - 蓝绿 - 蓝 - 蓝紫 - 紫 - 紫红 - 红）此处为叠加黄色滤镜
-webkit-filter:saturate(4);：饱和度，取值范围 0 -*，0 为无饱和度，1 为原图，值越高，饱和度越大
-webkit-filter:contrast(2);：对比度，取值范围 0 -*，0 为无对比度（灰色），1 为原图，值越高对比度越大
-webkit-filter:opacity(0.8);：透明度，取值范围 0 -1，0 为全透明，1 为原图
遮罩
mask-image：
mask-position：
mask-repeat：
CSS 盒子模型
border 边框
三角形箭头：
正方形的任意相邻两条边，然后旋转一定的角度，得到我们需要的任意方向的箭头
border、border-width、border-style、border-color
三角形：
border 的 3 个属性：border-width/border-style/border-color，宽度和高度都为 0，三角形箭头方向设定颜色，其余方向颜色设为透明 transparent
margin 边距
margin 边距重叠：取大值，不是两者相加之和。
margin-top 的传递：大盒嵌套小盒，小盒加 margin-top 值，传递到大盒，导致整体下移。
解决 margin 的兼容性问题：
float: left;
overflow: hidden;
padding-top: 0/1px;
border-top: 1px solid transparent;
CSS 背景图像
background 背景
主要属性：
background-color：背景颜色，简写 background
不能继承，默认是 transparent
inherit 指定背景颜色，从父元素继承
background-image：背景图片
url：图片 URL 地址
node：默认值 背景上未放置图片
inherit：指定背景图片从父元素继承
一个元素可以引入多张背景图片；
指定要使用的一个或多个背景图片，默认情况下，background-image 放置在元素的左上角，并重复垂直和水平方向
属性不能继承
background-repeat：背景重复
默认重复 background-image 的垂直和水平方向
repeat 默认
repeat-x 只有水平位置重复
repear-y 只有垂直位置重复
no-repeat 不重复
inherit 从父元素继承
background-position：背景定位
设置背景图片的起始位置
x、y 水平位置，垂直位置。左上角是 0。单位（px，关键字，百分数）
关键字成对出现 left right top bottom center，仅指定一个关键字，其他值将会是 center
只设定 x 轴方向，默认 y 轴为 center
inherit 从父元素继承
background-attachment：背景关联
设置背景图片固定或随页面的其余部分滚动
scroll 默认
fixed 固定
inherit 从父元素继承
background-size：背景图像的尺寸大小
<length> 长度值指定图像大小。不允许负值
<percentage> 百分比指定图像大小。不允许负值
auto 图像的真实大小
cover 将背景图像等比例缩放到完全覆盖容器，有可能超出容器
contain 等比例所放到宽 / 高与容器的宽 / 高相等，背景图像始终被包含在容器内
background-origin：设置背景图像的参考原点（位置）
padding-box：从 padding 区域（含 padding）开始显示背景
border-box：从 border 区域（含 border）开始显示背景
content-box：从 content 区域开始显示背景
background-clip：设置对象的背景图像向外裁剪的区域
padding-box：从 padding 区域（不含 padding）开始向外裁剪背景
border-box：从 border 区域（不含 border）开始向外裁剪背景
content-box：从 content 区域开始向外裁剪背景
text：从前景内容的形状（比如文字）作为裁剪区向外裁剪，实现使用背景作为填充色之类的遮罩效果。
雪碧图：background-position: x y
CSS 清除浮动
overflow: hidden
overflow 溢出隐藏
清除浮动
解决 margin-top 的传递问题
（面试题）：
单行文本出现省略号（4 个必备条件，缺一不可）
width 宽度（不写宽度，默认继承父元素宽度）
overflow: hidden;（溢出隐藏）
white-space: nowrap;
text-overflow: ellipsis; 文字隐藏的方式，以省略号的方式隐藏
多行文本出现省略号（必备条件，主要应用在移动端）
display: -webkit-box; 弹性盒模型
-webkit-box-orient: vertical; 规定元素的排列方式：垂直排列
-webkit-line-clamp: 2;：文字的行数（自定义）
overflow: hidden; 溢出隐藏
多个元素在一行显示的方法
display: inline;
display: inline-block;
float: left/right;
display: inline-block; 元素的特点
盒子横向排列
verticle-align 属性会影响 inline-block 元素，值可能会设为 top
需要设置每一列的宽度
如果 HTML 源码中元素间有空格，列与列之间会产生空隙
解决方法：
如果元素添加了 dispay: inline-block;，父元素增加一个属性 font-size: 0;，同时在元素本身增加 font-size 属性进行覆盖
display:inline-block; 在 IE6/ 7 下不兼容的解决方法
增加 display: inline; zoom: 1; 属性
IE7 下块元素兼容 display: inline-block; 写法？
直接让块元素设置为内联对象（设置属性 display: inline;），然后触发块元素的 layout（如：zoom: 1; 等）。
兼容各浏览器的代码如下：div {display: inline-block; *display: inline; *zoom: 1;}
float 浮动
float 元素的特点
在一行显示
设置属性值为 left 时，浮动元素依次从父级盒子的左侧向右排列
自动具有块级元素的属性，不需要添加 display: block;
脱离文档流
子元素不会继承浮动属性
浮动元素下面的元素不能识别浮动元素的高度和位置，占据浮动元素的位置
所有的元素都可以使用浮动属性
文档流和脱离文档流
文档流：元素排版布局过程中，元素自动从左往右，从上往下的流式排列。
每个非浮动元素块级元素独占一行，浮动元素按规则浮在行的一端。当前行容量满则另起一行浮动。
内联元素不会独占一行
几乎所有元素（包括块级、内敛和列表元素）均可生成子行，用于摆放子元素
标准文档流等级：分为两个等级，块级元素和行内元素
脱离文档流：文档流内的正常元素识别不到这个元素（脱离文档流的元素相当于平行漂浮于文档流之上）
float 元素产生的影响
父元素设置背景颜色 background-color 不起作用
父元素设置内边距属性 padding 不会被撑开
父元素设置边框属性 border 不会被撑开
清除浮动 float
清除浮动的方法
给浮动元素的父级元素添加固定的高度 height（不推荐）
给浮动元素的父级元素添加溢出隐藏属性 overflow: hidden;；
给最后一个浮动元素后面添加一个块级元素，这个块级元素带有 clear: both; 属性
clear 清除浮动元素对文档流内元素的影响（可以让文档流内的元素识别到浮动元素的高度）
left 清除 float 为 left 的影响
right 清除 float 为 right 的影响
both 清除 float 所有的影响
inherit 从父级元素上继承该属性值
clearfix 清除浮动（固定代码）
利用伪元素:after 清除浮动必备条件，缺一不可
display: block; 确保元素是一个块级元素
clear: both; 不允许左右两边有浮动对象
content: ”; 伪元素:brfore/:after 自带的属性，如果不写，伪元素不起作用
写全的样式属性；不是必备条件
height: 0; 防止在低版本浏览器中默认 height: 1px; 的情况，用 height: 0; 去覆盖
font-size: 0; 字体大小
overflow: hidden; 溢出隐藏
visibility: hidden; 让所有可见性的元素隐藏
overflow: hidden; 和 visibility: hidden; 有什么区别？
（面试题）：如何让一个元素消失？
opacity: 0;[0-1] 透明度
display: none; 隐藏
widht/height/line-height + overflow：宽 / 高 / 行高 + 溢出隐藏
visibility: hidden; 让所有可见性的元素隐藏
clear: both; 的特点
元素需要是块级元素
元素不能带有浮动属性
元素必须放在最后一个浮动元素的后面
CSS 定位
相对定位 -position: relative;
没有脱离文档流
参照物是元素本身位置
当 top 和 bottom 同时有值的情况下，top 值生效，支持负值
当 left 和 right 同时有值的情况下，left 值生效，支持负值
任何元素都可以设置相对定位属性
相对定位元素位移发生改变，但元素原来的位置还会被占用，其他元素还是正常识别这个元素原来的位置
绝对定位 -position: absolute;
脱离文档流
可以设置参照物，参照物必须是其父级元素（直系父级），如果没有直接父级会一直往上查找直到找到最外层的根元素为止；
有宽度和高度的情况下，top 和 bottom 同时有值，top 生效；left 和 right 同时有值，left 生效。
没有宽度和高度的情况下，top 和 bottom 同时设置值的情况下，会将这个盒子拉大，上下值都起作用，左右同理。
可以设置层级关系 z -index 属性，必须要和定位元素（绝对，相对，固定）同时使用，才会起作用。
一个元素定位在另一个元素上或者两个元素叠加的情况，都可以使用定位（绝对定位）
绝对定位一定要设置相对参照物
固定定位 -position: fixed;
脱离文档流
参照物是浏览器的可视窗口
任何元素都可以设置固定定位
可设置 top/bottom/left/right 四个方位
可通过 z -index 改变层级
z-index 属性的特点
默认是书写顺序在后的定位元素覆盖顺序在前的定位元素
可以使用 z -index 属性修改定位元素的层级关系
所有定位元素的 z -index 默认值都一样
z-index 值是数字没有单位，支持负数
一般都是同级元素进行层级的比较
当参照物是相对定位或绝对定位的时候，父级元素之间没有 z -index 值，子元素的 z -index 值进行比较
