文档流及其特性块级元素与行内元素的区别浮动的清除方法（解决浮动塌陷）

2024-06-09 07:53:14

标准文档流

web页面的制作，是一个“流”，必须从上到下，像是“织毛衣”。

标准文档流的特性

1.空白折叠现象

无论有多少个空格，换行，tab，都会折叠成一个空格。

2.高矮不齐，底边对齐

对齐形式以底边对齐为主，而不是顶部对齐。

3.自动换行，一行写不完，自动换行写。

行内元素与块级元素

标准文档流等级森严，便签分为两种等级：

行内元素
块级元素

块级元素与行内元素的区别：

1.块级元素独占一行，行内元素只占一行的一部分。

2.行内元素会与其他行内元素并排。

3.行内元素不能设置宽高，默认的高度就是文字的高度。

4.块级元素可以设置宽高，如果不设置宽高，那么宽度将默认变成父元素的100%。

块级元素：p、div、h、li、dt、dd

行内元素：b、span、em、u、a、i

行内元素和块级元素的相互转化

通过display这个属性将两者相互转化

块级元素转化为行内元素

display:inline

行内元素转化为块级元素

display:block

设置完成之后，这个行内标签就变成了块级元素，以span为例子

该span标签可以设置宽度与高度
该span独占一行
如果不设置宽度，那么将撑满父元素

标准流里面的限制很多，如果我们班现在就要并排，并且要设置宽高，我们就可以:脱离标准流

在css中，我们可以使用三种方法，使一个元素脱离标准文档流：

浮动
绝对定位
固定定位

一个元素浮动以后，比如span元素，产生浮动以后，就能够并排了，并且能够设置宽高，就不会有什么行内，块级之分。

标准流中的文字不会被浮动的盒子遮挡住，当一个p标签的文字在标准流文档中，一个div通过浮动到了p标签上面，文字会形成字围效果，字体包围着图片。

一个浮动的元素，如果没有设置 width，那么将会自动收缩到内容的宽度。

如果一个元素要浮动，那么它的祖先一定要有高度。

有高度的盒子，才能关的住浮动。

浮动的清除

清除浮动与浮动之间的影响

1.给浮动的祖先元素加高度，这个高度要大于孩子的高度。

（不推荐，高度一般让内容撑高）

2.使用clear：both；

clear就是清除，both指的就是左浮动右浮动都要清除，但是由于两个浮动的元素没设置高度，所以清除浮动后，margin属性失效了。

3.隔墙法

在两个浮动的元素中间，加上一个空div，并且将div设置clear：both，并且加上高度，达到margin的效果。

4.内墙法

在父元素中加上一个有高度元素，把父元素撑高，

5.overflow：hidden

没有设置高度的父元素不能被浮动的子元素撑开高度，但是给父元素加上overflow：hidden之后，父元素就能被子元素撑开了。

文档流及其特性块级元素与行内元素的区别浮动的清除方法（解决浮动塌陷）相关推荐

继承性和层叠性权重盒模型 padding(内边距) border(边框) margin 标准文档流块级元素和行内元素...
内容总结: 1.继承性和层叠性继承性: 像一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...
python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)...
昨日内容回顾高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active属性选择器: [属性~='属性值'] 伪类选择器 a ...
前端开发 html第二课自结束标签注释标签中的属性文档声明进制字符编码文档使用 VScode 实体 meta标签语义化标签块元素和行内元素布局标签
1 自结束标签标签一般成对出现,但是也存在一些自结束标签如: 多"/"和没有"/"区别不大 2 注释注释的作用: 注释中的内容会被浏览器忽略,不会在网页中 ...
Web前端，CSS中关于块级元素、行内元素、行内块元素、元素显示模式转换、CSS特性继承性和层叠性、普通导航和五彩导航的制作
前言持续总结输出中,今天分享的是Web前端,CSS中关于块级元素.行内元素.行内块元素.元素显示模式转换.CSS特性继承性和层叠性 1.块级元素特点: 独占一行(一行只能显示一个) 宽度默认是父元 ...
css标签显示特性（块级元素、行内元素、行内块元素、标签显示模式转换display、简单文字居中、简单导航栏案例）
HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 标签以什么方式进行显示,比如div 自己占一行, 比如span 一行可以放很多个 1. 块级元素(block-level) 常 ...
CSS块级元素与行内元素的区别和联系
块元素(block element)一般是其他元素的容器元素,能容纳其他块元素或内联元素.块元素就好比一个四方块,可以放其他的四方块,并可以呈现在页面上任何地方. 默认情况下块元素,是独占一行的常见 ...
html 盒子模型添加图片,[HTML/CSS]盒子模型，块级元素和行内元素
目录概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项目中,曾经也弄过从前端布局,也吃过这方面的亏.今天, ...
块级元素和行内元素，行内块元素
在学习 CSS 的时候发现,发现有些标签会独占一行,典型的例如 <div> 标签.而某些不会独占一行,典型如 <span> 标签.其实这是因为 CSS 的标签是有区分元素类型的 ...
22 块级元素和行内元素
学习的初期,我们就要知道,标准文档流等级森严.标签分为两种等级: 行内元素块级元素比如h1标签和span,同时设置宽高,来看浏览器效果,那么你会发现: 行内元素和块级元素的区别:(非常重要) 行内 ...

最新文章

热门文章