BOX 盒模型

Posted 2020-10-11

一、BOX 盒模型：

1、bloak 块盒

2、inline 行盒

二、displag：（1）、常规  （2)、构造  （3）、none  (4)、snline

三、format 格式化：

1、应刷

2、排版

3、format. formatting

四、BFC：

1、Block formatting context

2、直译：块级格式化上下文

3、定义：页面中CSS 渲染的一部分

4、主要是用于“决定”盒子的布局以及浮动

5、相互影响的范围的一个“区域”

6、div ,Block 发生冲突由 div 去控制 6个盒子 BFC 和 BFC之间不影响

7、只应用于 BFC 的子级元素，对产生 BFC 元素不适用

五、## 如何产生BFC （接触 BFC )

1、根元素

2、float 值不为 none 浮动值为默认

3、positin 值为 absolute 或者fixed

4、display 值为 ：

（1）、inline-block

（2）、table- cell

  (3)、table- caption

  (4）、flex

 （5）、inline- flex

   (6)、oveflow 不为 visible

六、区分：

1、BFC 的区域不会与 floathhox 重叠

2、BFC 是一个独立的区域（容器）、容器里面的子元素不会影响外面的元素

3、计算BFC 的高度时、浮动元素也要参与计算

七、## 触发后、BFC 的布局规则：

1、内部的块级元素在垂直一个方向上、一个接一个的放置

2、box 块级元素垂直反向 Margin box的左边、与包含块的 border box 的左边相邻、即使是浮动也是如此

八、浏览器的内核：

1、浏览器内核也称为"引擎“ 、大概为渲染引擎

2、浏览器 ：LE 内核：Tnident 前缀：ms

3、浏览器 ：firefox 内核：Gecko前缀：moz

4、浏览器 ：chrome内核：webkit前缀：Woblzlit

5、浏览器 ：safar 内核：Webrit前缀：Wohkit

6、浏览器 ：opera 内核：presto前缀：0

九、质量单位：

1、选： computed

2、show all 展示所有、字体不可以多于12px, 不可以是基数

3、 font-size 16px 默认值

十、响应式布局：

<div class="box1">
     <div class=“box1"></div>
     <div class=“box2"></div>
     <div class=“box3"></div>
     <div class=“box4"></div>
     <div class=“box5"></div>
      <div class=“box6"></div>
</div>

　1、media 媒体查询

　2、sreen 查询的的屏幕

　3、maf-width (查询条件：可以设置最小值）

十一、flex 弹性盒模型

1、flex 容器：它的所有子元素自动成为容器成员、简称：项目

2、flex 属性：(1)flex-direction  （2）flex-wrap　(3)flex-flow  (4）jwstify-content (5)align-items  (6) align-content

3、注意：（1）容器、包含块 是属于父级

                 （2）项目、内容是属于子级