CSS常见样式2

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

作用在块级元素上面，可以使得块级元素的子元素水平居中显示。

二，IE 盒模型和W3C盒模型有什么区别?

盒模型从外到内分别是：margin border padding content(width和height)

• w3c盒模型:设置宽高的时候，是给content设置的width和height，不考虑元素的margin,padding,border，所以实际的元素要比width和height规定的大

• IE盒模型：设置宽高的时候，是给content,padding以及border设置的width和height,这时的content的宽高要小与给定的width和height。

• 总结：w3c中盒模型padding,border不占width,height。IE盒模型中，width和height包括content,padding和border。

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

box-sizing: content-box; /*w3c标准盒模型*/ 
box-sizing: border-box;  /*IE盒模型*/

给整个页面应用IE盒模型

四，line-height: 2和line-height: 200%有什么区别?

• line-height: 2 是相对于文字本身的2倍。

• line-height: 200%是父元素文字高度的2倍。

• 给父元素增加line-height: 2和line-height: 200%两个属性时，line-height: 2下的子元素的文字不管自身的文字font-size多大，继承父元素的line-height: 2之后，行高都是自身文字大小的2倍，而在line-height: 200%下的子元素的font-size的大小不会改变行高的大小，因为line-height: 200%在计算的时候只计算父元素当时的font-size，然后应用为一个固定的值，不会因为子元素的font-size的值的大小而改变。所以，如果想要父元素下的子元素的行高无论自身font-size为多少，都有行高为自身的2倍的时候，应该应用line-height:2。

• 另外可以通过height=line-height来垂直居中单行文本。

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

• inline-block 既呈现出Inline的特性（不占据一整行，宽度由内容宽度决定），又呈现出block特性（可以设置宽高，内外边距）

• 缝隙问题：元素之间有空白字符（回车换行等）会导致两个inline-block元素产生缝隙

• 消除缝隙的办法：

1. 可以通过修改html文件的方式来消除缝隙。

<style type="text/css">
    .wrap{
        font-size: 0;
    }
    span{
        display: inline-block;
        border: 1px solid;
        width: 100px;
        height: 50px;
        font-size: 14px;
    }
</style>

<div class="wrap">
    <span>deejay</span>
    <span>deejay</span>
</div>

通过使用父元素包裹，设置font-size为0之后，再在inline-block元素中将font-size设回来，但是这种方式具有一定的副作用。

3. 多个元素时不设置inline-block，而是增加一个div包裹这些元素，让里面的元素浮动，然后给包裹的这个div清除浮动，再给这个div设置为inline-block，这样可以清除缝隙，通过外部设置text-align等属性还能设置居中等。

<style>
    body{
        margin: 0;
    }
    .clearfix::after{
        content: '';
        display: block;
        clear: both;
    }
    .p{
        border: 1px solid red;
        text-align: center;
        /*4.设置textalign使其居中*/
    }
    .c{
        display: inline-block;
        /*3.设置c为inline-block*/
    }
    span{
        border: 1px solid;
        padding: 8px 16px;
        float: left;
        /*1.让两个span浮动*/
    }
</style>

<div class="p">
    <div class="c clearfix">
        <!--2.给.c清除浮动使其回归文档流-->
        <span>YES</span>
        <span>NO</span>
    </div>
</div>

4. 使用css3 flex布局可以消除缝隙,display:flex;justify-content:center居中。

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

通过增加vertical-align: top;来进行顶部对齐。

六，CSS sprite 是什么?

CSS雪碧图（精灵图）：指将不同的小图片/图标合并在一张图上面，使用CSS sprite可以减少网络请求，提高网页加载性能

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

• opacity: 0; 透明度为0，整体
• visibility: hidden; 和 opacity: 0类似。
• display: none; 消失，不占用位置。
  background-color: rgba(0,0,0,0) 只是背景色透明