CSS优先级算法参考：http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...http://www.bslxx.com/a/miansh...优先和就近原则，同等权重下，以最接近的样式定义为准。定位准优先级：!important>id>class>tagimportant高于内联优先级important声明高于js优先级firstclass：表示内联样式，如：style=""，权重为1000。第二类：表示一个ID选择器，如：#content，权重为0100。第三类：代表类、伪类和属性选择器，如.content，权重为0010。第四类：表示类型选择器和伪元素选择器，如divp，权重为0001。通配符、子选择器、相邻选择器等。如*、>、+，权重为0000。继承样式没有权重。css定义的权重/以下是权重规则：label的权重为1，class的权重为10，id的权重为100。下面///例子来演示各种定义的权重值：/*权重为1*/div{}/*权重为10*/.class1{}/*权重为100*/#id1{}/*权重为100+1=101*/#id1div{}/*权重is10+1=11*/.class1div{}/*weightis10+10+1=21*/.class1.class2div{}//如果weight相同，则最后定义的样式有效，但这应该避免CSS3一个新的伪类p:first-of-type选择作为其父元素的第一个
元素的每个
元素。p:last-of-type选择作为其父元素的最后一个
元素的每个
元素。p:only-of-type选择作为其父元素唯一的
元素的每个
元素。p:only-child选择每个
元素，该元素是其父元素的唯一子元素。p:nth-child(2)选择作为其父元素的第二个子元素的每个
元素。:after在元素前添加内容，也可用于清除浮动。:before在元素后添加内容:enabled:disabled控制表单控件的禁用状态。:checked单选按钮或复选框被选中，居中浮动元素，设置div的宽度，然后添加margin:0auto属性div{width:200px;保证金：0自动；}//确定容器的宽高，width500heightLayerof300//设置layer的外边距.div{width:500px;height:300px;//可以设置高度，不留边距：-150px00-250px;职位：相对；//相对定位background-color:pink;//很容易看出效果left:50%;顶部：50%；}让绝对定位的div居中position:absolute;宽度：1200px；背景：无；保证金：0自动；顶部：0；左：0；底部：0；右：0；CSS3有新特性添加各种CSS选择器(:not(.input):所有class不是"input"的节点)圆角(border-radius:8px)多列布局(multi-columnlayout)阴影和反射(ShadowReflect)文字效果(text-shadow,)文字渲染(Text-decoration)线性渐变(gradient)旋转(transform)增加旋转、缩放、定位、倾斜、动画、多背景transform:scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg)Animation:Newselectorp:nth-child(n){color:rgba(255,0,0,0.75)}flexboxmodeldisplay:flex;多栏布局column-count:5;媒体查询@media(max-width:480px){.box:{column-count:1;}}个性化字体@font-face{font-family:BorderWeb;src:url(BORDERW0.eot);}颜色透明度颜色：rgba(255,0,0,0.75);圆形边框半径：5px；渐变背景：linear-gradient(red,green,blue);阴影框阴影：3px3px3pxrgba(0,64,128,0.3);reflectionbox-reflect:below2px;文字装饰text-stroke-color:red;文本溢出文本溢出：省略号；背景效果background-size:100px100px;边框效果border-image:url(bt_blue.png)010;变换旋转变换：rotate(20deg);倾斜变换：skew(150deg,-10deg);位移变换：translate(20px,20px);缩放变换：scale(.5);平滑过渡transition:all.3sease-in.1s;animation@keyframesanim-1{50%{border-radius:50%;}}animation:anim-11s;使用纯CSS创建一个三角形//隐藏顶部、左侧和右侧（颜色设置为透明）#demo{width:0;高度：0；边框宽度：20px；边框样式：实心；border-color:transparenttransparentredtransparent;}浏览器兼容性png24位图片在iE6浏览器上出现背景，解决方法是做成PNG8。浏览器默认的margin和padding是不一样的。解决办法是加一个全局的*{margin:0;padding:0;}来统一IE。方法获取自定义属性，也可以使用getAttribute()获取自定义属性；在Firefox下，只能使用getAttribute()来获取自定义属性。解决方法：统一通过getAttribute()获取自定义属性。在IE中，even对象有x,y属性，没有pageX,pageY属性。Firefox下，event对象有pageX,pageY属性，没有x,y属性BFC块级格式化上下文（内部元素不影响外部元素）渲染规则：1.bfc元素的垂直外边距重叠2.bfc区域不影响不与浮动元素重叠3.独立容器4.计算bfc高度时，浮动元素也会参与计算创建bfc：1.overflow2.float不是none3.position不是static4.display与表格显示相关：inline-blockwhenwilldisplaygapsremovespaces,usemarginnegativevalue,usefont-size:0,letter-spacing,word-spacingclearfloat.clearfix:after{visibility:hidden;}显示：块；字体大小：0；内容：””;明确：两者；height:0;}1.使用标签设置display:inline-block;width:100%,撑起包含浮动元素的div（div不需要设计高度）2.overflow:hidden(BFC)3.可以使用标签设置display:block;width:100%,clear:both4.div="display:table5.div="display:table-cell6.div="display:flow-root(triggerBFC)7.div::after而不是标签="content:''显示：块；明确：两者；（底部有一个没有高度的元素）8.使用.clearfix:after{content:''display:block;清除：两者；}9。让div也浮动(BFC)盒模型盒模型组成：内容(content),innerpadding,border,outermargin(边距)IE8及以下版本浏览器，不声明DOCTYPE，内容宽高会包含innerpadding和border，称为怪异盒模型（IEboxmodel）标准（W3C）盒模型：elementwidth=width+padding+border+marginWeird(IE)boxmodel:elementwidth=width+margin标准浏览器通过设置css3box-sizing:content-盒子;//默认标准（W3C）框模型元素效果box-sizing:border-box;//触发怪异（IE）盒模型元素的效果box-sizing:inherit;//继承父元素box-sizing属性的值继承可继承的样式：font-size,font-family,color,list-style,cursor不可继承的样式：width,height,border,padding,margin,background方法隐藏元素可见性：隐藏；该属性只是简单的隐藏了某个元素，但是该元素所占的空间依然存在opacity:0;CSS3属性，设置0可以让一个元素完全透明position:absolute;设置一个大的左负值定位，让元素定位在可视区域之外display:none;该元素变得不可见，不再占用文档中的空间变换：比例（0）；设置一个元素无限缩小，该元素将不可见，并保留该元素原来的位置