【九月打卡】第1天+ CSS布局

课程名称：《一天时间迅速准备前端面试 快速构建初级前端知识体系》

章节名称（序号）：第3章 CSS 面试题

讲师：双越

课程内容：

主要讲解：使用flex、定位、响应式布局 相关内容。

学习心得：

1、CSS 盒模型的注意点

• padding 不能为负值，而margin 可以为负值

• 背景色会平铺到非margin的区域（border）

• 两个盒子上下之间的margin值会重叠，而不是累加

• 子盒子设置margin-top不会产生反应，要使用BFC解决

2、标准盒模型与怪异盒模型

在标准盒模型中，给盒子设置width 和 height ，实际设置的是content box。

padding和border 再加上设置的宽高一起决定整个盒子的大小

而在怪异盒模型中，所有的宽度都是可见宽度，所以content的宽度应该减去padding 和border。

.div1 {   
    width:100px;   
    height:100px;   
    background: pink;   
    padding:10px;   
    border:5px black solid;   
    box-sizing: border-box; /*怪异盒模型  把border+padding+content = 100px  */ 
}

3. margin 负值问题

• margin-top 和margin-left 负值，元素向上、向左移动

• margin-right负值，右侧元素左移，自身不受影响

• margin-bottom负值，下方元素会上移，自身不受影响

4.BFC理解与应用

Block format context , 块级格式化上下文

一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件

•     float 不是 none

•     position 是 absolute 或 fixed

•     overflow 不是visible (比如 hidden)

•     display 是  flex inline-block等

BFC 的作用

• 清除浮动

//空标签也可以清除浮动，和BFC同样功能。
.clear::after{
    content:'',
    display:block;
    clear:both;
}

• 盒模型的margin时

出现了传递和叠加的问题，这里可以采用BFC规范来解决，原理就是让盒子形成一个独立 的容器，无论里面的子元素如何折腾，都不影响到外面的元素。

总结： 

    float布局带来很多不可控制因素，在现代布局flex和grid中，是默认自带BFC规范的，所以可以解决非BFC盒子的一些问题，flex和grid会成为更好的布局方式。