以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值： css /权重为1/ div{ } /权重为10/ .class1{ } /权重为100/ id1{ } /权重为100+1=101/ id1div{ } /权重为10+1=11/ .class1div{ } /权重为10+10+1=21/ .class1.class2div{ } 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现

‐预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性， 还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。 ‐后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的 是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

（1）有两种，IE盒子模型、W3C盒子模型； （2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)； （3）区别：IE的content部分把border和padding计算了进去;

选择符 1.id选择器（myid） 2.类选择器（.myclassname） 3.标签选择器（div,h1,p） 4.相邻选择器（h1+p） 5.子选择器（ulli） 6.后代选择器（lia） 7.通配符选择器（） 8.属性选择器（a[rel="external"]） 9.伪类选择器（a:hover,li:nth‐child） 可以继承属性 可继承的样式：font‐sizefont‐familycolor,ULLIDLDDDT; 不可继承的样式：borderpaddingmarginwidthheight;

1、优先级就近原则，同权重情况下样式定义最近者为准; 2、载入样式以最后载入的定位为准; 优先级为: !importantidclasstag important比内联优先级高

css p:first‐of‐type选择属于其父元素的首个<p元素的每个<p元素。 p:last‐of‐type选择属于其父元素的最后<p元素的每个<p元素。 p:only‐of‐type选择属于其父元素唯一的<p元素的每个<p元素。 p:only‐child选择属于其父元素的唯一子元素的每个<p元素。 p:nth‐child(2)选择属于其父元素的第二个子元素的每个<p元素。 :after在元素之前添加内容,也可以用来做清除浮动。 :before在元素之后添加内容 :enabled :disabled控制表单控件的禁用状态。 :checked单选框或复选框被选中。

1、给div设置一个宽度，然后添加margin:0auto属性 css div{ width:200px; margin:0auto; } 2、居中一个浮动元素 确定容器的宽高宽500高300的层 设置层的外边距 css .div{ width:500px;height:300px;//高度可以不设 margin:‐150px00‐250px; position:relative;//相对定位 background‐color:pink;//方便看效果 left:50%; top:50%; } 3、让绝对定位的div居中 css .div{ position:absolute; w...

block象块类型元素一样显示。 none缺省值。象行内元素类型一样显示。 inline‐block象行内元素一样显示，但其内容象块类型元素一样显示。 list‐item象块类型元素一样显示，并添加样式列表标记。 table此元素会作为块级表格来显示

absolute:生成绝对定位的元素，相对于最近一级的定位不是static的父元素来进行定位。 fixed（老IE不支持）生成绝对定位的元素，通常相对于浏览器窗口或frame进行定位。 relative生成相对定位的元素，相对于其在普通流中的位置进行定位。 static默认值。没有定位，元素出现在正常的流中 sticky生成粘性定位的元素，容器的位置根据正常文档流计算得出

‐因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。 ‐当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。 最简单的初始化方法：{padding:0;margin:0;}（强烈不建议） 淘宝的样式初始化代码： css body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0;} body,bu...

无论属于哪种，都要先找到其祖先元素中最近的position值不为static的元素，然后再判断： 1.若此元素为inline元素，则containingblock为能够包含这个元素生成的第一个和最后一个inlinebox的paddingbox(除margin,border外的区域)的最小矩形； 2.否则,则由这个祖先元素的paddingbox构成。如果都找不到，则为initialcontainingblock。 补充： 1.static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分） 2.absolute:向上找最近的定位为absolute/relat...