任务9 CSS常见样式2

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

作用：规定元素中的文本的水平对齐方式。作用于块级元素，能够使文本、图片、行内元素以及input标签等实现水平居中。

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

IE盒模型：

IE
W3C盒模型：

W3C

区别：在设置CSS样式的width height属性时
对于IE：
width=content的width + padding-right + padding-left + border-right + border-left；
height=content的height + padding-top + padding-bottom + border-top + border-bottom；
对于W3C
width=content的width； height=content的height

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

CSS3中新增的样式，规定使用IE盒模型

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

line-height: 2：父元素的行高为2，会直接继承给子元素，子元素根据自己的font-size会动态的计算子元素自己的line-height。
line-height: 200%：父元素的行高为200%，会根据父元素字体的大小计算出line-height值，然后把这个计算值给子元素继承，子元素继承拿到的就是最终的值了。此时子元素设置font-size就对其line-height无影响了。

示例：

HTML
<div id="eg-num">
   <div class="box father1">
     <p>我的line-height: 2我的line-height: 2我的line-height: 2我的line-height: 2</p>
   </div>
 </div>
 <div id="eg-percent">
   <div class="box father2">
     <p>我的line-height: 200%我的line-height: 200%我的line-height: 200%我的line-height: 200%</p>
   </div>
 </div>

CSS
#eg-num {
    line-height: 2;
}
#eg-percent {
    line-height: 200%;
}
.box {
    width: 500px;
    border: 1px solid;
    margin: 2px;
    padding: 10px;
}
.father1 p {
    font-size: 40px;
}
.father2 p {
    font-size: 40px;
}

效果

inline-block有什么特性？

既有inline的特性，即不占据一整行，宽高由内容的宽高决定；
又有block的特性，即可设置属性width、height、margin、padding

如何去除缝隙？

产生缝隙的原因：浏览器默认回车符或空格为一个字符
方法1：设置父元素的font-size：0，即使空白字符的字体大小为0，再单独给子元素设置font-size；
方法2：删去空格或回车符，即压缩HTML代码

示例：

HTML
 <div id="wrap">
   <span class="box">饥人谷</span>
   <span class="box">不作处理</span>
 </div>
 <div id="wrap1">
   <span class="box">饥人谷</span>
   <span class="box">改变父元素字体</span>
 </div>
 <div id="wrap2">
   <span class="box">饥人谷</span><span class="box">不加回车或空格</span>
 </div>

CSS
.box {
    display: inline-block;
    text-align: center;
    border: 1px solid blue;
    width: 200px;
    margin-top: 30px;
}
#wrap1 {
    font-size: 0;
}
#wrap1 span {
    font-size: 20px;
}

效果

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

vertical-align: top;
示例：

HTML
 <div id="wrap">
   <span class="box">饥人谷</span>
   <span class="box">我爱学习 学习使我快乐 我愿沉迷学习而无法自拔</span>
 </div>

CSS
.box {
    display: inline-block;
    text-align: center;
    border: 1px solid blue;
    width: 100px;
    vertical-align: top;
}

效果

CSS sprite 是什么?

CSS精灵图，将众多图标、图片合成到一张图片上，通过CSS样式属性background-position，设置图片的宽高位置，展现出需要的图标或图片。
优点：减少网页请求、提高网页加载性能；缺点：无法缩放、不好修改。

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

diaplay: none;/*元素消失，不占用文档流中的位置*/
visibility: hidden;/*元素隐藏，本身存在但用户看不到，占用文档流的位置*/
opacity: 0;/*透明度为0，与visibility :hidden类似，在文档流中占用位置*/
background-color: (0,0,0,0);/*只是背景色透明*/

代码任务1 精灵图
 代码任务2 iconfont
注：：before加颜色以后再给：hover加颜色无效，是因为before的优先级比hover高