CSS常用样式2

1.text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？

是块级元素中的行内内容水平居中
作用在block-level元素上（包括block和inline-block）
能block-level的元素中的行内元素，替换元素和inline-block元素居中。
- 备注： 替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。比如：<input /> type="text"，这是一个文本输入框，换一个其他的时候，浏览器显示就不一样(X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素，这些元素都没有实际的内容。

2.IE 盒模型和W3C盒模型有什么区别?

IE的盒模型与W3C盒模型的区别在与width的计算
W3C盒模型：width，height不包括padding和border
IE盒模型： width，height包括内尺寸+padding+border

Paste_Image.png

3.*{ box-sizing: border-box;}的作用是什么？

作用就是使浏览器使用IE的盒子模型，即width，height包括内容尺寸+padding+border

4.`line-height: 2`和`line-height: 200%`有什么区别?

line-height: 200%先换算成px，子元素再继承

<div style="line-height:200%;font-size:32px"> 200%*32 = 64
    <p style="font-size:24px;">行间距</p> // p行高为64px
</div>

line-height: 2为先继承，再换算成px。子元素继承父元素的数字，然后当前的字体尺寸相乘来设置行间距。

<div style="line-height:2;font-size:32px"> 
    <p style="font-size:24px;">行间距</p> // 2*24 行高为48px
</div>

5.1inline-block有什么特性？

既呈现 inline 特性(不占据一整行，宽度由内容宽度决定),又呈现 block 特性 (可设置宽高，内外边距)

5.2如何去除inline-block之间的缝隙？

移除空格
元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就没有了
使用margin负值

.space a {
    display: inline-block;
    margin-right: -3px;
}

margin负值的大小与上下文的字体和文字大小相关,例如，对于12像素大小的上下文，Arial字体的margin负值为-3像素，Tahoma和Verdana就是-4像素，而Geneva为-6像素。由于外部环境的不确定性，以及最后一个元素多出的父margin值等问题，这个方法不适合大规模使用。

使用font-size:0

.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}

5.3高度不一样的inline-block元素如何顶端对齐?

vertical-align:top;

6.CSS sprite 是什么?

是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
优点：
- 能很好地减少网页的http请求，从而大大的提高页面的性能
- 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变
缺点
- CSS sprite不能过大不然下载时间会太长

7.让一个元素"看不见"有几种方式？有什么区别?

opacity: 0 透明度为0，占用空间，你看不到它，但你不能点击它后面的元素。
visibility: hidden和opacity:0 类似,占用空间，你可以点击它后面的元素。
display:none该对象在页面上彻底消失，通俗来说就是看不见也摸不到。