css盒模型理解

xingqiba 发布于2019-08-30 15:43 / 3356人阅读

摘要：盒模型概念盒子模型又称框模型，包含了元素内容内边距边框外边距几个要素。盒子垂直方向的距离由决定。属于同一个的两个相邻盒子垂直方向的会发生重叠。计算高度时，自然也会检测浮动的子盒子高度。总宽度总高度盒子设置的值其实是除外的的总宽度。

css盒模型概念

css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。

图中element元素是实际内容，也就是元素框，紧挨着元素框外部的是内边距padding，其次是边框（border），然后最外层是外边距（margin），整个构成了盒子模型。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。那么：

总宽度 = 元素（element）的width + padding的左边距和右边距的值 + border的左右宽度 + margin的左边距和右边距的值；

总高度 = 元素（element）的height + padding的上下边距的值＋ border的上下宽度 + margin的上下边距的值。

css外边距合并(叠加)

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




    
    Document
    


    
        上
        margin-bottom:30px;
    
    
        下
        margin-top:50px;

需要注意的是：只有普通文档流中块框的垂直外边距才会发生外边距合并。

边距合并解决方案(BFC)

BFC其英文拼写为 Block Formatting Context 直译为“块级格式化上下文”

元素产生BFC的条件

float属性不为none（脱离文档流）

position为absolute或fixed

display为inline-block,table-cell,table-caption,flex,inine-flex

overflow不为visible

BFC元素所具有的特性

在BFC中，盒子从顶端开始垂直地一个接一个地排列。

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。

在BFC中，每一个盒子的左外边距（margin-left）会触碰到容器的左外边缘（border-left），对于从右往左的格式来说，会触碰到右边缘。

BFC不会与浮动盒子产生交集，而是紧贴浮动元素边缘。

计算BFC高度BFC时，自然也会检测浮动的子盒子高度。

应用场景

自适应两栏布局

清除内部浮动

防止垂直margin重叠

上面边距合并例子调整：


        上
        margin-bottom:30px;
    

 
 
   
       下
         margin-top:50px;

关于bfc的应用的案例这里就不在一一举出了，大家去网上找一些其他的文章看一下。

box-sizing属性介绍

box-sizing : content-box|border-box|inherit

content-box(标准盒子),默认值,可以使设置的宽度和高度值应用到元素的内容框。盒子的宽高只包含内容。总宽度=margin+border+padding+width;总高度=margin+border+padding+height

border-box(IE盒子),设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容。总宽度=margin+width; 总高度=margin+height

inherit , 规定应从父元素继承 box-sizing 属性的值

偷两张图贴起来~

私有云 idc机房托管盒模型盒模型html吗简述html盒模型盒遥控

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

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

CSS中盒模型的理解

摘要：如图为了方便大家理解和尝试，我写了一个小放上来方便大家尝试显示盒模型盒模型计算规则元素框的总宽度元素的的左边距和右边距的值的左边距和右边距的值的左右宽度元素框的总高度元素的的上下边距的值的上下边距的值的上下宽度。今天突然看到一篇关于CSS中盒模型的文章，忽然觉得自己竟然遗忘了很多小的地方，所以写一篇文章来记忆一下（摘抄于千与千寻写的CSS盒子模型理解，并在自己基础上添加了一些东西，希望更完...

shmily 2019-04-23 11:49 评论0 收藏0
我理解的css盒模型以及使用场景

摘要：在中我们可以通过设置的属性来完成标准或者怪异模式之间的切换。设为之后，和的厚度可以随意调，并不会溢出父元素。 - css盒模型是什么网页设计中css技术所使用的一种思维模型 - 盒模型的组成 showImg(https://segmentfault.com/img/bVboot5?w=736&h=388); - 盒模型的两种标准（在不考虑css3的情况下） showImg(https:...

icyfire 2019-08-30 15:55 评论0 收藏0
前端人人都应该理解的盒模型BFC渲染机制

摘要：如图所示如果你眼力不错或者亲自试试会发现个之间设置了的距离但是他们现在实际的间距却是。如何设置盒模型的类型通过的就可以设置为盒模型了默认是盒模型渲染机制基本慨念是英文缩写翻译为块级格式化上下文。说白了就是一种盒模型的渲染规则。前端人人都要懂的盒模型BFC渲染机制为什么我们说,前端工程师有必要需要了解BFC渲染机制? 因为如果你一个前端压根没听说过BFC,那你是如何理解下面这几个cs...

testHs 2019-08-30 13:52 评论0 收藏0
【快速入门系列】CSS盒模型基础

摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。一、什么是...

Code4App 2019-08-29 15:20 评论0 收藏0
【快速入门系列】CSS盒模型基础

摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。一、什么是...

LinkedME2016 2019-08-02 10:22 评论0 收藏0
深入理解盒模型与BFC

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

gself 2019-08-29 17:14 评论0 收藏0