CSS：常见样式2

---

一、text-align：center

text-align: center; 的作用是让文档内容水平居中，作用在块级元素内的行内元素上，对display为inline-block属性的元素也有效。

---

二、IE盒模型和W3C盒模型

IE盒模型
W3C盒模型

区别

• IE盒模型的宽度和高度包含了内容本身宽高、border的宽度和padding的宽度；
• W3C盒模型的宽度和过度仅仅包含内容的宽度和高度。

---

三、{box-sizing：border-box}

添加了{box-sizing：border-box}样式后，会指定使用IE盒模型，此时设置的宽度会包含border宽度和padding。

---

四、{line-height：2}和{line-height：200%}的区别

• line-height设置为数值2时，行高是指字体尺寸的2倍；
• line-height设置为百分比200%时，行高是指其父元素字体尺寸的200%。

<div class="wrap">
  <h2>此处行高比为h2字体尺寸的2倍</h2>
  <p>jirengu</p>
</div>
<div class="wrap2">
  <h2>此处行高为父元素的字体高度的200%</h2>
  <p>jirengu</p>
</div>

.wrap{
  line-height:2;
}
.wrap2{
  line-height:200%
}
p,
h2{
  background-color:red;
}

---

五、inline-block

inline-block特性

• 既有inline的特性，不占据一整行；
• 又有block的特性，宽度由内容宽度决定，可设置宽高，内外边距。

如何去除两个inline-block元素之间的缝隙

两者之间的缝隙是因为在写html的时候，两个标签之间有空格，在网页渲染的时候空格也被渲染出来（多个空格只会保留一个）。
解决办法：

• 可以在写html时把两个标签挤在一起，不留空格；
• 也可以设置父元素的font-size为0，即把空格的大小变为0，然后在子元素中再设字体大小。

高度不一的inline-block如何对齐

可以在父元素上添加vertical-align样式，确定对齐样式。

---

六、CSSsprite

CSSsprite是一种网页图片应用处理方式，将若干小图标集中放置在一张图片上，然后通过设置不同的background-position来显示不同的图标。这样可以减少网络请求次数，提高网页加载性能。

---

七、让一个元素“看不见”的几种办法

• opacity: 0;
  整体透明度设置为0，但依然占据着空间；
• visibility: hidden;
  与opacity类似，整体透明度为0，但依然占据着空间；
• display: none;
  整个元素消失，不占空间；
• background-color: rgba(0,0,0,0.2)
  背景色设置为透明。