选择器
-
element1~element2：选择前面有element1元素的每个element2元素。
<!DOCTYPE HTML> <html> <head> <style type="text/css"> div~p{ color:red } </style> </head> <body> <p>选择器测试1</p> <div>我是element1</div> <p>我是element2</p> <p>我是element2</p> </body> </html> 复制代码 -
[attribute^=value]：选择某元素attribute属性是以value开头的。
<!DOCTYPE HTML> <html> <head> <style type="text/css"> [type^='tex']{ color:red; } </style> </head> <body> <input value="我是文本" type="text" /> <input value="我是按钮" type="button" /> </body> </html> 复制代码 -
[attribute$=value]：选择某元素attribute属性是以value结尾的。
<!DOCTYPE HTML> <html> <head> <style type="text/css"> [type$='xt']{ color:red; } </style> </head> <body> <input value="我是文本" type="text" /> <input value="我是按钮" type="button" /> </body> </html> 复制代码 -
[attribute*=value]：选择某元素attribute属性包含value字符串。
<!DOCTYPE HTML> <html> <head> <style type="text/css"> [type*='ex']{ color:red; } </style> </head> <body> <input value="我是文本" type="text" /> <input value="我是按钮" type="button" /> </body> </html> 复制代码 -
E:first-of-type：选择属于其父元素的首个E元素的每个元素。
<!DOCTYPE HTML> <html> <head> <style type="text/css"> p:first-of-type{ color:red; } </style> </head> <body> <p>我是第一行</p> <p>我是第二行</p> <p>我是第三行</p> <p>我是第四行</p> </body> </html> 复制代码 -
E:last-of-type：选择属于其父元素的最后个E元素的每个元素。
<!DOCTYPE HTML> <html> <head> <style type="text/css"> p:last-of-type{ color:red; } </style> </head> <body> <p>我是第一行</p> <p>我是第二行</p> <p>我是第三行</p> <p>我是第四行</p> </body> </html> 复制代码 -
E:only-of-type：选择属于其父元素的唯一子元素的每个E元素。
<!DOCTYPE HTML> <html> <head> <style type="text/css"> p:only-of-type{ color:red; } </style> </head> <body> <div> <p>我是第一行</p> </div> <div> <p>我是第二行</p> <p>我是第三行</p> <p>我是第四行</p> </div> </body> </html> 复制代码 -
E:only-child：选择属于其父元素的唯一子元素的每个E元素。
<!DOCTYPE HTML> <html> <head> <style type="text/css"> p:only-child{ color:red; } </style> </head> <body> <div> <p>我是第一行</p> </div> <div> <p>我是第二行</p> <p>我是第三行</p> <p>我是第四行</p> </div> </body> </html> 复制代码 -
E:nth-child(n): 选择属于其父元素的第n个子元素的每个E元素。
-
E:nth-last-child(n): 选择属于其父元素的倒数第n个子元素的每个E元素。
-
E:nth-of-type(n): 选择属于其父元素第n个E元素的每个E元素。
-
E:nth-last-of-type(n): 选择属于其父元素倒数第n个E元素的每个E元素。
-
E:last-child: 选择属于其父元素最后一个子元素每个E元素。
-
:root: 选择文档的根元素。
-
E:empty: 选择没有子元素的每个E元素（包括文本节点)。
-
E:target: 选择当前活动的E元素。
-
E:enabled: 选择每个启用的E元素。
-
E:disabled: 选择每个禁用的E元素。
-
E:checked: 选择每个被选中的E元素。
-
E:not(selector): 选择非selector元素的每个元素。
-
E::selection: 选择被用户选取的元素部分。
transition过渡、animation动画、transform形状转换
-
transition 过渡，当元素从一种样式变换为另一种样式时为元素添加效果，而不用使用Flash动画或JavaScript。
-
transition-property: 规定应用过渡的CSS属性的名称。
-
transition-duration: 规定完成过渡效果需要多长时间。
-
transition-delay: 规定过渡效果何时开始，默认是0。
-
transition-timing-function: 规定过渡效果的时间曲线，默认是”ease”，还有linear、ease-in、ease-out、ease-in-out和cubic-bezier等过渡类型。
-
transition: 简写属性，用于在一个属性中设置四个过渡属性。
div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari 和 Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; } div { transition: width 1s linear 2s; /* Firefox 4 */ -moz-transition:width 1s linear 2s; /* Safari and Chrome */ -webkit-transition:width 1s linear 2s; /* Opera */ -o-transition:width 1s linear 2s; } 复制代码
-
-
animation
animation让CSS拥有了可以制作动画的功能。使用CSS3的Animation制作动画我们可以省去复杂的js代码。
@-webkit-keyframes anim1 { 0% { opacity: 0; font-size: 12px; } 100% { opacity: 1; font-size: 24px; } } .anim1Div { -webkit-animation-name: anim1 ; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 4; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; } 复制代码 -
transform
transform用来向元素应用各种2D和3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜等操作。
变换类型
- none: 定义不进行转换。
- matrix(n,n,n,n,n,n): 定义2D转换，使用六个值的矩阵。
- matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n): 定义3D转换，使用16个值的4x4矩阵。
- translate(x,y): 定义2D位移转换。
- translate3d(x,y,z): 定义3D位移转换。
- translateX(x): 定义位移转换，只是用X轴的值。
- translateY(y): 定义位移转换，只是用Y轴的值。
- translateZ(z): 定义3D位移转换，只是用Z轴的值。
- scale(x,y): 定义2D缩放转换。
- scale3d(x,y,z): 定义3D缩放转换。
- scaleX(x): 通过设置X轴的值来定义缩放转换。
- scaleY(y): 通过设置Y轴的值来定义缩放转换。
- scaleZ(z): 通过设置Z轴的值来定义3D缩放转换。
- rotate(angle): 定义2D旋转，在参数中规定角度。
- rotate3d(x,y,z,angle): 定义3D旋转。
- rotateX(angle): 定义沿着X轴的3D旋转。
- rotateY(angle): 定义沿着Y轴的3D旋转。
- rotateZ(angle): 定义沿着Z轴的3D旋转。
- skew(x-angle,y-angle): 定义沿着X和Y轴的2D倾斜转换。
- skewX(angle): 定义沿着X轴的2D倾斜转换。
- skewY(angle): 定义沿着Y轴的2D倾斜转换。
- perspective(n): 为3D转换元素定义透视视图。
浏览器支持
Internet Explorer 10、Firefox、Opera 支持 transform 属性。 Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。 Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。 Opera 只支持 2D 转换。
边框
border-radius、box-shadow和border-image
背景
background-clip、background-origin、background-size和background-break。
文字效果
word-wrap、text-overflow、text-shadow、text-decoration。
注：CSS3中将 word-wrap改名为 overflow-wrap；由于历史原因，当你使用overflow-wrap 时，最好同时使用word-wrap 作为备选，作向前兼容。
渐变
渐变有线性渐变、径向渐变、圆锥渐变。
@font-face
@font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div{
font-family:myFirstFont;
}
复制代码用户界面
-
盒模型：
-
基本概念
标准模型+IE模型。包括margin、border、padding、content。
-
标准模型和IE模型的区别？
IE模型元素width/height=content+padding+border
标准模型元素width/height=content
-
css如何设置获取这两种模型的宽和高？
通过css3新增的属性
box-sizing: content-box | border-box分别设置盒模型为标准模型（content-box）和IE模型（border-box）。 -
js如何设置获取盒模型对应的宽和高
dom.style.width/height只能取到行内样式的宽和高，style标签中和link外链的样式取不到。dom.currentStyle.width/height取到的是最终渲染后的宽和高，只有IE支持此属性。window.getComputedStyle(dom).width/height同（2）但是多浏览器支持，IE9以上支持。dom.getBoundingClientRect().width/height也是得到渲染后的宽和高，大多浏览器支持。IE9以上支持，除此外还可以取到相对于视窗的上下左右的距离
-
根据盒模型解释边距重叠
只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框或绝对定位之间的外边距不会合并。
-
BFC(边距重叠解决方案还有IFC、GFC、FFC)解决边距重叠
BFC，Block Formatting Context的缩写，块级格式化上下文。
如何创建BFC？
- overflow不为visible
- float不为none
- position不为static或relative
- display为inline-block、table、table-cell、table-caption、flex、inline-flex
-
-
resize
-
outline-offset
反射
-webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片
复制代码颜色
rgba、hsla
混合模式
background-blend-mode和mix-blend-mode
其他
-
Flex布局
父元素设置flex布局(块级元素flex，行内元素inline-flex)之后,子元素的float、vertical-align、clear无效。
flex父元素我们叫作flex容器，子元素叫作flex项目。
flex容器
flex容器有6个属性，分别为：
-
flex-deriction(主轴方向)
flex-direction: row | row-reverse | column | column-reverse; 复制代码 -
flex-wrap(换行)
flex-wrap: nowrap | wrap | wrap-reverse; 复制代码 -
flex-flow(flex-deriction和flex-wrap的简写形式)
flex-flow: <flex-direction> || <flex-wrap>; 复制代码 -
justify-content(主轴对齐方式)
justify-content: flex-start | flex-end | center | space-between | space-around; 复制代码 -
align-items(交叉轴上的对齐方式)
align-items: flex-start | flex-end | center | baseline | stretch; 复制代码 -
align-content(多根轴线对齐方式)
align-content: flex-start | flex-end | center | space-between | space-around | stretch; 复制代码
flex项目
-
order(项目的排列顺序)
order: <integer>; 复制代码 -
flex-grow(项目的放大比例)
flex-grow: <number>; /* default 0 */ 复制代码 -
flex-shrink(项目的缩小比例)
flex-shrink: <number>; /* default 1 */ 复制代码 -
flex-basis(在分配多余空间之前，项目占据的主轴空间)
flex-basis: <length> | auto; /* default auto */ 复制代码 -
flex(flex-grow、flex-shrink和flex-basis的简写)
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 复制代码 -
align-self(允许单个项目与其他项目有不一样的对齐方式)
align-self: auto | flex-start | flex-end | center | baseline | stretch; 复制代码
-
-
多列布局
-
Grid布局
-
媒体查询
