博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
网页的布局方式
阅读量:6910 次
发布时间:2019-06-27

本文共 912 字,大约阅读时间需要 3 分钟。

浏览器中如何对网页中的元素进行排版 标准流:(文档流 普通流)默认的排版方式垂直排版(块级)和水平排版(行内,行内排版) 浮动流:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(“高度塌陷”现象)。顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。         浮动元素的脱标:脱离标准流,元素只要浮动了就脱离标准流,剩下的元素还在标准流里面(第一个元素浮动了第二个元素还未浮动会把占到第一个元素的位置,第二个元素因为浮动前占的是第一个元素的位置浮动后还是找第一行然而第一行被占了所以会跟在第一个元素后面,具体写一段代码运行一下看看),脱标了就相当于不在浮动流里面一样,前面的元素脱标了后面的没脱标,前面的就会覆盖后面的         浮动规则:相同方向上的先浮动的显示在前面,不同方向上的元素左浮动会找左浮动,右浮动会找右浮动         浮动元素浮动后的内容由浮动元素浮动之前在标准流的位置确定(浮动元素不会覆盖浮动元素)         浮动元素靠贴现象:按照顺序浮动贴靠,如果最后一个元素宽高超出了父元素的宽高;则该元素贴向倒数第三个元素贴,如果还超出就继续找前面的元素贴,直到找到父元素还不能完整显示,没办法就只能这样贴         浮动元素的自围现象:浮动元素会盖住没浮动的元素,但是不会覆盖没浮动元素的内容;         (自围现象一般用于图文混排!!!)         在标准流中内容的高度撑起了父元素的高度;在浮动流中则不能撑起
    
网页的布局方式
1
2
3
4

 

转载于:https://www.cnblogs.com/myErebos/p/8586442.html

你可能感兴趣的文章
Python面向对象之类的成员
查看>>
Win8上iis配置
查看>>
Confluence 6 配置 Office 转换器
查看>>
IT从业人员关注哪些问题
查看>>
Windows 2012 Hyper –V 3.0 New Functions
查看>>
maven部分插件配置demo
查看>>
Grin交易原理详解
查看>>
大数据体系【概念认知】系列-2:存储以及副本策略
查看>>
我的友情链接
查看>>
linux企业常用服务---haproxy+nginx搭建web高可用集群
查看>>
win7 断开 共享连接的操作方法
查看>>
CTSSD服务无法正常启动:Failure 4 in trying to open SV key PROCL-4/PROCL-5 clsctss_r_av2
查看>>
再议OPEN CURSOR与BULK COLLECT
查看>>
我的友情链接
查看>>
jquery attr与prop
查看>>
casatwy组件化方案
查看>>
Linux中ls对文件进行按大小排序和按时间排序
查看>>
Unix/Linux下安装NPM
查看>>
Apache与Tomcat区别联系
查看>>
洪水***源码
查看>>