css盒模型

概念:

CSS 盒模型本质上是一个盒子,盒子包裹着HTML 元素,盒子由四个属性组成,从内到外分别是:content 内容、padding 内填充、border 边框、外边距 margin

分类:

W3C 盒子模型(标准盒模型)

IE 盒子模型(怪异盒模型)

外边距合并:

外边距合并,指的是margin 合并.块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距,其大小是组合到其中的最大外边距,这种行为称为外边距合并。外边距合并只针对块级元素,而且是顶部或底部的外边距.

BFC

 一个块格式化上下文(block formatting context)是Web页面的可视化CSS渲染的一部分。它是块盒子的布局发生,浮动互相交互的区域。

具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。

触发 BFC:

body 根元素

浮动元素:float 除 none 以外的值

绝对定位元素:position (absolute、fixed)

display 为 inline-block、table-cells、flex

overflow 除了 visible 以外的值 (hidden、auto、scroll)

 特点:

内部块级盒子垂直方向排列

盒子垂直距离由margin 决定,同一个BFC 盒子的外边距会重叠

BFC 就是一个隔离的容器,内部子元素不会影响到外部元素

BFC 的区域不会与float box叠加

每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

 用途:

清除浮动 解决外边距  合并布局

相邻兄弟元素

//HTML
<div class="up">我在上面</div>
<div class="down">我在下面</div>

//CSS
.up {
  width: 100px;
  height: 100px;
  border: 1px solid blue;
  margin: 100px;
}
.down {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin: 100px;
  display: inline-block; // 触发BFC
}
// up和down两个元素处于不同的BFC ,外边距不重合

 

 父子元素

//HTML
<div class="parent">
  <div class="child">我是儿子</div>
</div>
//CSS
.parent {
  width: 100px;
  height: 200px;
  background: red;
  margin-top: 50px;
  overflow: hidden; // 触发父元素FBFC,取消上边距合并
}
.child {
  width: 50px;
  height: 50px;
  margin-top: 100px;
  border: 1px solid blue;
}

 

 

 

上一篇:Launcher初步学习


下一篇:前端面试题(个人整理,供参考,持续更新中)