css小知识

*{}

星选择器对所有html元素都生效。一般用于清除边框内外边距使用。

拥有有宽度的块级元素可以利用外边距的自动适应来达到屏幕居中的目的。

在父元素加上相对定位属性可以使子元素的绝对定位定位在父元素内，也就是说在父元素使用了相对定位，那么子元素再使用绝对定位就会以父元素参考位置。

浮动属性可以让任何拥有宽高度的块级元素脱离元素列表，并且以父元素为参考进行排列。常见的使用方式有导航栏、模块自适应、列排序等。

有时会看见两个内联元素没有任何设置却有距离不能无缝隙，这是因为在两个元素中间有换行符或空格时HTML自动为两个元素加一个空格符，解决办法可以去掉两个元素中间的换行或空格，或者把两个元素转换块级元素display: block;再定位或者浮动也能达到无缝隙。

也有人碰到这种问题，当给子元素加一个上侧外边距父元素的背景或者背景色会跟着子元素一起向下移动，这是因为当一个元素包含在另一个元素中时，假设没有内边距padding或边框border把外边距分隔开，它们的上和/或下外边距就会发生合并。这时只需要给父元素添加一个边框或者溢出隐藏overflow: hidden;就可以解决了。

如果使谁又在用了浮动或者定位等等属性那么z-index就是控制谁在前面显示而谁又在后面显示的关键。

如果不设置字体浏览器会使用浏览器默认字体，市面上众多的浏览器会使用很多不同的默认字体，这时会造成很多文字溢出或者自动换行的尴尬局面，所以设置一种字体也是很重要的。

有时看见别人这样设置了属性，这是为一些老掉牙的IE浏览器而做的兼容，例如IE6、IE7这种毒瘤，当使用这些老掉牙的浏览器浏览网页时浏览器会选择专门为它设置的属性。

ID class style=""

三种设置CSS的方法优先级别不一样，class权限最小、其次是ID、内联样式优先级别最高。*ID的名字是唯一的，既给一个元素定义了一个id="box"那么这个box只能在这个元素使用，不能用于其他元素。

文字段落开始缩进2个单位的位置，使用代码可以让你少一些丑的操作，比如缩进2个单位的字符如果用 需要 这样？

行高属性line-height有时可以充当上下居中的属性来使用，只对文字或者内联元素生效。

有时使用了浮动会影响父元素或同级元素一起浮动，这时需要清除浮动clear:both;。

有时会发现左右两个元素上下不对齐，多种浏览器多样显示，给一个对其属性vertical-align:middle;top上边对齐、bottom下边对齐。

有的老掉牙浏览器并不兼容新属性，比如min-或max-这时给一个权重，再设置需要的宽高与最大最小宽高。

IE6下double-margin bug

给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。给浮动容器定义display:inline即可解决。

IE6下mirror margin bug

当外层元素内有float元素时，外层元素如定义margin-top:14px将自动生成margin-bottom:14px，padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这一种出现条件，解决办法可以试试加外边框或者溢出隐藏属性。

IE6下吞吃现象

还是IE6，上下两个div上面的div设置背景却发现下面没有设置背景的div也有了背景，这就是吞吃现象，对应上面的背景吞吃现象，还有滚动下边框缺失的现象。使用zoom:1、这个zoom好象是专门为解决IE6 bug而生的。

IE6注释也能产生bug

这是看别人的总结bug使用的文案，ie6的这个bug下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。用“ picRotate start ”方法写注释解决。

IE7下 img 下留白

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写

或者给img设置为块级元素。

IE 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。

解决办法给溢出隐藏的元素也加上绝对属性。

IE6下 float元素如没定义宽度，内部如有div定义了height或zoom:1，即使有宽度，这个div也会占满一整行

解决办法给float元素也加一个宽。

IE下 width:100%会向上逐层搜索width值，忽视浮动层的影响，其他浏览器会遇到浮动层停止。

给浮动层也加上width:100%解决。

更多知识请持续关注我！或上网查询相关资料。