css 的小细节，小总结

CSS的一些零碎总结

1、CSS 伪元素用于向某些选择器设置特殊效果（用来当作一个东西的，跟一个元素差不多，但不是元素）。

① :frist-line伪元素：用于向文本首行设置特殊样式，但是只能用于块级元素。

以下属性可应用于 “ frist-line ” 伪元素：         font、color、background、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear 。

② :first-letter伪元素：用于向文本首字母设置特殊样式，只能用于块级元素。

以下属性可应用于 “ first-letter ” 伪元素：         font、color、background、margin、padding、border、text-decoration、vertical-align(仅当float为none时)、text-transform、line-height、float、clear 。

③ 伪元素和css类可以配合使用：p.article: first-letter { }，可以使所有 class 为 article 的段落的首字母样式改变 。

④ 多重伪元素：可以结合多个伪元素来使用。p: first-letter { }，p: first-line { }：段落的第一个字母根据p: first-letter具体样式显示，第一行其余文本根据p: first-line具体样式显示，段落中其余文本以具体段落设置的其他样式显示。

⑤ :before伪元素：可以在元素内容前面插入新内容 。

⑥ :after伪元素：可以在元素的内容之后插入新内容 。

⑦ 许多人喜欢给 blockquote 引用段添加巨大的引号作为背景，这种时候我们就可以用 :before 来代替 background 了，既可以给背景留下空间，还可以直接使用文字而非图片：

    blockquote::before {
        content: open-quote;
        position: absolute;
        z-index: -1;
        color: #DDD;
        font-size: 120px;
        font-family: serif;
        font-weight: bolder;
    }

⑧ 清除浮动：

.clear-fix { *overflow: hidden; *zoom: 1; }
.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

2、CSS 伪类用于向某些选择器添加特殊的效果（用来选择的）

① :active：向被激活的元素添加样式

② :focus：向拥有键盘输入焦点的元素添加样式

③ :hover：当鼠标悬浮在元素上方时，向元素添加样式

④ :link：向未被访问的链接添加样式

⑤ :visiter：向已被访问的链接添加样式

⑥ :first-child：向元素的第一个子元素添加样式

⑦ :lang：向带有指定lang属性的元素添加样式，使你有能力为不同的语言定义特殊的规则：

q:lang(no)
   {
   quotes: "~" "~"
   }

<p>文字<q lang="no">段落中的引用的文字</q>文字</p>

3、解决塌陷，清除浮动

① 添加空元素

经典的解决方法，就是在浮动元素下方添加一个非浮动元素。 代码这样写：

<div>
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
<div style="clear:both;"></div>
</div>

原理是父容器现在必须考虑非浮动子元素的位置，而后者肯定出现在浮动元素下方，所以显示出来，父容器就把所有子元素都包括进去了。这种方法比较简单，但是要在页面中增加冗余标签，违背了语义网的原则。

② 浮动的父容器

另一种思路是，索性将父容器也改成浮动定位，这样它就可以带着子元素一起浮动了。

<div style="float:left;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>

这种方法不用修改HTML代码，但是缺点在于父容器变成浮动以后，会影响到后面元素的定位，而且有时候，父容器是定位死的，无法变成浮动。 ③ 浮动元素的自动clearing 让父容器变得可以自动"清理"（clearing）子元素的浮动，从而能够识别出浮动子元素的位置，不会出现显示上的差错。 要做到这点，只要为父容器加上一条"overflow: hidden"的CSS语句就行了。代码这样写：

<div style="overflow: hidden;">
<div style="float:left;width:45%;"></div>
<div style="float:right;width:45%;"></div>
</div>

这种方法的缺点主要有二个，一个是IE 6不支持，另一个是一旦子元素的大小超过父容器的大小，就会出显示问题。

④ 通过CSS语句添加子元素呢，这样就不用修改HTML代码

.clearfix:after {
content: "\0020";
display: block;
height: 0;
clear: both;
}
.clearfix {
zoom: 1;
}

"clearfix"是父容器的class名称，"content:"020";"是在父容器的结尾处放一个空白字符，"height: 0;"是让这个这个空白字符不显示出来，"display: block; clear: both;"是确保这个空白字符是非浮动的独立区块。添加一条IE 6的独有命令"zoom:1;"就行了，这条命令的作用是激活父元素的"hasLayout"属性，让父元素拥有自己的布局。IE 6会读取这条命令，其他浏览器则会直接忽略它。

4、什么情况下hidden不起作用

position设置成fixed，overflow的hidden不起作用。

5、css盒子模型，问的是border、padding、margin三个属性如何作用在一个块级元素上？

一个盒子的宽度 = border + padding + width(content内容的宽度)。

我想给一个给一个盒子加一个宽度，然后再加一个padding，但是这个盒子原本的宽度不改变，也就是说，width的值没有改变，且不会因为加了padding而往外扩增，该如何做？ 有两种方式：

① 当一个块元素没有设置width时，这个盒子的宽度是默认填充父元素的宽度，这时随便给这个块元素加padding都是向内扩展的，不会向外扩展。

② border-sizing: content-box / border-box / inherit ;

content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。

border-box：为元素设定的宽度和高度决定了元素的边框盒，就是说,用border的宽度来指代width，把加上border、padding之后的宽度，用width强行给限制住，然后宽度也就会变成向内扩展。

inherit：规定应从父元素继承 box-sizing 属性的值。

6、关于字体的，说一下rem这个单位（移动端），（产生和设置）

em是相对于父元素的font-size，rem是相对于根元素的font-size。

rem的补充：

① 对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小；

② IE9/IE10在用于伪元素时或者使用字体简写声明时不支持rem；

③ IOS Safari5.0-5.1虽然支持rem，但是在使用媒体查询时不支持rem。

7、如何在css代码里提升代码的优先级？ a { color:red;} 用什么方法覆盖掉？ 解决：

① body a { color:red;} 优先级计算公式：标签=1，id=100，class=10，加起来就是他的优先级。

② 在color后面加一个!important，强行将优先级提升到最大。

③ !important提升指定样式规则的应用优先权。

8、有两个CSS语句能起到隐藏节点的作用visibility和display

（1）visibility

规定了元素是否可见，即使不可见也会占用上面的空间，在这里就是在指它与display的不一样了。

（2）display

这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

（3）对比：

相同点：都有相同的功能就是隐藏。

不同点：当我们定义了display后，在渲染树中不会引擎是不会去构建这个框的。而visibility当我们使它隐藏的时候，他在渲染树中会构建，只是不去渲染。这也就是W3c上面所说的不可见会占空间的原因。他们两者在优化中visibility会显得更好，因为我们不会因为它而去改变了文档中已经定义好的显示层次结构了。

[转载自http://www.cnblogs.com/xsilence/p/6050412.html]