css样式2

作者: LeeoZz | 来源:发表于2017-05-07 16:59 被阅读0次

DAY04
day2（乱）
CSS
前端学习笔记七
css 的基本语句构成是?
CSS基础
day03
我理解的CSS3及其兼容性问题和处理方式
day07
table设置样式

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

text-align:center能让文本内容居中，作用在块元素上，能让块元素中的行内元素居中，是可继承的属性。

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

IE盒模型与w3c盒模型的区别在于width和height的定义不一样：
IE盒模型的width包括了content、padding、border的宽度，height包括content、padding、border的高度；
w3c盒模型的width和height仅仅指content的宽度和高度。

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

在默认情况下，一个块元素的盒模型为标准盒模型，可以通过*{ box-sizing: border-box;}属性把盒模型变为ie盒模型。

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

line-height: 2 表示元素的行高是其自己字体大小的2倍；
line-height: 200% 表示元素的行高是其父元素字体大小的2倍。

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

inline-block可以使一个元素既有inline（不占据一整行，宽度由内容宽度决定）的特性，也有block（占据一整行，可设置宽高和内外边距）的特性；
当两个元素被赋予inline-block时，两个元素之间可能会出现缝隙:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style rel="stylesheet" type="text/css">
    .test {
  text-align:center;
}
.aa,.bb {
  display: inline-block;
  border: 1px solid;
  width: 100px;
}
  </style>
</head>
<body>
  <div class="test">
   <span class="aa">aa</span>
   <span class="bb">bb</span>
  </div>
</body>
</html>

实现如下：

这是由于两个元素之间存在空白符造成，故可以用以下办法解决：
1.元素连写，不换行；
2.在css中设置父元素字体高度为0px，再在后面设置具体元素字高：

body {
  text-align: center;
}
.test {
  font-size: 0;
}
.aa,.bb {
  display: inline-block;
  border: 1px solid;
  width: 100px;
  font-size: 14px;
}

CSS sprite 是什么?

css sprite称为精灵图或雪碧图，是处理网页icon（小图标）的一种方式。把所有的icon整合到一张图片上，通过css进行背景定位，展现小图标的一种方法。这种方法减少网页请求，减少了服务器的压力，提高的页面的展现速度，但是缺点是无法调整图片大小，修改困难。

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

1.display:none 使一个元素消失，浏览器不会绘制该元素，不占用位置；
2.opacity: 0 使一个元素透明，用户看不见，但是实际还在，占用位置；
3.visibility: hidden 与opacity: 0 作用类似；
4.background-color: rgba(0，0，0，0.2) 使背景色透明。