box model
Margin
Border
Padding
Content
width
指定content box 的宽度 百分数相对于父容器(包含块)的content box的宽度 只有包含块的高度不依赖该元素时，百分比宽度才生效
padding
内边距
margin
外边距
相邻的两个盒子margin，会发生折叠
margin可以为负值
box-sizing
改变盒模型计算方式
content-box
border-box //更符合
overflow
溢出控制
取值：visible hidden scroll auto
初始值：visible
视觉格式化模型视口(Viewport)
浏览器的可视区域
块级元素(block-level)
会被格式化块状元素 例如p,div,section等 将display设置为block，list-item, table 使元素变为块级元素
行级元素(inline-level)
盒子的生成
每一个块级元素生成一个主块级盒(principal block-level box)用它来包含子级盒
每一个行级元素生成一个行级盒，行级盒分布于多行
Box Model-revisited
行级盒 margin-top, margin-bottm, padding-top不会产生效果
行级盒 padding-bottom不会影响布局
块级盒子的子盒子的生成
块级盒子可以包含多个子块级盒子
也可以包含多个行级盒子
不在行级元素里面的文字，会生成匿名行级盒比如,
Some text
中的some块级盒子中不能同时包含块级和行级盒子。遇到这种情况，会生成匿名块级盒来包含行级盒。比如标题
2017-1-10
行级盒子的子盒子生成
行级盒子内可以包含行级盒子
行级盒子包含块级盒子时，会被块级拆成两个行级盒子，这两个盒子又分别被匿名k块级盒包含 aaaa22222
tttttt
display属性
block 生成块级盒
inline 生成行级盒
inline-block 生成行级盒，为其内容生成块级盒
none 在排版时将元素忽略
visibility
控制元素展示
取值：visible hidden collapse
初始值：visible
排版时会占用位置
Generated Content //多产生盒子，用来存放指定的内容
控制元素 ::before 和 ::after content //需要插入的内容
常规流
除了根元素，浮动元素和绝对定位元素外，其他元素都在常规流之内
而根元素，浮动和绝对定位元素会脱离常规流
常规流中的盒子，属于处于块级格式化上下文，或行级格式化上下文
块级格式化上下文(Block Formatting Context)
盒子在容器(包含块)内从上到下一个接一个的放置
两个兄弟盒子之间的距离由margin属性决定
同一个BFC内垂直margin会合并
盒子的左外边缘挨着容器(包含块)的左边
BFC特性
BFC内的浮动不会影响到BFC外部的元素
BFC的高度会包含其内的浮动元素
BFC不会和浮动元素重叠
BFC可以通过 overflow：hidden 浮动框 绝对定位框 非块级的块容器(inline-block) 等方法创建
行级格式上下文(lnline Formatting Context)
盒子一个接一个水平放置
盒之间的水平margin，border和padding都有效
同一行的盒子所在的矩形区叫行盒(line box)
当一个行盒放不下上下文内所有盒子时，会被分到多个垂直折叠的行盒内
行盒内的水平分布由 text-align 决定
如果一个行级块无法分割(单词, inline-block)，该元素会被作为一个整体被决定放在哪一个行盒
浮动(float)
浮动元素从常规流中脱离，被漂浮在容器(包含块)的左边或者右边
浮动盒会一直漂到其外边缘挨到容器边缘或另外的浮动盒
浮动元素不会影响其后面的流内块元素
但是浮动元素后面的行级盒子会变短以避开浮动元素
clear
指定元素哪一边不能与之前的浮动框相邻 取值：left right both
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
overflow: hidden;
}
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116411.html
摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。从元素的布局特性来分，主要可以分为三类元素块级元素，行内元素，行内块级元素。行内级元素属性取的元素。 深入css布局（1）—— 盒模型 & 元素分类 在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们...
摘要：深入布局盒模型元素分类在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。规定元素和属性是包含元素的边框内边距内容的。后来微软也慢慢转向了的标准，在以后支持了标准盒模型。行内级元素属性取的元素。 深入css布局（1）—— 盒模型 & 元素分类 在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重...
摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。 引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。 一、什么是...
摘要：引言盒模型是页面布局中经常会使用到的一种思维模型，将等概念运用日常生活中的盒子来形容，因此称之为盒模型。一什么是盒模型我们首先来看一下在中盒模型的样子我们可以清楚的看出，盒模型由内容内边距边框外边距组成。 引言 CSS盒模型是页面布局中经常会使用到的一种思维模型，将margin、border、padding、content等概念运用日常生活中的盒子来形容，因此称之为盒模型。 一、什么是...
摘要：最近工作中有机会复习一下的基本知识，那么先从的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题怎么把盒模型变成标准盒模型嗯，有办法，就可以啦。具体参见链接描述常见的盒模型分两类怪异盒模型和标准盒模型，两种盒模型有着很大的不同。 最近工作中有机会复习一下css的基本知识，那么先从css的盒模型开始吧，因为这是当时进现在这家公司笔试的第一题：怎么把IE盒模型变成标准盒模型？嗯，有办法，...
摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型 css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中，每...
阅读 2028·2021-09-30 09:47
阅读 705·2021-09-22 15:43
阅读 1984·2019-08-30 15:52
阅读 2435·2019-08-30 15:52
阅读 2542·2019-08-30 15:44
阅读 906·2019-08-30 11:10
阅读 3374·2019-08-29 16:21
阅读 3298·2019-08-29 12:19
