CSS常用面试题

如何画一个朝上的三角形

width:0;
height:0;
border-bottom:5px solid red;
border-left:5px solid transparent;
border-right:5px solid transparent;

什么是margin的合并和塌陷

mrgin合并

<div class="b1"></div>
<div class="b2"></div>

.b1{
    margin-bottom:20px;
}
.b2{
    margin-top:20px;
}

此时两者之间的距离为30px,这就是发生了margin合并。

margin塌陷

<div class="father">
    <div class="son"></div>
</div>

.son{
    margin-top:20px;
}

在给子元素设置margin的时候，父元素也跟着下来了，这就是发生了margin塌陷。

BFC

BFC（Block Formatting Context）格式化上下文内按照一定的规则排序，不受外界影响，也不会影响外界。

特性

1. BFC内自上而下排列
2. BFC不会被浮动元素覆盖
3. 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素

第二点可以用来做页面两栏自适应布局：

<div class="father">
    <div class="son1"></div>
    <div class="son1"></div>
</div>

.son1{
    width: 30px;
    height: 20px;
    float: left;
    background-color: red;
}
.son2 {
    height: 20px;
    background-color: pink;
    overflow: hidden;
}

如果son2不开启BFC，son1就会覆盖son2。开启之后就自适应显示了。

如何生成BFC

1. overflow 设置为 hidden、auto、scroll
2. position 设置为 absolute、fixed
3. float

盒子模型

盒模型由内到外依次分为内容（content）、填充（padding）、边框（border）和边界（margin）4部分。分为两种模型

1. 标准盒模型，默认，可设置box-sizing:content-box。
2. 怪异盒模型，可设置box-sizing:border-box。width计算包括content、padding、border

水平居中

display:flex;
align-item:center;
justify-content;

position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)

position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;

画一条0.5px的线

height: 1px;
box-shadow: 0 0.5px 0 #000;

transform:scale(.5)

meta viewport设置缩放

IOS 1px问题

#line {
    position: relative;
}
#line::after{
  position:absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  content:"";
  transform: scale(0.5);
  transform-origin: left top;
  box-sizing: border-box;
  border: 1px solid #333;
}

超出显示省略号

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;

可以继承的css

1. font-size
2. font-weight
3. text-align
4. visibility
5. color
6. line-height

display:none 与 visibility:hidden 与 opacity：0 的区别

display:none

• DOM结构：不占据空间
• 是否继承：不可继承
• 是否可以事件监听：否
• 触发重排，性能差

visibility:hidden

• DOM结构：占据空间
• 是否继承：可继承
• 是否可以事件监听：否
• 触发重汇，性能较高

opacity：0

• DOM结构：不占据空间
• 是否继承：可继承
• 是否可以事件监听：可
• 不触发重汇，性能好

不占据空间就是DOM结构不会渲染，底下的DOM就会往上顶，在调试阶段就找不到这个DOM。