文档流，浮动，定位的区别和处理
1.文档流
- 所有的元素默认情况下都是在文档流中存在的
- 文档流是网页的最底层
- 元素在文档流中的特点：
- 块元素
1.默认宽度是父元素的全部
2.默认高度被内容（子元素）撑开
3.在页面中自上而下垂直排列
- 内联元素
1.默认高度和宽度都被内容撑开
2.在页面中自左向右水平排列，如果一行不足以容下所有的元素
则换到下一行继续从左向右
2.浮动
- 使用float来设置元素的浮动
- 可选值：
none 默认值，元素不浮动，就在文档流中
left 元素向页面的左侧浮动
right 元素向页面的右侧浮动
- 浮动特点：
1.元素设置浮动以后，会完全脱离文档流，并向页面的左上或右上浮动。
直到遇到父元素的边框或其他的父元素时则停止浮动。
2.如果浮动元素上边是一个没有浮动的块元素，元素不会超过该块元素。
3.浮动元素的浮动位置不能超过他上边浮动的兄弟元素，最多一边齐
4.浮动元素不会覆盖文字，文字会围绕在浮动元素的周围，所以可以通过浮动来实现文字环绕图片的效果。
- 浮动以后元素会完全脱离文档流，脱离文档流以后元素会具有如下特点：
1.块元素不独占一行
2.块元素的宽度和高度都被内容撑开
3.元素不在文档流占用位置
4.内联元素会变成块元素
- 高度塌陷
- 在文档流中元素的高度默认被子元素撑开，当子元素浮动时，子元素会脱离文档流，
此时将不能撑起父元素的高度，会导致父元素的高度塌陷。父元素高度塌陷会导致其他元素的位置上移，导致页面的布局混乱。
- 可以通过开启元素的BFC来处理高度塌陷的问题。
- BFC叫做Block Formatting Context
- 它是一个隐含属性，默认情况是关闭，当开启以后元素会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素覆盖
3.父元素可以包含浮动的子元素 ******
- 开启BFC的方式很多：
1.设置元素浮动
2.设置元素绝对定位
3.设置元素为inline-block
4.将元素的overflow设置为一个非默认值
- 一般我们采取副作用比较小的方式
overflow:hidden;
3.定位
- 通过定位可以将元素摆放到页面的任意位置
- 使用position来设置元素的定位
- 可选值：
- static 默认值 元素不开启定位
- relative 开启元素的相对定位
- absolute 开启元素的绝对定位
- fixed 开启元素的固定定位
- 相对定位
1.相对于元素自身在文档流中的位置进行定位
2.相对定位的元素不会脱离文档流，定位元素的性质不会改变，块还是块，内联还是内联
3.如果不设置偏移量，元素不会发生任何的变化
4.会提升元素的层级
- 绝对定位
1.相对于离它最近的开启了定位的祖先元素进行定位，如果祖先元素都没有开启定位则相对于浏览器窗口进行定位。
2.绝对定位会使元素完全脱离文档流，会改变元素的性质，内联变成块元素，块元素的宽度被内容撑开
3.绝对定位的元素如果不设置偏移量，元素的位置不会发生变化
4.会提升元素的层级
- 固定定位
- 固定定位也是一种绝对定位，它的大部分特点都和绝对定位是相同的。
- 不同的是：
- 固定定位永远相对于浏览器窗口进行定位
- 固定定位会固定在浏览器的指定的位置，不会随页面一起滚动
- 偏移量
- 当元素开启了定位以后，可以通过四个偏移量来设置元素的位置
top：相对于定位位置的顶部的偏移量
bottom：相对于定位位置的底部的偏移量
left：相对于定位位置的左侧的偏移量
right：相对于定位位置的右侧的偏移量
- 一般只需要使用两个值即可给元素进行定位
top left
top right
bottom left
bottom right
- 偏移量也可以指定一个负值，如果是负值则元素会向相反的方向移动
- 层级
- 当元素开启定位以后，可以通过z-index来设置层级，
它需要一个正整数作为参数，值越大层级越高，层级越高越优先显示
如果层级一样，则后边的会盖住前边的，父元素永远都不会盖住子元素。
- 文档流 < 浮动 < 定位
- 元素的透明
使用opacity来设置元素的透明度
- 需要一个0-1之间的值
- 0 表示完全透明
- 1 表示完全不透明
IE8及以下的浏览器不支持该样式，需要使用如下方式来设置
filter:alpha(opacity=透明度);
- 需要一个0-100之间的值
- 0 表示完全透明
- 100 表示完全不透明
文档流，浮动，定位的区别和处理相关推荐
- 前端之文档流浮动以及定位
一,文档流 (文档流没有实际的意义,只是抽象的一个定义而已),可以理解为,一个连续的具有逻辑上下的页面整体 概念:将窗体自上而下的分成一行一行,块级元素自上而下,行内元素在每行中从左自右的顺序依次排放 ...
- 05-CSS 权重 盒模型 标准文档流 浮动
一.权重问题 1.1. !important 标记 可以通过 k : v !important 来给一个属性提高权重,这个属性的权重是无穷大的. <style>.spac2{color: ...
- 一天搞定CSS： 浮动（float）及文档流--10
浮动(float),一个我们即爱又恨的属性.爱,因为通过浮动,我们能很方便地布局: 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器). ...
- css三种定位都脱离文档流了吗,CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别...
1.代码 (1)示例代码1 CSS布局之脱离文档流详解--浮动.绝对定位脱离文档流的区别 .left { width: 300px; height: 500px; background: red; f ...
- CSS布局之脱离文档流详解——浮动、绝对定位脱离文档流的区别
准确的说,float浮动属于半脱离文档流,1.float浮动跟position:absolute一样拥有脱离文档流的功能,但是float虽然脱离了文档流但是仍然会占据位置,其他的文本内容会按照顺序继续 ...
- 文档流及其特性 块级元素与行内元素的区别 浮动的清除方法（解决浮动塌陷）
标准文档流 web页面的制作,是一个"流",必须从上到下,像是"织毛衣". 标准文档流的特性 1.空白折叠现象 无论有多少个空格,换行,tab,都会折叠成一个空 ...
- BFC机制与浮动定位脱离文档流
BFC机制与浮动定位脱离文档流 BFC块格式化上下文 --w3c规定的一种独立渲染区域 渲染流程基本上四个步骤: 1.计算CSS样式 2.构建Render Tree 3.Layout – 定位.大小, ...
- html 浮动脱离文档流,CSS标准文档流与脱离文档流
标准文档流 文档流:指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式.并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素. 标准流的微观现象: 空白折叠现象: 在 ...
- css盒子模型、文档流、相对与绝对定位、浮动与清除模型
一.CSS中的盒子模型 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. h ...
最新文章
- OC语言--SEL类型小记
- Y1ng‘s BabyCode
- 1 加到 100 的 时间复杂度 C#.
- ogg 查看某条更新_明道云Web 6.1更新：日历视图上线
- tensorrt轻松部署高性能dnn推理_基于TensorRT车辆实时推理优化
- vue 文件转换二进制_vue项目将file转换成二进制流
- 自定义Excel导出简易组件
- 蓝桥杯 ADV-90 算法提高 输出日历
- 【Linux】Ubuntu输入法不能开机自启的解决方法
- Linux命令 uname:查看系统与内核相关信息
- labjs 分析转载
- oracle dmp和sql文件区别,数据库dbf与dmp文件
- 【最佳实践】瀚高数据库安全版v4.5.8非root用户运行的安装配置
- Team Queue -uva
- 从0开发游戏引擎之引擎Win32平台的Platform类实现
- K8s NetworkPolicy与网络插件flannel、calico详细版
- Jmeter对webSocket测试
- Python操作word基础
- 大连华信和东软_谈谈大连高新园区
- 【转载】一个硕士程序员的求婚日记——做开发的不是木头人！