html 浮动脱离文档流,CSS标准文档流与脱离文档流

标准文档流

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

标准流的微观现象:

空白折叠现象:

在 html 文件输入文本,多个空格会被合并成一个空格显示到浏览器页面中。这种现象称为空白折叠现象。

高矮不齐,底边对齐:

文字还有图片大小不一,都会让我们页面的元素出现高矮不齐的现象,但是在浏览器查看我们的页面总会发现底边对齐;

自动换行,一行写不完时,换行写:

如果在一行内写文字过多,超过界面,那么浏览器会自动换行去显示我们的文字。

标准文档流等级

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

块级元素:

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

能接受宽、高

如果不设置宽度,那么宽度将默认变为父亲的100%,即和父亲一样宽

行内元素:

与其他元素并排

不能设置宽、高。默认的宽度就是文字的宽度

在HTML中,标签分为:文本级和容器级;

文本级:p、span、a、b、i、u、em

容器级:div、h系列、li、dt、dd

CSS的分类和上面的很像,就p不一样:所有的文本级标签,都是行内元素,除了p,p是个文本级,但是是个块级元素。所有的容器级标签都是块级元素。

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

块级元素可以设置为行内元素;行内元素也可以设置为块级元素。

举个例子:

div {

display: inline;

background-color: pink;

width: 400px;

height: 400px;

}

display是显示模式,用来改变元素的行内、块级性质inline就是“行内”,一旦给一个标签设置display:inline;

那么这个标签立即变为行内元素。

此时div和span没有什么区别;

此时的div不能设置宽度和高度(即使设置了也并不显示出来);

此时div可以和别人并排;

同理

span {

display: block;

width: 300px;

height: 300px;

background-color: green;

}

“block”是“块”的意思;

span标签变为块级元素,与div无异;

span能够设置高度和宽度;

span必须霸占一行,别人不能与之并排;

如果不设置宽度,那么将撑满父亲。

脱离标准文档流

三种方法:

1)浮动

浮动的元素会脱离文档流;

新建一个文档在页面上添加两个div给div分别加上class。

Document

给div设置一个宽高及背景颜色 给one左浮动

* {

/*清除默认边距*/

margin: 0;

padding: 0;

}

div {

width: 200px;

height: 200px;

}

.one {

float: left;

background-color: orange;

}

.two {

background-color: yellow;

}

然后用Chrome打开 结果会是这样

a905aaa7d264

可以看出给one左浮动后two消失不见了,这时审查元素看一下

a905aaa7d264

会发现two跑到one下面去了,这是因为给one盒子左浮动了。浮动的元素不会占空间所以two占去了one的位置。

2)绝对定位:

添加三个div分别加上class

a905aaa7d264

给one设置绝对定位 并添加top:110px;left:150px;

a905aaa7d264

可以看到one是可以飘在他们上面的

a905aaa7d264

3)固定定位:

把one改成固定定位

a905aaa7d264

刷新浏览器

a905aaa7d264

发现他和absolute一样;唯一不同的就是他是固定在浏览器上的,fixed不会随着浏览器滚动条而滚动;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值