关于css盒子模型和BFC的理解

p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px ".PingFang SC"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
p.p4 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px "Helvetica Neue"; color: #454545 }
li.li2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
li.li3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 14.0px "Helvetica Neue" }
span.s2 { font: 12.0px ".PingFang SC" }
span.s3 { font: 14.0px ".PingFang SC" }
span.s4 { font: 10.0px Menlo }
span.s5 { font: 12.0px "Helvetica Neue" }
ol.ol1 { list-style-type: decimal }
ul.ul1 { list-style-type: disc }

CSS盒子模型

包含元素内容（content）、内边距（padding）、边框（border）、外边距（margin）

一般元素总宽度 = element的width+padding的左右边距+margin左右边距值+border的左右宽度

高度同理

外边距合并

上下外边距会合并一般发生在普通文档流中，行内框，浮动框或绝对定位之间外边距不会合并

一般合并的外边距会取那个较大的值

Box-sizing属性（content-box|border-box|inherit）

Content-box: 总宽度 = margin+border+padding+width

Border-box:总宽度 = width+margin   其中盒子的width包含padding+border+element

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

实践中的问题

  • Margin越界（第一个子元素的margin-top和最后一个子元素的margin-bottom）

->父元素没边框，设置第一个子元素的margin-top的值会加在父元素上，解决方法如下：

  1. 给父元素加边框
  2. 给父元素设置padding
  3. 父元素添加overflow：hidden
  4. 父元素加前置内容生成（推荐）

例子：.parent{

Width:500px;

Height:500px;

Background:red

}

.parent : before{

Content:””;

Display:table

}

.child{

Width:200px;

Height:200px;

Background:green;

Margin-top:50px

}

<div class=“parent”>

<div class=“child”>

</div>

</div>

浏览器间的盒子模型

  1. ul在MOzillz中默认有padding值，而在IE中只有margin值
  2. 标准盒子模型与IE盒子模型之间差异，IE更像box-sizing：border-box，解决方法就是在HTML模板加上doctype

盒子模型画三角形

.triangle{

Width:0;

Height:0;

Border:20px solid transparent;

Border-top:20px solid red;

}//向下的箭头

p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px ".PingFang SC"; color: #454545 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
li.li3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; color: #454545 }
span.s1 { font: 14.0px "Helvetica Neue" }
span.s2 { font: 12.0px ".PingFang SC" }
span.s3 { font: 12.0px "Helvetica Neue" }
span.s4 { font: 10.0px Menlo }
ul.ul1 { list-style-type: disc }

BFC理解（块级格式化上下文，独立的渲染区域，规定了内部的BFC如何布局，并与这个区域的外部互不相干）

BOX、Formatting Context的缩写

Box：CSS布局的基本单位

  • box常用盒子：(根据display的你属性区分盒子)

-> block-level box:display属性为 block,list-item,tabel的元 素，并且参与BFC；

-> inline-level box:display 属性为 inline,inline-block,inline-table,参与IFC

  • BFC布局规则

-> 内部的Box会在垂直方向上，一个接一个放置

-> Box垂直方向距离由Margin决定，属于同一个BFC的两个相邻的Box的Margin会发生重叠

-> 每个子集元素的Margin Box的左边与包含他的父级元素的 border  box的左边相接触（对于从左往右的格式，反之相反）；即使存在浮   动也是如此

-> BFC的区域不会与Float Box重叠

-> BFC在页面上就是一个隔离的独立的容器，容器里面的子元素不会影响外面的元素，反之一样

-> 计算BFC高度的时候，浮动元素高度也参与计算

  • 哪些元素会生成BFC

-> 根元素

-> float 不为none

-> position为absolute或fixed

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

-> overflow不为visible

原文地址：https://www.cnblogs.com/kingsnowcan/p/css_box_BFC.html

时间： 2024-08-14 10:33:50

关于css盒子模型和BFC的理解的相关文章

CSS盒子模型和IE浏览器

CSS盒模型图解 下面是一幅关于应用了CSS的元素是如何显示它的尺寸的图示. 在本篇文章中,所有的浏览器在计算盒模型总宽度时处理margin属性的方式都是一致的,所以我们将更多的精力放在padding和border属性上. W3C盒模型 首先看一下< the W3C box model>,这里所写出的标准,如果没问题的话,是应该被所有标准的现代浏览器及IE6和它的后续版本所遵循的. 在W3C盒模型中,一个块级元素的总宽度按照如下方程式计算: 总宽度 = margin-left + border

CSS中盒子模型和position（一）

今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自己记忆中的那些是在那里看到的,找起来特别的麻烦,还是老老实实的写博客写下来吧!本着既然打算写成博客就费点时间写点自己觉得有质量的,要不对不起看我博客的人更对不起自己,有些事情还是要告诉自己,不能急得花点时间,就像学这些技术.踏踏实实一点一点积累,还是要舍得花时间. 本人大四即将毕业生一枚,总是觉得有

标准W3C盒子模型和IE盒子模型

标准W3C盒子模型和IE盒子模型 CSS盒子模型:网页设计中CSS技术所使用的一种思维模型. CSS盒子模型组成:外边距(margin).边框(border).内边距(padding).内容(content). CSS盒子模型分为:标准W3C盒子模型,IE盒子模型,注意在两种模型中宽(width)和高(height)包括属性的不同. 标准W3C盒子模型: W3C模型中: CSS中的宽(width)=内容(content)的宽 CSS中的高(height)=内容(content)的高 eg: <d

CSS盒模型和margin重叠

在 CSS 中,width 和 height 指的是内容区域的宽度和高度.增加内边距.边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸.(div的实际占用尺寸变打了) 但: 一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容.然而 IE 5 和 6 的呈现却是不正确的.根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的.不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型

css盒模型与bfc与布局与垂直水平居中与css设计模式等

一.css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布局 flow下的盒子的布局 BFC布局上下文下的布局 IFC布局上下文下的布局 FFC布局上下文下的布局 table布局上下文下的布局 css grid布局上下文下的布局 1.css盒模型 页面上显示的每个元素(包括内联元素)都可以看作一个盒子,即盒模型( box model ) 盒模型有4部分组成

标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上图可以看到标准 w3c 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分. ie 盒子模型 从上图可以看到 ie 盒子模型的范围也包括 margin.border.padding.content,和标准 w3c 盒子模型不同的是

标准盒子模型和IE盒子模型

标准盒子模型 ＝ margin + border + padding + content (content =  width | height) IE盒子模型 ＝ margin + content (content = border + padding + width | height) 盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上图可以看到

标准盒子模型和IE模型的区别【转】

盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上图可以看到标准 W3C 盒子模型的范围包括 margin.border.padding.content,并且 content 部分不包含其他部分. 从上图可以看到 IE 盒子模型的范围也包括 margin.border.padding.content,和标准 W3C 盒子模型不同的是:IE 盒子模型

css盒模型：BFC、IFC边距重叠解决方案

BFC:块级格式化上下文 IFC:行内格式化上下文 实例如下: <div class="out" style="background: red;"> <div class="in" style="height: 100px; margin-top: 10px; background: green;"></div> </div> 此时,out和in高度都是100px. 异常情况:但