CCS 盒模型分析

Jochen 发布于2019-08-30 15:56 / 2093人阅读

摘要：基本概念页面中的每个元素都可以看成一个盒子，盒子里面可以装其他盒子，层层嵌套。标签就是最外面的大盒子。每个盒子由内向外分别是。分类盒模型有两种，标准盒模型和盒模型。

基本概念

页面中的每个元素都可以看成一个盒子，盒子里面可以装其他盒子，层层嵌套。html 标签就是最外面的大盒子。每个盒子由内向外分别是 content, padding, border, margin 。

分类

盒模型有两种，标准盒模型 和 IE盒模型 。主要区别是它们的 width 和 height 不同

标准盒模型

盒子宽高是 content(内容) 的宽高

IE盒模型

盒子宽高是 border + padding + content 的宽高

浏览器默认使用标准盒模型，在 ie8+ 中可以通过设置 box-sizing 样式属性改变盒模型

box-sizing:

content-box ---> 标准盒模型（默认）

border-box ---> IE 盒模型

通过js获取盒子宽高

以下 domElement 是表示 HTML 元素的伪代码

domElement.style.width/height

只能获取内联样式中的宽高

domElement.currentStyle.width/height

获取的是浏览中渲染完成后元素的宽高，只有 IE 浏览器支持

window.getComputedStyle(domElement).width/height

和方式2一样，但可以兼容更多浏览器

domElement.offsetWidth/offsetHeight

不管使用的什么盒模型，获取的都是 IE盒模型 的宽高

外边距折叠问题

相邻元素在竖直方向上的外边距在相遇时会发生合并，合并后的外边距的高度等于两个外边距中较大的那个值。

兄弟元素间

父子元素间

外边距折叠解决方案（BFC）

Block Formatting Context （块级格式化上下文）

BFC 可以简单地理解为某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。

怎样让元素创建 BFC

float 的值不为 none （浮动元素）

overflow 的值不为 visible

display 的值为 inline-block 、table-caption 、 table-cell 、flex 、inline-flex

positon 的值为 absolute 或 fixed

(根元素)

BFC 的布局规则

内部的 box 会在垂直方向上一个接一个地放置（平时说的块级元素一行行放）

box 间垂直方向的距离由 margin 决定。同一个BFC中的两个相邻的 box 还是会产生外边距重叠问题

BFC 的区域不会与浮动的 box 重叠

BFC 是一个独立的容器，里面的元素不会影响外面的元素，反之亦然。

包含浮动元素，计算 BFC 的高度时，浮动的元素也会参与计算

BFC 的应用场景

分属于不同 BFC 的元素可以防止垂直外边距折叠

清除内部浮动（使浮动元素可以撑起父盒子）

自适应两栏布局（BFC 区域不会与浮动元素重叠）

防止元素被浮动元素覆盖

float + BFC 两栏布局:


    left
    right

阅读原文

参考文章：
关于CSS-BFC深入理解
css 盒子模型理解

云服务器 GPU云服务器盒模型盒模型html吗简述html盒模型数据模型分析

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117492.html

CCS 盒模型分析

摘要：基本概念页面中的每个元素都可以看成一个盒子，盒子里面可以装其他盒子，层层嵌套。标签就是最外面的大盒子。每个盒子由内向外分别是。分类盒模型有两种，标准盒模型和盒模型。基本概念页面中的每个元素都可以看成一个盒子，盒子里面可以装其他盒子，层层嵌套。html 标签就是最外面的大盒子。每个盒子由内向外分别是 content, padding, border, margin 。 showImg...

trigkit4 2019-08-02 14:27 评论0 收藏0
Html知识点

摘要：和的区别表示只读，只能用于文本框，不能修改内容，它的值可以随表单提交给服务器表示该元素不可用，不响应事件，不能修改内容。同时不响应事件。通配选择器属性为的元素中，所有的子元素均采用该样式。表示按照格式规则正常定位。1、企业应用计算模式主要有：CS模式（客户端/服务器）和BS模式（浏览器/服务器模式） 2、html:超文本标记语言。以标记和子标记描述网页元素。　　http：超文本传输协议。 3...

番茄西红柿 2019-04-23 13:35 评论0 收藏0
盒模型/行内框盒子模型及line-height/vertal-align取值分析

摘要：标准盒模型下，设置的的值后，这个值仅包含的宽高，而在盒模型下，这个值是后的宽高。例标准盒模型下，占据的实际宽为实际高度同理。对齐所处行内框盒子的顶部对齐所处行内框盒子的底部。盒模型盒模型之所以称为盒是因为在一个页面布局中，文档中的每一个元素（块级元素）均呈现为一个矩形的盒子，这个盒子包含：内容（content） + 内边距（padding） + 边框（border） + 外边距（p...

jackwang 2019-08-30 15:52 评论0 收藏0
盒模型/行内框盒子模型及line-height/vertal-align取值分析

摘要：标准盒模型下，设置的的值后，这个值仅包含的宽高，而在盒模型下，这个值是后的宽高。例标准盒模型下，占据的实际宽为实际高度同理。对齐所处行内框盒子的顶部对齐所处行内框盒子的底部。盒模型盒模型之所以称为盒是因为在一个页面布局中，文档中的每一个元素（块级元素）均呈现为一个矩形的盒子，这个盒子包含：内容（content） + 内边距（padding） + 边框（border） + 外边距（p...

MAX_zuo 2019-08-01 16:16 评论0 收藏0