【Web】CSS3 一些tips总结

1.如何防止父元素塌陷？

若一个父元素包含了浮动元素，它将塌陷具有零高度，具体的处理方法有：

（1） 在浮动元素后加一个div，设置clear:both;height:0;overflow:hidden
（2） 在最外层的div上添加clearfix

.clearfix:after {     //在类名为“clearfix”的元素内最后面加入内容；
    content: ".";     //内容为“.”就是一个英文的句号而已。也可以不写。
    display: block;   //加入的这个元素转换为块级元素。
    clear: both;     //清除左右两边浮动。
    visibility: hidden;      //可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间，只是看不到而已；
    height: 0;     //高度为0；
    font-size:0;    //字体大小为0；
}

或者

.clearfix{overflow:auto;_height:1%}

（3）设置父元素浮动

---

2.如何设置一段文字垂直居中？

设置该文字的line-height与div高度相同。

---

3.如何使图片和文字中心对齐？

设置image属性为vertical-align:middle

---

4.块级元素和内联元素的区别？

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

块级元素主要有：

 address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

    a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

   applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：
利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。
主要用的CSS样式有以下三个：

display:block – 显示为块级元素
display:inline – 显示为内联元素
dipslay:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

注：
1.我们常将< ul >元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。
2.内联元素的margin-left / margin-right及padding-left / padding-rigtht是可以控制的，所以可以通过这4个属性来控制内联元素的宽度。
3. 内联元素的内部也可以放块级元素标签，而且内部的块级元素标签会撑大外部的内联标签，所以可以通过放块元素来控制内联元素的高度.

<a> 
  <div style="width:100px;height:100px;">测试</div>
 </a>

附录：col, colgroup, frameset, html, style, table, tbody, tfoot, thead, title, tr, td 等几个元素标签是只读的，也就是不能使用innerHTML等进行动态赋值.

参考：http://blog.csdn.net/chen_zw/article/details/8713205

5.语音搜索

仅限于在Google中使用：

<input type=“text” x-webkit-speech=“ ”>

6.overflow:auto

新的作用：清楚浮动，将标签扩展到需要的大小，以包裹里面所有的元素。

7.下拉菜单动态效果实现的两种思路：

思路一：
（1）静态网页二级菜单制作：嵌入span标签，二级菜单使用position：absolute配合一级菜单的position：relative定位。
（2）下拉菜单的动态效果：使用hover，css: 设置display属性。
思路二：
（1）使用jquery来操作dom节点，添加响应事件，执行

$(this).children('ul').show()
$(this).children('ul').hide()

(2)如需动态添加dom，可使用

$().html()

注：常用属性：

a:text-decoration:none;
ul:list_type:none; display:block;
ul  li hover ul{}

8.css样式优先级

class+标签的优先级要高于只使用class样式.