前端基础知识---CSS

1.盒模型宽度计算
答：IE浏览器默认盒模型为border-box，其他浏览器默认盒模型为content-box。元素的实际模型宽度和高度为offsetWidth和offsetHeight。border-box的offsetWidth = width，
content-box的offsetWidth = width + padding + border。
2.margin纵向重合问题
答：纵向排列的元素的margin-top和margin-bottom会重合，重合之后的值取其中的最大值。
解决方法：设置值时，仅设置margin-top或者margin-bottom；使用padding。
3.父子元素中子元素设置margin-top,父元素会往下掉对应margin-top的值的问题
答：⑴.给父元素添一个大儿子，这个大儿子必须table。

<div class="d2">       
     <table></table>     <!-- 这里多了页面结构也不太好 -->
     <div class="d3">  
</div>   

⑵使用CSS3伪元素::before给父元素添加内容

.d2::before{
     content:"";
     display:table;
}

4.margin负值问题
答：在默认定位的元素中设置margin-top和margin-left负值，元素向上，向左移动；设置margin-right负值，同级右侧元素向左移动，自身不受影响；设置margin-bottom负值，同级下方元素向上移动，自身不受影响。
在绝对定位的元素中设置top为0和margin-top为负值，元素向上移动；设置bottom为0和margin-bottom为负值，元素向下移动；设置left为0和margin-left为负值，元素向左移动；设置right为0和margin-right为负值，元素向右移动。
5.什么是BFC？
答：BFC 即 Block Formatting Contexts (块级格式化上下文)。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素。
只要元素满足下面任一条件即可触发 BFC 特性：
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
6.手写clearfix

.clearfix:after{
  content: "",
  display: table;
  clear: both;
}

7.relative和absolute依据什么来定位？
答：relative依据自身来定位。absolute依据往上层查找到的最近一层的定位元素来定位。（定位元素含有absolute，relative或者fixed，如果都没有则依据body来定位）
8.怎么让一个 div 水平垂直居中

<div class="parent">
  <div class="child"></div>
</div>

1.

div.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

2.

div.parent {
    position: relative; 
}
div.child {
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
}
/* 或者 */
div.child {
    width: 50px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: -5px;
}
/* 或 */
div.child {
    width: 50px;
    height: 10px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

3.

div.parent {
    display: grid;
}
div.child {
    justify-self: center;
    align-self: center;
}

4.

div.parent {
    font-size: 0;
    text-align: center;
    &::before {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
    }
}
div.child{
  display: inline-block;
  vertical-align: middle;
}