标准文档流

标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。HTML文档中的元素可以分为两大类:行内元素和块级元素。
       1.行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域。它同样是DOM树中的一个节点,在这一点上行内元素和块级元素是没有区别的。
       2.块级元素总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排。
盒子在标准流中的定位原则
margin控制的是盒子与盒子之间的距离,padding存在于盒子的内部它不涉及与其他盒子之间的关系和相互影响问题,因此要精确控制盒子的位置,就必须对margin有更深入的了解。下面分四种情况对margin调整盒子的位置进行解说。
1.行内元素之间的水平margin
当两个行内元素紧邻时,它们之间的距离为第一个元素的右margin加上第二元素的左margin。
2.块级元素之间的竖直margin
两个竖直排列的块级元素,它们之间的垂直距离不是上边的第一个元素的下margin和第二个元素的上margin的总和,而是两者中的较大者。这在实际制作网页的时候要特别注意。
3.嵌套盒子之间的margin
这时子块的margin以父块的content为参考进行排列
4.margin设为负值
会使设为负数的块向相反的方向移动,甚至会覆盖在另外的块上。

时间: 2024-07-30 21:46:45

标准文档流的相关文章

页面标准文档流、浮动层、float属性(转)

CSS float 浮动属性介绍 float属性:定义元素朝哪个方向浮动. 1.页面标准文档流.浮动层.float属性 1.1 文档流 HTML页面的标准文档流(默认布局)是:从上到下,从左到右,遇块(块级元素)换行. 1.2 浮动层 浮动层:给元素的float属性赋值后,就是脱离文档流,进行左右浮动,紧贴着父元素(默认为body文本区域)的左右边框. 而此浮动元素在文档流空出的位置,由后续的(非浮动)元素填充上去:块级元素直接填充上去,若跟浮动元素的范围发生重叠,浮动元素覆盖块级元素.内联元素

标准文档流.浮动以及清除浮动(学习笔记)

标准文档流 1.当后面空间不够时,会空白折叠,自动换行. 2.当高矮不齐时,会底部对齐. 3.自动换行. 标签根据显示的内容划分成:文本级,容器级. 按照文档流划分:块级元素.行内元素; 块级元素: (1).霸占一行,不能与其他任何元素并列. (2)能接受宽高. (3).如果不设置宽度,那么宽度将默认变为父亲的100%. 行内元素: (1).与其他行内元素并排; (2)不能设置宽高.默认宽度就是文字宽度. 所有的文本级标签,都是行内元素,除了p,p是个文本级,但是是个块级元素. 所有的容器级标签

标准文档流与脱离文档流

在网页当中,所有的元素都有自己的占位. 标准文档流指在没有CSS干预的前提下,块级元素独占一行,可以自行定义宽.高:而行内元素并排显示,宽.高为auto. 常见的块级元素有: <address>地址<caption>表格表格标题<div>划分区域.区块<dl>定义列表<dt>定义列表中的项<dd>列表中定义条目<form>创建一个表单<h>标题标记<hr>一条横线<li>定义列表项目&l

11-[CSS]-标准文档流,display,浮动,清除浮动,overflow

1.标准文档流 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> span{ font-size: 50px; } </style> </head> <body> <d

标准文档流以及伪类选择器

标准文档流 浏览器排版是根据元素的特征(块和级),从上往下,从左往右排版.这就是标准文档流. float:left/right: 效果:元素都加浮动,后面的元素会紧跟着前面的元素并排排列. A. 只要加了float,这个元素就会脱离标准文档流. (第一个加了float,离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位.而第一个依然存在,所以就会叠加.) 行级加float,就会脱离标准流,块不像块,行不像行,能设置宽高,能并排排列,display就没有

标准文档流 伪类选择器

                                                 标准文档流 浏览器排版是根据元素的特征(块和级),从上往下,从左往右排版.这就是标准文档流. float:left/right: 效果:元素都加浮动,后面的元素会紧跟着前面的元素并排排列. A. 只要加了float,这个元素就会脱离标准文档流. (第一个加了float,离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位.而第一个依然存在,所以就会叠加.)

浮动与清除浮动、标准文档流(重点)

什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个"流",从上而下 ,像 "织毛衣".而设计软件 ,想往哪里画东西,就去哪里画 标准文档流下 有哪些微观现象? 1.空白折叠现象 多个空格会被合并成一个空格显示到浏览器页面中.img标签换行写.会发现每张图片之间有间隙,如果在一行内写img标签,就解决了这个问题,但是我们不会这样去写我们的html结构.这种现象称为空白折叠现象. 2.高矮不齐,底边对齐 文字还有图片大小不

15 标准文档流

标准文档流,又叫普通流,文档流 是什么: 文档流就是html页面 文档流的布局方式:从左到右,从上到下 特点: 拥有块元素,行内元素, margin垂直塌陷,不能移动 文字空白出现折叠现象 文本类的元素会并排 高低不齐 底边对齐 文字排到最右侧,自动换行 html文档中的元素可以分为两大类:行内元素和块级元素 块级元素 范围:所有容器级元素都是块级元素,文本级元素中p元素也是块级元素 是什么: 1.可以设置宽高的 2.独占一行,不与其他元素并排的 3.未设置宽高时,会继承父亲宽度的100% 如:

css排版之-标准文档流

position:static(静态定位) 当position属性定义为static时,可以将元素定义为静态位置,所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题.所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认显示为静态位置,在静态定位状态下无法通过坐标值(top,left,right,bottom)来改变它的位置. position:absolute(绝对定位) 当position属性定义为absolute时,元素会脱离文档流