什么是css文档流

html-css016

什么是css文档流,第1张

"文档"就是页面,doctype。"流"就指输入输出的形式,其中输入应该是“布局”,输出应该是“显示”综合起来就是:页面布局和显示的形式。

就是普通流了。就像你以前用表格布局基本只涉及到文档流,如绝对定位的元素不占文档流,它会忽略文档流的存在而浮在已有东西的上面。如相对定位它占文档流,所以定位不好它会覆盖已有的东西。

浮动的东西也不占的,只是文档流会围绕浮动的东西。因为div布局要经常用浮动,不浮动不好布局。

如一个主div1是文档流,假设里面有(2个浮动div(高100px)),如果你不加清理,overflow或其他处理方法。

因为你的东西在两个浮动的div里,这时你接个主div2,那它是出现在div1的下面,而不是在100px下,当然ie会自动扩大高度,但其他浏览器可不会。

CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。

需要注意的是,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。

而对于使用absolute positioning脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。

扩展资料

在CSS 2.1规范中,识别符(包括选择符中的元素名、类、ID)只能包含A~Z、a~z、0~9等字符,加上连字符“-”、下划线“_”。

识别符不能以数字开头,以连字符和下划线开头也是不允许的。只有属性、属性值、单位、伪类、伪元素和“@”规则可以由连字符“-”开头。同时,其他元素名称、类和ID标识符也不允许用连字符开头。

CSS的识别符也需要用反斜杠“\”规避特殊字符,这些规避字符遵循IS010646规范。特殊字符的规避方法有两种:

第一种方法是遇到特殊字符则在这些字符前直接添加反斜杠,例如,“AT&T”变为“AT\&T”;

另一种方法为用反斜杠和Unicode或IS010646等值的十六进制数值一起,规避特殊字符,例如,“AT&T”变为“AT\26T”。

层叠样式表(Cascading Style Sheet,CSS)有助于实现负责任的Web设计。CSS对开发者构建Web站点的影响很大,并且这种影响可能是无止境的。

将网页的大部分甚至是全部的表示信息从(X)HTML文件中移除,并将它们保留在一个样式表中有诸多优点,如降低文件大小、节省网络带宽以及易于维护等。

此外,站点的表现信息和核心内容相分离,使得站点的设计人员能够在短暂的时间内对整个网站进行各种各样的修改。

CSS简化了网页的格式代码,外部的样式表还会被浏览器保存在缓存里,加快了下载显示的速度,也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。

只要修改保存着网站格式的CSs样式表文件就町以改变整个站点的风格特色,在修改页面数量庞大的站点时,显得格外有用。这就避免了一个个网页的修改,大大减少了工作量

参考资料来源:百度百科-CSS

     Css的定位机制分为普通流(文档流)、浮动(float)、定位(position)其中普通流就是文档流,在Html中的写法是从上到下,从左到右的排版布局,其中块级元素独占一行,而内联元素不独占一行。对于文档流来说它的默认position是static就是没有定位。

      position规定元素的定位类型,任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不管该元素本身是个什么类型,相对元素会相对与它的正常流的默认位置作出偏移。具体:static,position的默认值,表示没有定位,忽略top,left,bottom,right和z-index的影响;absolute,生成绝对定位元素,相对于static定位之外的第一个父元素进行定位,元素位置通过left,top,bottom,right设置;fixed,生成绝对定位元素,相对于浏览器窗口进行定位,通过left,top,bottom,right设置;relative,生成相对定位元素,相对于其正常文档流中的位置进行定位,通过left,top,botton,right设置(注意相对正常位置);inherit规定应该从父元素处继承position属性。

       浮动模型是一种可视化格式模型,浮动的框可以左右移动,直到它的外边缘碰到包含框或者另一个浮动元素的边框,如果包含的框中没有足够的宽度容纳浮动元素那么多余的就会下移。浮动元素不在文档的普通流中,就好比浮动元素在文档流中不存在似的。

       从上面我们知道,被设置了absolute的元素或者float的元素都会脱离文档流,虽然正常的显示还在,但是它其实不占文档流中的空间位置。在float脱离文档流的时候虽然其他盒子无视他,但盒子中的文本围绕它,而absolute脱离文档流会造成其他盒子和盒子的文本都会无视他。