CSS布局相关基本概念

wangxinarhat 发布于2019-08-30 14:15 / 3589人阅读

摘要：当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间基于文档流，理解定位模式相对定位，即相对于元素在文档流中位置进行偏移。绝对定位，即完全脱离文档流，相对于属性非值的最近父级元素进行偏移。

主要参考文档：
http://www.zhangxinxu.com/wor...
https://www.cnblogs.com/dojo-...

测试例子：
https://codepen.io/icyfanfan/...
https://codepen.io/icyfanfan/...

理解文档流对于理解CSS布局其他相关概念很重要！！

文档流

将窗体自上而下划分为一行一行，在每行中从左至右排放元素，即为文档流

每个非浮动块级元素独占一行，浮动元素按规定(left or right)浮在行的一端，若当前行放不下，则起新行再浮动

内联元素不会独占一行，几乎所有元素(内联、块级等)都可以生成子行以摆放子元素

有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位，固定定位。但是在IE中浮动元素也存在于文档流中

浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间

基于文档流，理解定位模式：

相对定位，即相对于元素在文档流中位置进行偏移。但保留原占位。
绝对定位，即完全脱离文档流，相对于position属性非static值的最近父级元素进行偏移。
固定定位，即完全脱离文档流，相对于视区进行偏移

块级元素 BLOCK-LEVEL ELEMENT

标签：div
特点：

一个元素占一行

可设置宽度、高度、行高、边框、内外边距

未设置宽度的情况下，宽度自动填满外部容器

内部可以容纳其他块级元素或者内联元素

块状元素的流体特性
块状水平元素，如div元素，在默认情况下（未定义宽度、非浮动绝对定位等），水平方向会自动填满外部的容器；如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，实际内容区域会响应变窄。

内联元素 INLINE ELEMENT

标签：span
特点：

和其他内联特性元素在同一行上，行布局表现形式

不可设置宽度、高度、内外边距

宽度由内部元素决定，可以设置边框，但边框的表现是每一行都会被设置（对比块级元素）

内部可以容纳文本或其他内联元素

内联块级

display: inline-block
特点：

将对象呈现为inline对象，但是对象的内容作为block对象呈现。和其他内联对象同一行显示

和块级元素一样可以设置宽高、内外边距等

内部可以容纳

Formatting Context：指页面中的一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

BFC-BLOCK FORMATTING CONTEXT 块级格式化上下文

BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素 - 所以，避免margin穿透啊，清除浮动什么的也好理解了 - from 张鑫旭blog原话
理解：一个独立的块级渲染区域，只有Block-level box参与，该区域拥有一套渲染规则来约束块级盒子的布局，内部布局不会受外部影响也不会对外部产生影响

如何产生BFC：

float的值不为none

overflow的值不为auto, scroll或hidden

display的值为table-cell, table-caption或inline-block
（测试时发现display:table也会有触发bfc，table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC）

position的值不为relative或static

BFC规则

生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。

生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。

分析：

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

垂直方向上的距离由margin决定。（完整的说法是：属于同一个BFC的两个相邻Box的margin会发生重叠，与方向无关。）

每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）

BFC的区域不会与float的元素区域重叠

计算BFC的高度时，浮动子元素也参与计算

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然

借此回忆一下之前学习过的一些布局知识
垂直方向上，两个相邻div margin重叠：其实是在同一个bfc环境中
设置父元素overflow:hidden或浮动父元素能清除浮动影响：其实就是使父元素触发bfc，让子元素参与父元素的高度计算

BFC应用
防止margin重叠：将发生重叠的元素放到两个BFC中（或者使其中一个产生BFC）
清除浮动：略
布局：利用BFC区域不会与float元素区域重叠的特性，便于实现多栏布局

idc机房托管服务器托管 linux相关概念机器学习相关概念基本概念短信产品基本概念

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

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

最流行的5个前端框架对比

摘要：是目前可用框架中无可争议的领导者。框架大小预处理器和响应式布局是模块化是启动模板布局是图标集设置附加附件无捆绑，许多第三方插件可用。是排在第二名的框架。是一个语义化设计的前端开源框架。如今出现了大量的CSS前端框架，但真正优秀的框架只有少数几个。本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点，以及具体的应用领域，你可以根据自己的具体项目需求进行选择。此外，许多选项都是...

coordinate35 2019-08-20 17:32 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0
常见的面试问题：【CSS】CSS盒模型

摘要：标准盒模型盒子总宽度高度。以上支持，除此外还可以取到相对于视窗的上下左右的距离。包括高度宽度内边距和边框，不包括外边距。主要看怎么父元素的盒模型如何设置。空元素的边距重叠是取与的最大值。一、概念 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。CSS盒模型：标准模...

android_c 2019-08-30 15:44 评论0 收藏0
常见的面试问题：【CSS】CSS盒模型

摘要：标准盒模型盒子总宽度高度。以上支持，除此外还可以取到相对于视窗的上下左右的距离。包括高度宽度内边距和边框，不包括外边距。主要看怎么父元素的盒模型如何设置。空元素的边距重叠是取与的最大值。一、概念 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。CSS盒模型：标准模...

xiaowugui666 2019-08-05 17:41 评论0 收藏0