CSS基础(二)

发表于 | 分类于 ，

CSS基础（二）

1. IE 盒模型和W3C标准盒模型有什么区别?



IE盒模型width包括content尺寸+padding+border。

W3C标准盒模型中,padding、border所占的空间不在width、height范围内。

二者对比图：

2. CSS 的属性box-sizing有什么值？分别有什么作用?

box-sizing: content-box;

box-sizing: border-box;

box-sizing: inherit;

如果值为content-box，那元素遵循的是W3C盒模型；默认值为content-box;

如果值为border-box，那元素遵循的是IE盒模型；

如果值为inherit，该属性的值应该从父元素继承。

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

父容器使用line-height: 2时，子元素的行高为子元素自身字体大小的两倍，随着子元素字体大小不同，各自行高也不同；

父容器使用line-height: 200%时，所有子元素的行高为固定值——父元素字体大小的两倍。

示例代码：

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

特性：

既呈现 inline 特性(不占据一整行，宽度由内容宽度决定)，又呈现 block 特性 (可设置宽高，内外边距)

去除缝隙：

元素间留白间距出现的原因就是标签段之间的空格，因此可以去掉HTML中的空格
可以给父元素设置 font-size: 0;

顶端对齐：

给元素设置 vertical-align：top；

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

1、display: none;

给元素设置display: none;后，元素会从页面中彻底消失，它原本占据的空间会被其他元素占有，会造成浏览器的回流与重绘。

2、visibility: hidden;

给元素设置visibility: hidden;后，元素会从页面中消失，它原本占据的空间会被保留，会造成浏览器的重绘，适用于希望元素隐藏又不影响页面布局的场景。

3、opacity: 0;

给元素设置opacity: 0;后，元素变成透明的我们肉眼就看不到了，所以原本占据的空间还在。

4、设置盒模型属性为0

将height、width、padding、border、margin等盒模型属性的值全设为0，如果元素內还有子元素或内容，还应overflow: hidden;来隐藏子元素。

1
2
3
4
5
6
7
8
.box1 {
        width: 0;
        height: 0;
        padding: 0;
        border: 0;
        margin: 0;
        overflow: hidden;
}
5、设置元素绝对定位与top、right、bottom、left等将元素移出屏幕

如：

1
2
3
4
5
6
7
8
9
.box1 {
        position: absolute;
        left: 100%;
}
或:
.box1 {
        position: absolute;
        top: 100px;
}
6、设置元素的绝对定位与z-index，将z-index设置成尽量小的负数。

但z-index是相对而言的 ，用z-index就要设置其他元素的z-index值，且如果元素本身占据空间很大就不一定会被z-index值比它大的元素完全覆盖，所以不推荐这种方法。
如：

1
2
3
4
5
6
7
8
.box1 {
        position: absolute;
        z-index: -100;
}
.box2 {
        position: absolute;
        z-index: 1;
}