文档流 | 易学教程

文档流与浮动

阅读更多关于文档流与浮动

文档流指的是元素排版时，会自动从左往右，从上往下的流式排列方式。元素分为两类默认独占一行，不能与其他元素并列，可以容纳内联元素和其他块元素，可以设置高和宽，如果不设置宽，则默认设置宽度为父级的100% 如：div dl dt dd h1~h6 ul li ol tr td hr p pre等（2）行内元素和其他元素都在一行上，宽高及外边距和内边距不可改变，宽度就是它的文字或图片的宽度，内联元素只能容纳文本或者其他内联元素，行内元素可以由line-height设置行高设置margin 只有左右margin有效，上下无效。设置padding 只有左右padding有效，上下则无效。如：a span button b big img input em等块级元素和行内元素可以相互转换通过display属性进行设置，display是显示模式，用来改变元素的行内、块级性质。 2.浮动即float，可设置左浮动left和右浮动right。元素设置浮动以后，会完全脱离文档流，并向页面的左上或右上浮动。直到遇到父元素的边框或其他的父元素时则停止浮动。元素浮动后可能会出现围字现象，或者原本标准流的内容被遮挡住。浮动带来的问题大专栏文档流与浮动 7%88%B6%E5%85%83%E7%B4%A0%E9%AB%98%E5%BA%A6%E5%A1%8C%E9%99%B7" class

CSS标准文档流

阅读更多关于 CSS标准文档流

标准文档流介绍我们在制作 HTML 网页的时候，都必须遵循一个流的规则如：从左至右、从上至下规则。让我们进入 HTML 网页的标准文档流基本原理实践。代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>标准文档流</title> </head> <body> <h1>微笑是最初的信仰</h1> <span>微笑是最初的信仰</span> </body> </html> 结果图标准文档流要注意的事项空白折叠现象。高矮不齐，底部对齐。让我们进入空白折叠现象实践。代码块 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie

CSS定位中脱离文档流是什么意思？

阅读更多关于 CSS定位中脱离文档流是什么意思？

自己做项目中遇到使用定位的情况，搞不清楚相对定位，绝对定位，固定定位的具体作用，就在网上查资料，发出来给大家做参考，自己也留个记录，方便以后再看！！！脱离文档流只是对html文档的一种解析方案的说法而已。脱离文档流是相对正常文档流而言的。正常文档流就是我们没有用css样式去控制的html文档结构，你写的界面的顺序就是网页展示的顺序。比如写了5个div块。正常文档流就是依次显示这5个div块。从左往右，自上而下的顺序。脱离文档流就是指它所显示的位置和文档代码就不一定一致了。比如可以用css控制，把最后一个div块显示在第一个div块的地方。这个只是浏览器的处理方案。但是，dom结构是没有发生变化的。仍旧和你写的html文档一样。用js取这个节点可以取到的。来源： CSDN 作者： it_1013 链接： https://blog.csdn.net/It_1013/article/details/79201807

绝对定位和浮动会脱离文档流

阅读更多关于绝对定位和浮动会脱离文档流

1.脱离文档流 position : absolute ; // 绝对定位 float : left ; // 浮动 2.不会脱离文档流 position : relative ; // 相对定位来源： CSDN 作者：冰夕_lyn 链接： https://blog.csdn.net/lyn1772671980/article/details/79296307

CSS之定位与脱离文档流与过渡

阅读更多关于 CSS之定位与脱离文档流与过渡

CSS介绍实现移动的三种方法可以用 margin 可以用浮动布局可以用定位脱离文档流 <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "utf-8" > < title > 脱离文档流 </ title > < link rel = "stylesheet" href = "脱离文档流.css" /> </ head > < body > < div class = "redDiv" > </ div > < div class = "blueDiv" > < div class = "item" > </ div > </ div > </ body > </ html > body{ margin:0px; } .redDiv{ width: 200px; height: 200px background-color: red; } .blueDiv{ width: 400px; height: 100px; background-color: yellow; float:right; } .item{ width: 20px; height: 100px; background-color: yellow; float:right; } 定位定位浮动行标签 inline 不能设置宽-高

HTML中是否脱离文档流

阅读更多关于 HTML中是否脱离文档流

我们在显示隐藏元素的时候经常会用到把display设置为none，设置为none效果很明显，就是让元素脱离文档流，不显示，不占文档空间。定位： inhert:规定从父元素继承position属性的值。 static：默认值，没有定位，元素出现在正常的流中。 relative:无论元素是否移动，元素在文档流中占据原来空间，只是表现会改变。 absolute:绝对定位使元素的位置与文档流无关，也不占据文档流空间，普通流中的元素布局就像绝对定位元素不存在一样。由于绝对定位和文档流无关，所以绝对定位的元素可以覆盖页面上的其它元素，可以通过z-index属性控制叠放顺序。 fixed: 不包含在普通文档流中。浮动：浮动的框可以左右移动，直到它的外边框碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中，文档的普通流中的元素表现的就像浮动元素不存在一样。如果浮动的元素后有一个文档流中元素，那么这个元素的框会表现的像浮动元素不存在，但是框的文本内容会受到浮动元素的影响，会移动以留出空间。该特性经常会被用在是文字围绕图片上。当图片不浮动时，文字就会换行出现在下面；当图片浮动时，文字围绕着图片。用术语说就是浮动元素旁边的行框被缩短，从而给浮动元素留出空间，因而行框围绕浮动框。要想阻止行框围绕在浮动元素外边，可以使用clear属性。来源：

脱离文档流的疑难混淆点儿 display:inline-block能脱离文档流吗

阅读更多关于脱离文档流的疑难混淆点儿 display:inline-block能脱离文档流吗

　　 CSS 中脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。　　需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。　　而对于使用absolute positioning脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。脱离文档流只是对html文档的一种解析方案的说法而已。脱离文档流是相对正常文档流而言的。正常文档流就是我们没有用 css 样式去控制的html文档结构，你写的界面的顺序就是网页展示的顺序。比如写了5个div块。正常文档流就是依次显示这5个div块。从左往右，自上而下的顺序。脱离文档流就是指它所显示的位置和文档代码就不一定一致了。比如可以用 css 控制，把最后一个div块显示在第一个div块的地方。这个只是浏览器的处理方案。但是，dom结构是没有发生变化的。仍旧和你写的html文档一样。用js取这个节点可以取到的。来源： CSDN 作者： binlety 链接： https://blog.csdn.net/binlety/article/details/81328486

脱离文档流的方法

阅读更多关于脱离文档流的方法

HTML脱离文档流的三种方法 1：float 使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。 2：absolute 3：fixed 相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）。【半脱离文档流】： position：relative 本体还在文档流中占有位置，但是却可以通过改变位置使其漂浮到其他的地方，其定位方式是相对其原先在文档流中的位置进行定位的。转载于:https://www.cnblogs.com/yangai/p/10338953.html 来源： CSDN 作者： badiu_30394251 链接： https://blog.csdn.net/weixin_30394251/article/details/95702647

HTML5-布局篇( 总结 )

阅读更多关于 HTML5-布局篇( 总结 )

1）像<span>这样的行内标记，定义它的margin-top和margin-bottom是无效的，除非你把它设置为块状元素才可以。Display:block 2）对于块状元素，你可以自由的使用外边距来定义版式和元素之间的距离。类似 DIV 等等， 3）无论什么元素，一旦设置为是浮动显示，就拥有了完整的盒模型结构，我们就可以使用外边距，内边距，边框，高和宽来控制的大小以及与其他对象之间的位置关系。 4）浮动是从网页布局的角度来定义元素的显示，而行内和块状属性主要是从元素自身的性质来定其显示的。 5）当元素没有定义边框时，可以把内边距作为外边距使用。有时候外边距会有重叠现象的。 6）当为元素定义背景图像时，内边距区域内可以显示背景图像，而对外边距区域来说，背景图像是达不到的，他永远都是透明状态 7）用div+css设计网页结构时，设计师满脑子都是网页内容，而非内容所呈现的效果。 8）块状元素：不管块状元素宽度是多少，他总会自动占据一行，因为在他末尾附加了一个换行符，而行内元素没有这个特点。块状元素有完整的盒模型结构，可以定义宽度和高度，而行内元素没有这个特性，无法通过高度来改变文本行的行高。块元素的代表标记 div 行内元素的代表标记 span ，行内标记不具备组织结构框架 9）网页布局分为：自然布局，浮动布局，定位布局 10）当一个元素被定义为浮动显示时，即定义为块状元素

前端题部分总结（二）

阅读更多关于前端题部分总结（二）

前端页面优化答：1. 减少http请求，2.-e 3.尽量静态页面，从简原则 4.代码规范 Css盒模型答：magin+border+padding+width , 当设置background颜色的时候，会覆盖padding+width（其实还有border，因为当border为虚线dashed时，background背景色会嵌进去。）还有原来ie浏览器还不兼容！！！ w3c中的盒子模型的宽:包括margin+border+padding+width; width: margin*2+border*2+padding*2+width; height: margin*2+border*2+padding*2+height; iE中的盒子模型的width:也包括margin+border+padding+width; 上面的两个宽度相加的属性是一样的。不过在ie中content的宽度包括padding和border这两个属性；例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px; 如果用w3c盒子模型解释，那么这个盒子模型占用的宽度为：20*2+10*2+10*2+200=280px; 高度：20*2+10*2+20*2+50=130px;盒子的实际宽度大小为:10*2+10*2+200

订阅文档流