文档流相关

tainzhi 发布于2019-08-30 10:59 / 2043人阅读

摘要：文档流标准文档流，元素默认会从左至右，上至下，块级元素独占一行，行内元素共享一行预留空间，出现在正常文档流，忽略或者声明预留空间，相对于之前的位置移动没有预留空间，相对于非的位置移动，如果没有，就一路到根元素没有预留空间，相对于屏幕视口的

文档流

标准文档流，元素默认会从左至右，上至下，块级元素独占一行，行内元素共享一行

position

static

预留空间，出现在正常文档流，（忽略 top, bottom, left, right 或者 z-index 声明）

relative

预留空间，相对于之前的位置移动

absoute

没有预留空间，相对于非static的位置移动，如果没有，就一路到根元素

fixed

没有预留空间，相对于屏幕视口的位置移动

sticky（兼容不好）

相对于第一个有滚动的父级块元素的位置移动，就是正常像relative，滚动时像fixed

z-index

层叠顺序，整数越大，越被层叠在上面，父子关系的话，一定是父在上子在下，同节点如果不按顺序来的话，就应该去查看其父元素，俗称“拼爹”

clear Float

如果子元素用了float，如果不清除浮动，父元素无法撑开子元素

clear: both：在父元素下增加一个新元素

overflow: auto

clearfix：写一个类在父元素，利用伪元素插入两个元素块

.clearfix:after{
  content: "";
  display: block;
  clear: both;

BFC

直译为"块级格式化上下文"，与外部区域毫不相关，是一个容器，用来管理块级元素

创建BFC

float为left|right

overflow为 hidden|auto|scroll

display为 table-cell|table-caption|inline-block|inline-flex|flex

position为 absolute|fixed

根元素

BFC特性 特性1： BFC阻止margin重叠

属于同一个BFC时，margin会重叠，只要他们之间没有阻挡（比如边框、非空内容、padding等）就会发生margin重叠

兄弟元素margin重叠，解决方案是，中间加个BFC

子元素margin父元素不撑开，解决方案是，父元素BFC

特性2：BFC不会重叠浮动元素

就是把浮动元素和其他元素分开，行成自适应两拦布局

特性3：BFC可以包含浮动

子元素浮动，就脱离了文档流，父元素高度坍塌，解决方案是，把父元素变成一个BFC

服务器托管私有云文档流输出日期相关相关相关函数

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

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

CSS布局相关基本概念

摘要：当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间基于文档流，理解定位模式相对定位，即相对于元素在文档流中位置进行偏移。绝对定位，即完全脱离文档流，相对于属性非值的最近父级元素进行偏移。主要参考文档：http://www.zhangxinxu.com/wor...https://www.cnblogs.com/dojo-... 测试例子：https...

wangxinarhat 2019-08-30 14:15 评论0 收藏0
浮动及浮动相关问题(初次)

摘要：浮动定义使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来，当浮动并不是全动脱离文档流。这仅是我个人看到的，如果补充，还请大家不要吝啬当个键盘侠，谢谢！文档流文档中可显示的元素在排列时候的开始位置以及他们所占的区域。因为页面中的元素分为不同的种类，所以他们会按各自的特点去显示，在页面中所占的区域不是一样的。会按从上到下，从左到右的顺序输出内容。...

W_BinaryTree 2019-08-02 10:54 评论0 收藏0
浮动及浮动相关问题(初次)

摘要：浮动定义使元素脱离文档流，按照指定的方向发生移动，遇到父级的边界或者相邻的浮动元素就会停下来，当浮动并不是全动脱离文档流。这仅是我个人看到的，如果补充，还请大家不要吝啬当个键盘侠，谢谢！文档流文档中可显示的元素在排列时候的开始位置以及他们所占的区域。因为页面中的元素分为不同的种类，所以他们会按各自的特点去显示，在页面中所占的区域不是一样的。会按从上到下，从左到右的顺序输出内容。...

fsmStudy 2019-08-30 15:54 评论0 收藏0
深入css布局 (2) — 定位与浮动

摘要：深入布局定位与浮动在知识体系中，除了选择器，样式属性等基础知识外，布局相关的知识才是比较核心和重要的点。定位后，原来在文档流中占据的位置，会被其他元素所占据。清除浮动的特殊应用清除浮动可以解决父元素高度塌陷问题。深入css布局(2) — 定位与浮动在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深...

Crazy_Coder 2019-04-23 13:42 评论0 收藏0
[React Native Android 安利系列]样式与布局的书写

摘要：形式本身是的对象形式。我们先调整其为，如图图可见第二个元素虽然脱离了文档流但是还是在原先的位置上。设定为了与自己未脱离文档流时候的和一致。我们来实验一下，如图图我们看到，文档流中后出现的覆盖掉了。欢迎大家收看react-native-android系列教程，跟着本系列教程学习，可以熟练掌握react-native-android的开发，你值得拥有：https://segmentfau...

kycool 2019-06-25 10:39 评论0 收藏0