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打开结果会是这样

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

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

2)绝对定位：

添加三个div分别加上class

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

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

3)固定定位：

把one改成固定定位

刷新浏览器

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

html 浮动脱离文档流,CSS标准文档流与脱离文档流相关推荐

web开发课程，CSS标准文档流与脱离文档流，已整理成文档
前言年前准备换工作,总结了一波面试最频繁的面试问题跟大家交流.此文章是关于浏览器的常见问题,大概面试10家遇到6家提问类似问题(主要是大厂和中厂).目前入职滴滴出行成都团队. 前端核心 1.JSON ...
CSS标准文档流，在线面试指南
前言过完年了,准备实习的你是已经在实习了,还是已经辞职回家过年,准备年后重新找工作呢,又或者是准备2021年春招? 那么还没没踏出校门或者是刚出校门没多久的同学们该如何准备前端校招的面试呢? 面试知 ...
web前端开发自学课程，CSS标准文档流，超详细
前言又逢金三银四,拿到大厂的offer一直是程序员朋友的一个目标,我是如何拿到大厂offer的呢,今天给大家分享我拿到大厂offer的利器,前端核心知识面试宝典,内容囊括Html.CSS.Javas ...
前端开发规范文档(html,css,js)
首先吐槽一句,本来想上传word文档的,可是发现博客不能上传word文档,这就很尴尬了. 首先声明该规范不是本人写的,网上搜前端规范发现这个很详细就先复制下来做笔记,当然不可能啥都按规范来,每个公司的 ...
Python使用标准库zipfile+re提取docx文档中超链接文本和链接地址
推荐教材: <Python程序设计实用教程>,ISBN:978-7-5635-6065-3,董付国,北京邮电大学出版社教材封面: 全国各地新华书店有售京东购买链接: 配套资源:教学大纲 ...
html css在线文档,html+css文档.doc
htmlcss文档 Html+Css规范文档一.基本概要总体要求网页制作最基本要求:页面效果,既与psd设计稿效果达到统一. 注:如果在psd设计稿效果无法实现,或者效果很难实现的情况下,可以修 ...
需求文档：没有标准，只有沟通
这次写这个其实也算是有感而发,起因是一个产品朋友小李向我吐槽,他在一个创业团队,公司正在从探索期向成长期度过.原来的测试工作都是小李和研发相互协同的,也就是他们各自客串下测试.后面公司慢慢向成长期过度 ...
java-使用 flying-saucer 通过 xhtml 生成 pdf 文档支持 css 和图片
java-使用 flying-saucer 通过 xhtml 生成 pdf 文档支持 css 和图片重要说明: 1.使用 xhtml 生成 pdf ,对于 xhtml 的语法要求非常严格: 2.中 ...
软件需求文档格式的标准写法
软件需求文档格式的标准写法 1．引言 1．1 编写目的 • 阐明开发本软件的目的: 1．2 项目背景 • 标识待开发软件产品的名称.代码: • 列出本项目的任务提出者.项目负责人.系统分析 ...

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

html 浮动脱离文档流,CSS标准文档流与脱离文档流相关推荐

最新文章

热门文章