CSS盒模型深入

songjz 发布于2019-08-29 15:13 / 1860人阅读

摘要：盒模型标准模型模型标准模型表示的宽度，模型表示的宽度。设置这两种模型可使用浏览器默认获取宽高只有通过内联样式设置的宽高才能获取到，用标签引入的获取不到。清除浮动使触发，内部浮动元素元素也参与高度计算。

CSS盒模型 标准模型IE模型

标准模型width表示content的宽度，IE模型width表示border+padding+content的宽度。

设置这两种模型可使用：

box-sizing: content-box;   /*浏览器默认*/
box-sizing: border-box;

获取宽高

dom.style.width/height

只有通过内联样式设置的宽高才能获取到，用标签引入的css获取不到。

dom.currentStyle.width/height  //IE
window.computedStyle(dom).width/height  //标准

无论样式是什么类型，都可以获取到宽高，且是渲染后的实际宽高。

dom.getBoundingClientRect().width/height

获取元素的宽高，和相对于视口的lfet top。

边距重叠

子元素的外边距会反应在父元素上，相邻元素外边距会取较大值，空元素上下外边距会取较大值。

BFC

BFC指块级格式化上下文，是一个有特别规则的区域，规定内部元素如何布局，与外部元素无关。

1.BFC有一下几个规则：

内部上下相邻元素外边距会重叠。

BFC块不会与浮动元素重叠。

内部浮动元素也参与BFC高度的计算。

2.BFC的触发：

float属性不为none；

position: absolute/fixed；

overflow: auto/hidden；

display: inline-block、table-cells、table-captions、或inline-flex

BFC应用

1.解决边距重叠问题

使div触发BFC，内部元素外边距不会反映到父级元素上。

两个

标签都有上下外边距，给

标签加父级，且触发BFC，外边距不会在重叠。

2.清除浮动

使div触发BFC，内部浮动元素元素也参与高度计算。

GPU云服务器云服务器盒模型盒模型html吗简述html盒模型盒遥控

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

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

深入css布局 (1) — 盒模型 & 元素分类

摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。从元素的布局特性来分，主要可以分为三类元素块级元素，行内元素，行内块级元素。行内级元素属性取的元素。深入css布局（1）—— 盒模型 & 元素分类在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们...

ky0ncheng 2019-04-23 13:43 评论0 收藏0
深入css布局(1) — 盒模型 & 元素分类

摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。规定元素和属性是包含元素的边框内边距内容的。后来微软也慢慢转向了的标准，在以后支持了标准盒模型。行内级元素属性取的元素。深入css布局（1）—— 盒模型 & 元素分类在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重...

blankyao 2019-08-29 15:25 评论0 收藏0
深入理解盒模型与BFC

摘要：标准盒模型与盒模型开发者们都知道，由于历史遗留问题与既定标准的发展，存在着两个盒模型。即的标准盒模型以及的怪异盒模型。在中，可以用去定义元素的盒模型。比较这两个盒模型的差异之前，我们先来看一张图先不讨论宽高，我们把一个元素的组成分为。标准盒模型与IE盒模型开发者们都知道，由于历史遗留问题与既定标准的发展，存在着两个css盒模型。即W3C的标准盒模型以及IE的怪异盒模型。在css中，...

gself 2019-08-29 17:14 评论0 收藏0
【芝士整理】CSS基础图谱

摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动产生，元素周围的内容转换为围绕元素排列。选择器注意点属性选择器 [attr^=value] - 开头或全等 [attr$=value] - 结尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含选择器组 A > B - 直接子节点 A + B - 下一个兄弟节点 A...

iOS122 2019-08-30 15:54 评论0 收藏0
【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

摘要：提供了糟糕的支持，而虽然接近标准，但依旧未能完全正确的支持标准。尽管修复了许多的问题，但是依然延续实现中的其它故障主要是盒模型问题。因此大部分的声明将触发严格模式即依据标准的规则渲染网页。深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点主要参考自第一篇文章，然而笔者在读的时...

binta 2019-08-29 16:13 评论0 收藏0