CSS常见样式2

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

text-align 属性规定元素中的文本的水平对齐方式
可能的值

|值 |描述|
|-||
|left| 把文本排列到左边。默认值：由浏览器决定。|
|right |把文本排列到右边。|
|center |把文本排列到中间。|
|justify |实现两端对齐文本效果。|
|inherit |规定应该从父元素继承 text-align 属性的值。|

1. text-align不会作用于块级元素。
2. text-align作用于文本。
3. text-align作用于内联元素。
4. text-align作用于图片。
5. text-align作用于inline-block

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

标准盒子模型

W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

IE盒子模型

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

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

可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

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

• 继承上的区别
• 父元素设置line-height:2会直接继承给子元素，子元素根据自己的font-size再去计算子元素自己的line--
  height。
• 父元素设置line-height:200%是计算好了line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。

5. inline-block有什么特性？如何去除缝隙？高度不一样的inline-block元素如何顶端对齐?

• inline-block 会将对象呈现为内联对象，但是对象的内容作为块对象呈现。旁边的内联对象会被呈现在同一行内。(准确地说，应用此特性的元素呈现为内联对象，四周元素保持在同一行，但可以设置宽度和高度地块元素的属性)

• 如何去除缝隙:

1. 移除空格
   元素间留白间距出现的原因就是标签段之间的空格，因此，去掉HTML中的空格，自然间距就木有了。考虑到代码可读性，显然连成一行的写法是不可取的，我们可以：

<div class="space">
    <a href="##">
    惆怅</a><a href="##">
    淡定</a><a href="##">
    热血</a>
</div>

或者是：

<div class="space">
    <a href="##">惆怅</a
    ><a href="##">淡定</a
    ><a href="##">热血</a>
</div>

或者是借助HTML注释：

<div class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>

等

2. 使用margin负值

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

3. 不让标签闭合
   如下处理：

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血</a>
</div>
为了兼容IE6/IE7等浏览器，最后一个列表的标签加上闭合。

4. 使用font-size:0

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

5. 使用letter-spacing

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

6. 使用word-spacing

.space {
    word-spacing: -6px;
}
.space a {
    word-spacing: 0;
}

一个是字符间距letter-spacing一个是单词间距word-spacing，大同小异。据测试，word-spacing的负值只要大到一定程度，其兼容性上的差异就可以被忽略。因为，貌似，word-spacing即使负值很大，也不会发生重叠。

• 高度不一样的inline-block元素如何顶端对齐
  给 inline-block 元素添加 vertical-align属性设置对齐方式

可能的值

|值| 描述|
|-||
|baseline| 默认。元素放置在父元素的基线上。|
|sub |垂直对齐文本的下标。|
|super |垂直对齐文本的上标|
|top| 把元素的顶端与行中最高元素的顶端对齐|
|text-top| 把元素的顶端与父元素字体的顶端对齐|
|middle| 把此元素放置在父元素的中部。|
|bottom |把元素的顶端与行中最低的元素的顶端对齐。|
|text-bottom| 把元素的底端与父元素字体的底端对齐。|
|% |使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。|
|inherit| 规定应该从父元素继承 vertical-align 属性的值。|

6. CSS sprite 是什么?

sprite指的是精灵图，CSS sprite简单来说就是图片拼合技术，主要是指将网页上很多用于装饰作用的小图片全部整合到一张图片内，减少网页加载时的HTTP请求并发数，页面加载时利用CSS中的背景图片定位属性background-position来指定需要显示这张大图上指定位置的部分

使用这个技术的优点就是减少页面加载时的瞬间HTTP请求并发数，提高了加载速度

缺点是这些被整合到一张图片的各种小图案后期维护修改比较麻烦，修改任意一个小图案都需要修改这张整图，同时还需要注意小图片在这个整图上的位置不能改变

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

• display:none
  设置元素的display为none是最常用的隐藏元素的方法。

.hide {
   display:none; 
 }

将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。

• visibility:hidden
  设置元素的visibility为hidden也是一种常用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。

.hidden{
    visibility:hidden
}

visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景

• opacity:0
  opacity属性我相信大家都知道表示元素的透明度，而将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。

.transparent {
    opacity:0;
 }

这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。

• text-indent:-999em
  这个属性本来是用来设置文本缩进的，一般我们习惯是首行缩2个中文字所以一般的用法是text-indent:2em但它允许负值，假如给它一个负值，这个负值足够大，大到一般我们浏览器无法显示，好像它跟浏览器宽度躲猫猫一样。

.move{
    text-indent:-999em
}

假如说用户浏览器分辨率不够支撑其缩减的宽度，那么它就默认显示“没有”，但是它会占据网页空间，只不过是我们在前端“看不见”而已，但是它会影响到文档的布局，感觉它是悬挂在本文前面，一直挂到你电脑屏幕足够大显示它为止。
一个比较好的可选方案：

.move{
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
}

• font-size:0
  这个值是利用了字体大小来控制，通常默认的网页字体大小为12-14px，不过当文字大小为0px就可以控制文字”消失“了。

.size{
    font-size:0
}

• .position
  我们都知道position是用来定位元素的，数值可正可负，假如说一个元素的距离我们的视窗（电脑显示屏幕）足够大，大到我们浏览器也无法显示出来，那么它也是“消失”的。

.move{
   position:absolute;
   top:-999em
}