杂说CSS

1、CSS初始化

为什么初始化CSS呢？

因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器页面在不同浏览器之间出现差异

并且，多数浏览器会默认给初始页面添加上外边距

简单的初始化页面

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

2、display 都有哪些值？

block、inline、inline-block、list-item、table 、 inherit 和 none

1. block：指定为块级元素；显示元素
2. inline：指定为行内元素，宽高默认为内容宽高，不可设置宽高，同行显示
3. inline-block：指定为行内块元素，可以设置宽高，一行显示
4. list-item：像块级元素一样显示，并添加列表样式
5. table：元素为块级表格显示
6. inherit：从父元素继承display属性的值

3、书写高效CSS时有哪些问题需要考虑？

1. 样式，从右到左解析一个选择器
2. 类型选择器的速度，ID选择器最快，通配符*最慢；解析速度由快到慢：ID > 类 > 标签 > 通配符 *
3. 后代选择器最糟糕，像这种：html body ul li a {}，这种选择器很抵效
4. 不要用标签选择器去限制ID选择器（div #one {}），因为ID选择器已经是唯一的了

4、CSS中，自适应的单位有哪些？

1. 百分比：%
2. 相当于视口宽度的单位：ww
3. 相当于视口高度的单位：vh
4. 相对于视口宽度或高度（取决于小的）的单位：Vm
5. 相对于父元素字体大小的单位：em
6. 相对于根元素字体大小的单位：rem

5、BFC是什么东西？

BFC即Block Formatting Context，意为块级格式化上下文，就是一个块级元素的渲染规则。通俗一点讲，可以把BFC理解为一个独立封闭的大箱子，容器里面的子元素不会影响到外面的元素

BFC的布局规则：

1. 内部的盒子会在垂直方向上一个一个放置
2. 在同一个BFC的两个相邻盒子的margin会发生重叠
3. 计算BFC高度时，浮动元素也参与计算

6、IFC是什么东西

IFC即 Block Formatting Context，指内联格式化上下文，就是行内元素的摆放规则。

IFC 的布局规则：

1. IFC内部的每个盒子会在水平方向上一个接着一个摆放
2. 盒子的高度时由内部元素的高度决定的
3. 每个IFC表现为一个块级元素，跟其它块级元素一样垂直摆放

7、隐藏元素

1、display: none

display: none

最常用的方式之一，该方法最大的特点就是：元素不再占有位置，从页面中移除掉

该属性会导致页面重排，性能较差

2、visibility: hidden

visibility: hidden;

该方法与上面的相反，其最大的特点就是：元素仍占据着位置

该属性只会引起重绘，网页性能较高；所以，如果是需要频繁隐藏和显示元素的，就使用 visibility: hidden

visibility: hidden 还有另外两个作用：

1. 解决父元素与子元素产生的高度坍塌（给父元素添加该属性）
2. 清除浮动（同样是给父元素添加该属性）

3、设置元素透明度为0

opacity: 0;

• 元素占据着位置
• 不会引起重绘或重排，网页性能较高

4、利用相对定位将元素移到屏幕左侧

position:relative;
left: -100%;

• 元素仍然占据着位置
• 百分比是相对父元素的宽度和高度的

5、旋转元素，使之与当前页面垂直

/* x轴 或 y轴 旋转 */
transform： rotateX(90deg)

transform： rotateY(90deg)

• 元素肯定占据着位置

6、将元素缩小到0倍

transform: scale(0);

• 元素占据着位置

7、利用 translateX()、translateY()将元素移出屏幕

8、文字垂直居中

1、单行文字垂直居中

让行高 line-height 与 盒子高度height 一样高

width: 100px;
height: 100px;
line-height: 100px;

2、多行文字垂直居中

vertical-align 属性可以指定表格单元格元素的垂直对齐方式

有个前提：先将元素转化为表格元素 table-cell

width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;

9、首行缩进

text-indent: 2em;

10、div垂直居中布局样式

<div class="box-wrap">
    <div class="box"></div>
</div>

固定高宽的div垂直居中

.box {
    width: 200px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: pink;
    /* 上移和左移盒子的一半 */
    margin: -50px 0 0 -100px;
}

• 无兼容性

无固定宽高的div垂直居中

1、flex布局

给父盒子设置 flex，让其子盒子垂直居中

.box-wrap {
    display: flex;
    width: 200px;
    height: 100px;
    background-color: pink;
    justify-content: center;
    align-items: center;
}

• 不兼容IE8 以下

2、定位 relative+ 移动 translate

.box-wrap {
    width: 200px;
    height: 100px;
    background-color: pink;
    position: relative;
}

.box {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 往上和往左移动自身的一半 */
    transform: translate(-50%, -50%);
}

• 不兼容 IE8 以下

3、流式布局（百分比%）设置margin: auto;

.box-wrap {
    width: 100%;
    height: 200px;
    background-color: pink;
	position: relative;
}

.box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: skyblue;
}