Css 知识点（不要删）

测试：火狐浏览器，谷歌浏览器，ie 6~9就足够了，现代浏览器从ie10及 以后兼容性好（适合html5）

1.结构用id，内容用class；fr\fl 用于结构上；能用margin-right就不要用

2.margin 总是会有问题，先考虑padding，在用margin

2.inline，block ，inline-block 比较

• inline：行内元素设置width,height属性无效；margin和padding属性水平方向有效，垂直方向无效；（span，a..）。
• block：块级元素可以设置width,height；块级元素即使设置了宽度,仍然是独占一行；可以设置margin和padding属性水平垂直都有效；（div，p..）。
• inline-block:行内块级元素具有width,height特性又具有inline的同行特性。（img和表单元素...），ie6不支持该属性

ps：

1. inline 的height 其实可是设置，但是不影响元素的位置
2. 使用inline-block ，因为基线不同，元素会不对齐，给块级行内元素添加vertical-align：top

3.margin-top的hack

父元素的盒子包含一个子元素盒子，给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值，而子元素和父元素的边距则没有发生变化。

解决方法：

• 修改父元素的高度，增加padding-top样式模拟（padding-top：1px；常用）
• 为父元素添加overflow：hidden；样式即可（完美）
• 为父元素或者子元素声明浮动（float：left；可用）
• 为父元素添加border（border:1px solid transparent可用）
• 为父元素或者子元素声明绝对定位

5.ie6的hack：margin-left 两倍边距，使用最好不要用margin，padding代替

6.body的默认字体是12px 这时 1em=12px， font-weight：bold（700），normal（400）

7.visibility：hidden；元素虽然被隐藏，但是元素占用的空间没有被隐藏；display：none; 元素被隐藏，所占的空间也被隐藏

8.text-indent ，相当于空格，属于content的一部分

9.现代浏览器默认会给表单元素input 添加line-height，使它的输入文字垂直居中，但是ie6没有默认加，需要手动加

10.圆角

Webkit内核的浏览器支持“-webkit-border-radius: 10px;”属性(10px是圆角半径)，可以直接解析出圆角;Firefox浏览器支持“-moz-border-radius: 10px;”属性，也是可以直接解析出圆角;IE系浏览器则需要加上“border-radius: 10px;”的属性浏览器的内核引擎，基本上是四分天下：

• Trident: IE 以Trident 作为内核引擎;
• Gecko: Firefox 是基于 Gecko 开发;
• WebKit: Safari, Google Chrome,傲游3,猎豹浏览器,百度浏览器 opera浏览器 基于 Webkit 开发。

11.谷歌浏览器最小的字体是12px

12. line-height 只影响内容的位置，不影响块元素的大小及位置

13.宽屏窄屏的控制 ：

js控制，如果是宽屏，给body添加一个class= full （宽屏1200px ，窄屏980px）

ps：最好用固定宽度，尤其是页面比较复杂的情况

14.行内标签如 a,span,等直接的距离会受到空格符的影响，解决方法：float

15.行内元素不要包含块级元素，浮动元素中的块的宽度是浮动的宽度，但是如果ie6设置了height ，浮动元素内的块级元素的宽度就变为100%

Ps：解决方法：使用上下填充来代替height, 或者设置宽度

16:ie 的hack：_div{}

17.

http://www.cnblogs.com/liqun/p/3410364.html