text-align:center
规定元素中的文本水平居中。作用在块级元素上，让其中的内联元素水平居中。
IE盒模型和W3C盒模型的区别
IE盒模型width=content+padding+border,IE6/7/8的怪异模式（不加DOCTYPE）时用IE盒模型。
W3C的width和height设置的是content的宽高。
border-box
*（box-sizing:border-box;）的作用是：border-box告诉浏览器去理解你设置的边框和内边距的值是包括在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其他的border和padding，内容区的实际宽度会是width减去border+padding的计算值。大多数情况下这使得我们更容易的设置一个元素的宽高。而在此代表所有的元素都设定为border-box。
line-height:2和line-height:200%的区别
line-height指的是单行文本的行高，可以继承。
200%是根据父元素的字体大小计算出行高，并且子元素依旧沿用这个计算后的行高。而2则是根据子元素自己字体的大小去乘以2来计算行高。
inline-bock
特性
既呈现inline的特性(不占据一整行，宽度由内容的宽度决定)
又呈现block的特性（可设置宽高，内外边距）
缝隙问题
<body>
<style>
body{
text-align:center;
}
.box{
border:1px solid;
width:100px;
display:inline-block;
}
.wrap{font-size:0;}
</style>
<div class="wrap">
<span class="box">hello</span>
<span class="box">hello</span>
</div>
</body>
高度不一样的inline-block元素顶端对齐
vertical-align:定义行内元素的基线相对于该元素所在行的基线的垂直对齐，允许负值和百分比，这样会使元素降低而不是升高。值有top/bottom/middle,三个值尝试设置。
css sprite
雪碧图或者精灵图
将不同的图片/图标合并在一张图上，使用精灵图可以减少网络请求，提高网络性能。
理解失误：为什么像素值是负数。比如一个无序列表<ul>中的每一项的<li>都设置背景图片为这个大图片，当显示的时候，就像在一张完整的图片的每个区域开个洞，各自看这张图片的局部，这样理解就解释不了两个<li>怎么就显示一张小图片。之所以有这样的理解是因为忽略了每个li独自拥有这张大图，然后再移动这张大图，想显示哪个区域就显示哪个区域。为什么像素值是负数呢？以图片左上角为原点，整张图片向左和向上移为负，整张图片向右和向下移为正。
让一个元素看不见的几种方式
opacity:0;透明度为0，范围：0~1。全部透明。
visibility:hidden;和opacity:0类似。占位置。
display:none;消失，不占位置。
background-color:rgba(0,0,0,0)只是背景色透明。
网友评论