CSS3开发文档
站点：前端开发文档原文：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]：属性值有多个，其中一个是valE[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、heightmargin、margin-top/right/bottom/leftborder、border-top/right/bottom/leftborder-style、border-top/right/bottom/left-styleborder-width、border-top/right/bottom/left-widthborder-color、border-top/right/bottom/left-colorpadding、padding-top/right/bottom/left背景属性：backgroundbackground-colorbackground-imagebackground-repeatbackground-positionbackground-attachment定位属性：floatclearpositiontop/right/bottom/leftmin-width/min-height、max-width/max-heightoverflowclipz-index生成内容属性：contentcounter-resetcounter-increment轮廓样式属性：outline-styleoutline-widthcounter-coloroutline有继承性的属性字体系列属性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-sideborder-collapseborder-spacingempty-cellstable-layout列表布局属性list-style-typelist-style-imagelist-style-positionlist-style生成内容属性：quotes光标属性：cursor页面样式属性pagepage-break-insidewindowsorphansCSS3核心模块过渡动画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()：缩放函数 默认值是1scaleX()scaleY()translate()：位移函数translateX()translateY()animation-声明关键帧关键帧——@keyframes类似于flash定义动画在每个阶段的样式，即帧动画关键帧的时间单位数字：0%、25%、100%等（设置某个时间段内任意时间点的样式）字符：from(0%)、to(100%)：格式@keyframes：动画名称{动画状态}animation-调用动画必要属性animation-name：动画名称（关键帧名称）animation-duration：动画执行时间可选属性：animation-timing-functionlinear：匀速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-reverseanimation-play-state：动画状态 running|pausedanimation-fill-mode：动画结束后的状态 none|forwards|backwards|both3D变换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-radiusborder-radius：1-4个数字/1-4个数字水平半径/垂直半径四个数字方向分别是左上 右上 右下 左下没有/则水平半径和垂直半径一样border-radius: 10px/5px;border-radius: 60px 40px 30px 30px/30px 20px 10px 5px例子：圆 椭圆 半圆 扇形线性渐变 linear-gradientlinear-gradient：（[<起点>||<角度>,]?<点>,<点>…）只能用在背景上颜色是沿着一条直线轴变化参数起点：开始渐变方向角度：开始渐变角度点：渐变点的颜色和位置重复线性渐变径向渐变 radial-gradientradial-gradient从“一点”向多个方向颜色渐变shape形状：ellipse、circle或设置水平半径，垂直半径size：渐变的大小，即渐变停止位置：closet-side：最左边farthest-side：最远边closet-corner：最近角farthest-corner：最远角（默认值）position：关键词|数值|百分比重复的径向渐变背景background-originpadding-box：从padding区域显示border-box：从border区域显示content-box：从content区域显示background-clippadding-box：从padding区域向外裁剪border- box：从border区域向外裁剪content-box：从content区域向外裁剪text：文本裁剪background-size100% 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 colorx轴偏移 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，三角形箭头方向设定颜色，其余方向颜色设为透明transparentmargin边距margin边距重叠： 取大值，不是两者相加之和。margin-top的传递：大盒嵌套小盒，小盒加margin-top值，传递到大盒，导致整体下移。解决margin的兼容性问题：float: left;overflow: hidden;padding-top: 0/1px;border-top: 1px solid transparent;CSS背景图像background背景主要属性：background-color：背景颜色，简写background不能继承，默认是transparentinherit 指定背景颜色，从父元素继承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轴为centerinherit 从父元素继承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 yCSS清除浮动overflow: hiddenoverflow溢出隐藏清除浮动解决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值进行比较 ...