当前位置： 首页 > Web前端 > HTML

html-浮动的三种方式

时间：2023-04-02 20:15:06 HTML

1.最近用到的几种浮动方式，这里总结一下1.文档流和文本流的概念：①．文档流（normalflow）：在html页面中，是相对于盒子模型②。文字流（textflow）：在html页面中，是相对于文字的2.浮动的理解：类似于ps中图层的概念或者我们在word文档中设置图片布局文字上方有浮动3.漂浮在浮动模式①。理解：脱离文档流，但不脱离文本流（半关）；②.代码测试123

456
789
.div1{width:200px;高度：200px；背景色：红色；}.div2{浮动：左；宽度：200px；高度：100px；背景色：蓝色；}.div3{宽度：200px；高度：200px；背景颜色：绿色；}③。效果图④。由于div2是浮动元素，word不占据div3的最左边，与456重叠，不忽略div2的浮动元素占据的位置。).不明白的可以继续看下面的绝对例子进行对比。⑤.还有人理解浮动元素会往左走，直到碰到其他浮动元素/边框（float的特性）。比如div1设置为left，div2也设置为left，那么它们会在第一层视觉上表现出“并排”，类似于“挤压”的感觉；如果我们只将div2设置为left，那么它在视觉上会上下排列，div2只是向左浮动，“触及”了左边框。4、浮动绝对定位方式①。理解：absolute会设置top,bottom,left等相对值来确定位置②。代码测试：123
456789html,body{//防止body的内置边距为8以免干扰结果，因此我们将边距设置为0margin:0;}.div1{width:200px;高度：200px；背景色：红色；}.div2{浮动：左；宽度：200px；高度：100px；背景颜色：蓝色；}.div3{位置：绝对；顶部：200px；左：0；宽度：200px；高度：200px；;}③。效果图：④。效果图说明：这里我们div3的父元素是body元素，所以相对于body是绝对定位的，只是和top的区别。红色高度与之前的浮动不同。文本内容789不关心div2的框，789这三个字直接和456重合，也就是说绝对元素不仅脱离了文档流，也脱离了文本流这里我们做到了小试一下，看看会不会和float的元素发生碰撞？事实证明不会。Absolute的拳头比起flaot的元素还是要强一点。有点类似于第三层的jio。如果它覆盖你，它就会覆盖你。二子，o(￣︶￣)o5。浮动固定模式①。理解：类似于absolute，也是通过top等属性来定位，但是是固定的。当有滚动条时，固定为Nevermove②。代码测试（绝对）：

testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest>

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试ST测试测试测试测试测试

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

html,body{margin:0;}.test{overflow:auto;}.bottom{//这里偷懒，把两段代码写成一段代码，不过这里一个是绝对的，另一个是固定位置：绝对/固定；底部：0；左：0；宽度：100%；高度：200px；背景颜色：深天蓝；}③。滚动时，fixed会一直固定在底部，而absolute不会一直在滚动时在底部聊天。这是小媛的第一篇博客。小元其实不知道自己要写多久。每周两篇，一边努力养生一边写博客的小袁最帅了，哈哈哈！小元不敢保证他的东西有多深，但他可以肯定，这些密码都是一点一滴练出来的。随着他的进步，相信小元会在博客里为大家写出更多更好的博客。写这篇博??客的时候，因为对markdown的语法不是很熟悉，不知道为什么这里的缩进莫名其妙的两个空格，也不知道为什么字体标签的颜色设置好像没有效果（不知道能不能修改），有这种情况的同学请留言。非常感谢。我是晓媛。下周见！

html-浮动的三种方式相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。