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

标准文档流

1.当后面空间不够时,会空白折叠,自动换行.

2.当高矮不齐时,会底部对齐.

3.自动换行.

标签根据显示的内容划分成:文本级,容器级.

按照文档流划分:块级元素.行内元素;

块级元素:

(1).霸占一行,不能与其他任何元素并列.

(2)能接受宽高.

(3).如果不设置宽度,那么宽度将默认变为父亲的100%.

行内元素:

(1).与其他行内元素并排;

(2)不能设置宽高.默认宽度就是文字宽度.

所有的文本级标签,都是行内元素,除了p,p是个文本级,但是是个块级元素。

所有的容器级标签都是块级元素。

块级元素和行内元素的互相转换.

属性:display

值:inline:块级元素转换为行内元素;

block:行内元素转换为块级元素;

css中一共有三中手段,使一个元素脱离标准文档流;

(1).浮动;

(2).绝对定位;

(3).固定定位;

浮动:float;

分为:左浮动和右浮动;

(1).浮动会使元素脱离标准文档流;

(2).浮动元素互相贴靠;

(3).浮动的元素有”字围”效果;(浮动能挡住标签挡不住内容;)字围指汉字:

(4).收缩;(对于一个浮动的元素没给宽高,将要收缩到内容的宽度;)

注意:永远不是一个浮动,浮动都是一起浮动,要浮动大家都浮动;

如果浮动在块级元素的下边,不会占用块级元素的空间;

清除浮动

1.想清除浮动可以给浮动元素的祖先元素加高度;(给前一个的祖先加高度);

2.用属性clear:both;

clear就是清除,both指的是左浮动,右浮动都要清除.(是清除其他浮动对我的影响)

3.隔墙法;(方法2和3混合用);

<div>

<p></p>

<p></p>

<p></p>

</div>

<div class="cl h10"></div>

<div>

<p></p>

<p></p>

<p></p>

</div>

衍生出了:内墙法:

<div>

<p></p>

<p></p>

<p></p>

<div class="cl h10"></div>

</div>

<div>

<p></p>

<p></p>

<p></p>

</div>

注意:脱标的元素是不能把父元素撑出高度的;

非浮动元素撑出了父元素的高度;

4.overflow:hidden:本意是将所有溢出盒子的内容,隐藏掉;

能够撑出父容器的高度;

时间: 2024-10-25 21:13:46

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

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

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

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

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

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

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

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

标准文档流 伪类选择器

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

标准文档流与脱离文档流

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

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时,元素会脱离文档流

标准文档流

标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则.HTML文档中的元素可以分为两大类:行内元素和块级元素.       1.行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域.它同样是DOM树中的一个节点,在这一点上行内元素和块级元素是没有区别的.       2.块级元素总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排.盒子在标准流中的定位原则margin控制的是盒子与盒子之间的距离,