BOX 盒模型

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BOX 盒模型相关的知识,希望对你有一定的参考价值。

一、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)项目、内容是属于子级

 

以上是关于BOX 盒模型的主要内容,如果未能解决你的问题,请参考以下文章

面试盒模型

css的两种盒模型

请简述 css 盒子模型与css怪异盒模型

ie的盒模型和标准模型

[CSS]面试题:box-sizing的作用 (IE盒模型和W3C标准盒模型)

彻底搞懂标准盒模型和怪异盒模型