百度前端学院遇到的CSS小知识点整理

1.Logo优化：在div中加h1再加a标签，加h1的目的是提高访问权重，为了不让字显示出来，在css中添加text-indent:-20000em;，可使用精灵图添加background。

2.对img元素进行居中处理：
1）对包含其的上级元素进行：text-align:center;
2）利用padding值进行处理；
3）对img元素进行display:block处理，然后margin:0 auto;或者在外层加div再进行magin处理（好像必须要有width）

3.对li样式去点：ul{list-style:none;}或使用颜色隐藏。

4.li样式横排：向左浮动或者display:inline-block;

5.给tr设置border值时不显示：
解决方法：将tr所在table的css样式border-collapse设置为 collapse；

table {  
    border-collapse: collapse;
}
 
tr {
    border: 1px  solid #000;
}

6.在字母、数字等外面加圆圈，可以利用border和border-radius来完成，使用text-align:center和line-height值为高度值可以使内容居中到圆圈中间。

7.在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不会管你实际的尺寸是多少。

8.可以使用backgroud-position对背景图片进行定位。

9.HTML节点居中
margin:0 auto、vertical-align:center、text-aligh:center
1. width:auto 属性， 如果标签没有固定的宽度，那么width:auto已经足够了； 如果固定宽度了，就加上margin:0 auto 或者margin-left:auto; margin-right:auto。
2. 如果是img图片居中，那么可能的使用text-align:center加上垂直居中vertical-align:center, 但是在使用它时要注意，有时会影响你的文字布局。
3. 文字居中或者子元素居中text-aligh:center，有时还要结合display=inline。

10.在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不会管你实际的尺寸是多少。

11.img元素下面有4px的空白，是因为基线引起的，图片底部是基于文字基线的。英文字母的下面会有超出来的部分。解决方法：
设置img为display:block或者为其父类元素添加font-size:0或者line-height:0,或可以改变vertical-align，让它不是baseline，可以为vertical-align:top/bottom/middle,text-top，text-bottom,如果父对象的宽、高固定，图片大小随父对象而定，那么可以配置 “overflow:hidden;”来解决。如本例中可以向#sub中添加以下代码：“width:88px;height:31px;overflow:hidden;”。配置图片的浮动属性: img {float:left;}.

12.CSS实现同一行的图片和文字垂直居中对齐的方法:
1.在图片和文字所在的行中添加CSS属性：vertical-align:middle.(align="absmiddle"?没有发现作用)发现可以和行高配合使用。
2.div嵌套：将图片和文字分别套上一个div，就可以利用 margin 熟悉任意定位了
3.把图片作为背景：如果你的图片只是用来作为小图标放在文字的左侧，那就推荐用这个方法，图片设置成文字的背景，不循环，定位在左侧上下居中，文字向左padding图片的宽度加几个像素。background:url(template.jpg) no-repeat left center