二、标准模型+IE模型的区别

IE盒模型与W3C盒模型的唯一区别就是元素的宽度，元素的width=border + padding + content

标准盒子模型（content-box）：内容就是盒子的边界IE盒子模型（border-box）：边框才是盒子边界标准盒子模型（content-box）：元素的宽度width=内容宽度IE盒子模型（border-box）：元素的宽度width=内容宽度 + padding + border

1.CSS如何设置两种盒模型

//在不设置box-sizing的情况下，box-sizing 默认是(标准盒子)content-box ./* 标准模型 */
box-sizing:content-box;/*IE模型*/
box-sizing:border-box;

2.JS如何设置/获取盒模型对应宽高：

dom.style.width/height
//缺点：仅适用于有内联样式的
dom.currentStyle.width/height
//优点：获取渲染之后的运行的结果，相对更准确
//缺点：只有IE浏览器支持
window.getComputedStyle(dom).width/height
//优点：原理和2相同，但兼容性更好
dom.getBoundingClientRect().width/height
//原理同上，经常用于计算元素的绝对位置（根据视窗左顶点获得），getBoundingClientRect()方法可获得四个值：left/top/width/height

先到这里~

今日更新~

三、根据盒模型解释边距重叠

父子元素、兄弟元素，当有外边距时，会取其中一个边距的最大值，作为实际的边距。
空元素的有上下边距时，也会取其中更大的边距值，作为实际的边距。
这就是边距折叠

四、BFC（边距重叠解决方案）

1、什么是BFC：

BFC是块级格式化上下文的意思。它是CSS 2.1规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

2、触发BFC的条件：

浮动元素float值不为none
定位元素position值不为static和absolute
display属性值为flex、inline-block、table、table-cell等与table相关的值
overflow值不为visible  （ overflow (值为hidden/atuo/srcoll)设置有这些属性的box，都会产生BFC）

3、BFC原理：

1.在BFC这个元素垂直方向的边距会发生重叠；
（垂直方向上地距离由margin决定，在同一个BFC的box 中，相邻的两个box的边距会重叠）
2.BFC的区域不会与float元素的box重叠
3.BFC在页面上是一个独立的容器，其里外的元素不会相互影响
4.计算BFC高度时，浮动元素也会参加计算

4、常见应用场景：

清除浮动
外边距合并问题：解决兄弟元素垂直方向边距重叠 （给子元素增加了父元素div）外边距将不会重叠解决margin重叠问题（添加独立BFC）
解决浮动高度塌陷问题（在父元素添加overflow：hidden）

关于CSS盒模型就到这里了~加油！冲冲冲

CSS盒模型（详解）相关推荐

CSS盒子模型详解(清除无序列表的项目符号)
CSS盒子模型详解(清除无序列表的项目符号) 网页的布局过程准备好相关的网页元素(盒子) 利用CSS设置好盒子的样式以及在网页中的摆放位置往盒子里面装东西盒子模型(box model) 网页中, ...
css弹性盒模型详解----flex-direction
本篇文章详细介绍flex-direction flex-direction 是控制盒模型容器下一级子元素的排列方式的属性一共有四种row(默认值):主轴为水平方向,起点在左端.row-reverse ...
06-CSS盒模型详解
本文最初发表于博客园,并在GitHub上持续更新.以下是正文. 盒子模型前言盒子模型,英文即box model.无论是div.span.还是a都是盒子. 但是,图片.表单元素一律看作是文本,它们并 ...
css弹性盒模型详解----flex-wrap
本篇文章详细介绍flex-wrap flex-wrap是控制盒模型容器下一级子元素的在一行显示的时候是否换行nowrap(默认值):不换行wrap:自动换行wrap-reverse:换行,第一行在下方 ...
【网站制作视频教程】-第22讲 css盒子模型详解！-传智播客
传智播客( http://icd.itcast.cn/)是一家网页平面设计培训学院,专注于网页设计培训,平面设计培训,fash培训,ui设计培训. 网页设计视频教程下载地址:http://icd ...
从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
CSS属性vertical-align详解（CSS之五）
CSS属性vertical-align详解作用对象 vertical-align的意思是在垂直方向进行对齐.它主要对以下属性的元素有效 inline元素.inline-block元素和普通的文本. ...
Django MVT模型详解
MVT模型详解 ORM简介使用MySql数据库开发流程使用数据库生成模型类 Model 定义模型定义属性字段类型字段选项关系元选项示例演示测试数据类的属性管理器Manager ...
CSS margin属性详解
CSS margin属性详解我发现当我想写好一篇博文的时候,希望以后能有人看到,会对别人也有一定的帮助,这时候对于其中的内容就变得深思熟虑起来,让自己查阅尽可能多的资料,这样的方式正好可以弥补我某些 ...

CSS盒模型（详解）

二、标准模型+IE模型的区别

1.CSS如何设置两种盒模型

2.JS如何设置/获取盒模型对应宽高：

三、根据盒模型解释边距重叠

四、BFC（边距重叠解决方案）

1、什么是BFC：

2、触发BFC的条件：

3、BFC原理：

4、常见应用场景：

CSS盒模型（详解）相关推荐

最新文章

热门文章