又叫普通流、文档流、普通文档流
水平方向
常规流盒子水平方向上的尺寸,必须等于包含块的宽度
如果不行,则强行将margin-right设置为auto
垂直方向
margin为auto:0px
height为auto:适应内容的高度
盒子在包含块的垂直方向上依次摆放
依次摆放:按照HTML元素的书写顺序从上到下摆放
垂直方向上,若两个外边距相邻,则进行合并(折叠)
垂直方向:水平方向上的外边距不会合并
外边距相邻:两个外边距之间没有border、padding和content
外边距合并(规则):
1.相同值,取一个
2.都是正值取最大
3.都是负值取最小
4.一正一负则相加
禁止外边距合并可以加overflow:hidden;
浮动的初衷是为了实现文字环绕
子级浮动,父级元素高度塌陷
? 缺点:需要在HTML写一个空标签
? 解决方式,给父元素添加伪元素
清除浮动
1.clear属性名 left、right、both(全部)(对最后一个子元素使用可防止父元素塌陷)
2.overflow:hidden;(功能可清除浮动 实际是溢出内容隐藏 也可使外边距合并)
常规流盒子和浮动盒子混合摆放
为什么高度塌陷 脱离文档(页面)流了谁浮动谁脱离
浮动盒子在摆放时,要避开常规流盒子
常规流盒子在摆放时会无视浮动盒子
常规流盒子的自动高度计算时,无视浮动盒子—(高度塌陷)
当浮动元素被设置为绝对定位
属于绝对定位,float属性被强制设置为none
影响
绝对定位元素不会对其他任何元素造成任何影响
位置
可以通过top、bottom、right、left进行移动
绝对定位元素的包含块
固定位置使用场景
position-fixed
pc端:页面头部区域
移动端:footer底部
包含块为视口 偏移量的设置(移动)
起始位置是视口的左上角
①参照物是屏幕可视区
②元素变成块元素
③完全脱离文档流,不占位置
绝对位置
绝对位置包含块 :包含我,离我最近的元素的position
的属性值不是默认值(static)若都是默认值则以视口为包含块
适用场景 两个及以上的标签重叠在一起的时候
详解JSP中使用过滤器进行内容编码的解决办法 问题 当通过JSP页面,向数据库中插...
博主最近在做一个个人的博客网站,准备用 thymeleaf 实现一个动态加载一二级文章...
一、GIF图 二、前台代码 // 调用方法 hotlineLine(); // 定时刷新 setInterval(f...
前言 静态文件(如 HTML、CSS、图像和 JavaScript)等是Web程序的重要组成部分。...
本文转载自微信公众号「三太子敖丙」,作者三太子敖丙。转载本文请联系三太子敖...
通过ImageMagickObject的identify获取图片的信息,在命令行下好用,但是放到程序...
端点路由(Endpoint Routing)最早出现在ASP.NET Core2.2,在ASP.NET Core3.0提升...
MySQL的binlog相信大家都有所耳闻,但是可能没有真正日常使用过。 因此,本文结...
为什么我们需要它 不得不说,在知道这个命令的时,以及之后的使用中,我都超级热...
目录中出现 jsconfig.json 文件表明该目录是 JavaScript 项目的根目录。 Json 文...