【前端学习】-盒模型

jonh_felix 发布于2019-08-29 13:09 / 1784人阅读

摘要：前言前端页面的构建过程中，盒模型相关的概念会一直如影随形，因此需要深刻地理解好盒模型。本文将从盒模型描述标准盒模型传统盒模型属性，常见问题。

【前言】前端页面的构建过程中，盒模型相关的概念会一直如影随形，因此需要深刻地理解好盒模型。本文会先简单描述一下盒模型，然后描述一些平常会遇到的注意点。
本文将从1、盒模型描述；2、W3C标准盒模型/IE传统盒模型；3.box-sizing属性；4，常见问题。

一、盒模型描述

之前跟朋友一起打羽毛球的时候看到羽毛球场地，我X，这不就是传说中的盒模型么，因此我还被他们调侃代码中毒太深。首先，po一张图。

众所周知，羽毛球运动中，双打的安全区域是标注的红色线框内，单打的安全区域是标注的黄色线框内，单双打重叠的区域就是上面标注的蓝色框框了，一个羽毛球厂的边界线就是最外层的白色框框，且各个羽毛球场中间总会留一些间隙，就是外层白色框框与边界的距离。
将这些对比盒模型的话：

1.蓝色框框就是我们日常所说的内容框content，内容只会在这个区域展示；
2.最外层的那个边界线就是我们所说的border，
3.content和border中间的距离就是内边距padding
4.最外层的边界线与旁边的白边的间距就是外边距margin。

回归到盒模型就如下图所示：

二、W3C标准盒模型/IE传统盒模型

1.W3C标准盒模型如下图如果设置

添加下面的css属性，则在chrome下的预览效果及layout是

.box{
background-color: lightpink;
width: 255px;
height: 300px;
border: 20px solid #f00;
padding: 20px;
margin: 20px; }

从上方可以看出来

内盒尺寸（大小） = width + padding + border 
外盒尺寸（空间尺寸）= width + pading + border + margin
经过计算可以得出：
div的内盒宽度 = width+ (padding + border )*2 = 335，内盒外盒高度= height+ (padding + border)*2=380
div的外盒宽度 = width+ (padding + border +margin)*2 = 375，外盒外盒高度= height+ (padding + border + margin*2 =420
内容区域content的宽度 = width = 255,content的高度= height=300

2.IE传统盒模型如果在ie下预览及layout则是下面的效果

从上方可以看出来

内盒尺寸（大小） = width 
外盒尺寸（空间尺寸）= winth + margin
div的内盒宽度 = width= 255，内盒外盒高度= height= 300
div的内盒高度 = height + margin= 255+ 20*2=295，内盒外盒高度= 300+ margin= 300+ 20*2=340
内容content的宽度 = 内盒宽度- padding -border = 255- （20 + 20）*2 = 175,content的高度=  内盒高度- padding -border =300- （40 + 10）*2 =220

【总结】

W3C标准盒模型：
内盒尺寸（大小） = width + padding + border 
外盒尺寸（空间尺寸）= width + pading + border + margin
IE传统（IE6）盒模型 
内盒尺寸（大小） = width 
外盒尺寸（空间尺寸）= winth + margin

三、box-sizing属性

【基础概念】：以特定方式定义匹配某个区域的特定个元素【兼容性IE8+】
【属性值】

content-box:宽度和高度分别用到元素的内容框，即上方所示的W3C标准盒模型【默认值】
border-box:宽度和高度分别用到元素的内容框、内边距，边框，即上方所示的IE传统盒模型
inherit:继承父元素的box-sizing属性

【tpis】移动端，建议添加box-sizing:border-box值，因为我们页面局部基本上是按区域已经布局好了，但是有的时候改变一个元素的边距值，可能会导致钙元素的大小变大直接元素下移，页面错乱。但是添加了box-sizing:border-box可以保证页面整理布局不会乱。

四、常见问题

1.margin重叠问题
块级元素水平方向不会重叠，垂直方向可能会重叠（若重叠，边距取较大的值；出现负值则取两者差值的绝对值）
如下图所示，若上面的元素设置margin:20px；下面的元素设置margin:10px。则两个元素在垂直方向的margin会重叠且取相对大的值。
这里情况比较复杂，这里先简单说下，会在一篇写margin相关的文章详细阐述下。

2.margin不生效
最多出现在firefox，或者受浮动及定位影响，可以考虑用padding代替。

GPU云服务器云服务器盒模型盒模型html吗简述html盒模型机器学习模型选择

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

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

弹性盒子模型详解

摘要：二弹性盒模型历史弹性盒模型历史英文原版或者查看中文翻译版另外附上标准文档弹性盒模型在过去几年间制定了三版草案规范。给子元素直接添加属性即可七后话以上是本文所有内容，以下是小白我的感慨。一、前言由于W3C在制定弹性盒模型内容有多版草案，在网上浏览了很多视频和文章，版本有新有旧，所以准备写一篇关于弹性盒模型的文章，一是辅助自己学习，二是帮忙其他前端学习者更容易地弹性盒模型。二、弹性盒...

rozbo 2019-08-28 18:27 评论0 收藏0
前端大杂烩 - 收藏集 - 掘金

摘要：作者将原素材文章进行了新内容的添加和重新排列，但是因为文章百度前端技术学院面向大学生的前端技术学习平台前端掘金由百度创办的免费前端技术学习实践交流分享平台。简直是前端黑科技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。神器！解放你的双手——UI 设计稿全自动切图和标注的一些工具推荐 - 前端 - 掘金原文收录在我的 GitHub博客 (https://github.com/jaw...

cucumber 2019-08-29 12:35 评论0 收藏0
盒模型一二三（一）：盒世界，知几何

摘要：比如表示上下左右都是像素块元素居中的样式，表示上下表示左右而表示上，左右，下。浏览器对块元素的默认样式问题如下块元素的盒模型样式复合属性写法如果我们想给添加样式，可以这样写为了精简代码，也可以采用如下的复合属性写法学习 HTML 和 CSS 将近一个月，我以为：层级（嵌套）关系和盒模型（Box Model）是理解和学习这两门语言的基石，正如图层概念是 Photoshop 的基础。因此...

tuantuan 2019-08-28 18:15 评论0 收藏0
深入css布局 (1) — 盒模型 & 元素分类

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

ky0ncheng 2019-04-23 13:43 评论0 收藏0