摘要:基本概念页面中的每个元素都可以看成一个盒子,盒子里面可以装其他盒子,层层嵌套。标签就是最外面的大盒子。每个盒子由内向外分别是。分类盒模型有两种,标准盒模型和盒模型。
基本概念
页面中的每个元素都可以看成一个盒子,盒子里面可以装其他盒子,层层嵌套。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。
怎样让元素创建 BFCfloat 的值不为 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 两栏布局:
leftright
阅读原文
参考文章:
关于CSS-BFC深入理解
css 盒子模型理解
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53818.html
摘要:标准盒模型下,设置的的值后,这个值仅包含的宽高,而在盒模型下,这个值是后的宽高。例标准盒模型下,占据的实际宽为实际高度同理。对齐所处行内框盒子的顶部对齐所处行内框盒子的底部。 盒模型 盒模型之所以称为盒是因为在一个页面布局中,文档中的每一个元素(块级元素)均呈现为一个矩形的盒子,这个盒子包含:内容(content) + 内边距(padding) + 边框(border) + 外边距(p...
摘要:标准盒模型下,设置的的值后,这个值仅包含的宽高,而在盒模型下,这个值是后的宽高。例标准盒模型下,占据的实际宽为实际高度同理。对齐所处行内框盒子的顶部对齐所处行内框盒子的底部。 盒模型 盒模型之所以称为盒是因为在一个页面布局中,文档中的每一个元素(块级元素)均呈现为一个矩形的盒子,这个盒子包含:内容(content) + 内边距(padding) + 边框(border) + 外边距(p...
阅读 993·2021-11-22 13:52
阅读 1438·2021-11-19 09:40
阅读 3105·2021-11-16 11:44
阅读 1254·2021-11-15 11:39
阅读 3866·2021-10-08 10:04
阅读 5311·2021-09-22 14:57
阅读 3091·2021-09-10 10:50
阅读 3173·2021-08-17 10:13