CSS的标准文档流

作者 : 开心源码 本文共1342个字,预计阅读时间需要4分钟 发布时间: 2022-05-13 共247人阅读

1. 标准文档流

文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。

2. 标准流的微观现象:

  • 空白折叠现象。
// 比方,假如我们想让img标签之间没有空隙,必需紧密连接.<img src="img/00.jpg"/><img src="img/02.jpg"/>
  • 高矮不齐,底边对齐
  • 自动换行,一行写不完时,换行写

3.标准文档流等级

分为两种等级:块级元素和行内元素;

块级元素:
1).霸占一行,不能与其余任何元素并列
2).能接受宽、高
3).假如不设置宽度,那么宽度将默认变为父亲的100%,即和父亲一样宽

行内元素:
1).与其余元素并排
2).不可设置宽、高。默认的宽度就是文字的宽度
在HTML中,标签分为:文本级和容器级;
文本级:p、span、a、b、i、u、em
容器级:div、h系列、li、dt、dd

温馨小提醒:

(1).容器级的标签,里面可以放置任何东西;文本级的标签里面,只能放置文字、图片、表单元素。
(2).p标签是一个文本级标签。p里面只能放文字、图片、表单元素。其余的全部不能放。
(3).定义列表是一个组标签,不过比较复杂,出现了三个标签:
dl表示definition list 定义列表
dt表示definition title 定义标题
dd表示definition description 定义表述词儿
dt、dd只能在dl里面;dl里面只能有dt、dd

<dl> <dt>你好</dt> <dd>这里是撒哈拉沙漠</dd> <dt>别想</dt> <dd>你走不出这里的</dd> <dt>除非</dt> <dd>跪下来喊爸爸,我带你</dd> </dl>` 

表达的语义是两层:

  • 是一个列表,列出了你好、别想、除非三个词
  • 每一个词儿都有自己的形容项。
    dd是形容dt的。

延伸外之后,开始说正事儿

css的分类和HTML的分类很像,就p不一样
所有的文本级标签都是行内元素除了p
p是个文本级,但是是个块级元素
所有的容器级标签都是块级元素
我们用图表示一下:

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

块级元素可以设置为行内元素;
行内元素也可以设置为块级元素。
举个例子:

div {  display: inline;  background-color: pink;  width: 400px;  height: 400px;}

display是显示模式,用来改变元素的行内、块级性质
,一旦给一个标签设置display:inline;那么这个标签立即变为行内元素。此时div和span没有什么区别,此时的div不可设置宽度和高度(即便设置了也并不显示出来,不信你去用代码验证一下呀),此时div可以和别人并排

同理

span {   display: block;   width: 300px;   height: 300px;   background-color: green;}

此span标签变为块级元素,与div无异;此时的span能够设置高度和宽度;并且霸占一行,别人不能与之并排;假如不设置宽度,那么将撑满父亲。

标准流里面的限制特别多,标签的性质也特备恶心。标准流做不出网页:由于能并排的不能改宽高。所以,要脱离标准流。

css中有三种手段可以使一个元素脱离标准文档流,分别为浮动和绝对定位,固定定位。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » CSS的标准文档流

发表回复