HTML连载44-标准排版、浮动排版
2019-10-25 06:32:15来源:博客园 阅读 ()
一、什么网页的布局方式?
网页的布局方式其实就是指浏览器是如何对网页的元素进行排版的
二、标准流排版方式(又称为文档流、普通流)
1.含义
其实浏览器默认的排版方式就是标准流排版方式
2.在CSS中将元素分为三类:块级元素(独占一行,可以是设置宽高)、行内元素(不独占一行不能设置宽高),行内块级元素(既不独占一行又可以设置宽高)
3.在标准流中有两种排版方式,一种是垂直排版,一种是水平排版
垂直排版:元素是块级元素,那么就会垂直排版;
水平排版:元素是行内元素或者行内块级元素,那么就会水平排版。
举例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D121_LayoutOfWeb</title> <style> div,p,h1{r boder:1px solid red; } span,b,strong{ border:2px dotted purple; } </style> </head> <body> <div>我是div</div> <h1>我是标题</h1> <p>我是段落</p> <span>我是span</span> <b>我是加粗</b> <strong>我是加粗</strong> </body> </html>
三、浮动排版
我们对于标准流来进行布局的时候,首先要分清元素的属性,来进行布局,设置好之间的距离参数,但是每个人的屏幕分辨率都是不一样的,可能在你的屏幕上是好的,换做其他人那里位置就不是我们所预期的了,因此我们引出浮动排版,以此来应对活动多变屏幕。
举例:
<style> .box1{ width: 200px; height:200px; background-color: red; display:inline-block; ? } .box2{ width: 200px; height:200px; background-color: blue; display: inline-block; float:right; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body>
我们可以看出来源码中加入了float:right;
这段代码,在标准流的基础上,将我们第二个盒子进行浮动调整,也就是这个蓝色的盒子,无论页面的分辨率是怎么变得,它水平居右的属性不变,如果我们用外边距来实现居右,分辨率一变,那么相对位置也就变了。
2.浮动流是一种“半脱离标准流”的排版方式
3.浮动流只有一种排版方式,就是水平排版,他只能设置某个元素左对齐或者右对齐。
注意点:
(1)浮动流中没有居中对齐。
(2)在浮动流中是不能使用:margin:0 auto;来进行设置居中的。
特点:
在浮动流中,不会区分行内元素和块级元素的并且也是对任意元素进行宽高设置,因此上面的示例代码,就可以把display属性去掉了。即
.box1{
width: 200px;
height:200px;
background-color: red;
/*display:inline-block;*/
float:left;
?
}
.box2{
width: 200px;
height:200px;
background-color: blue;
/*display: inline-block;*/
float:right;
}
四、源码:
D121_LayoutOfWeb.html
D122_LayoutOfFloat.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D121_LayoutOfWeb.html
https://github.com/ruigege66/HTML_learning/blob/master/D122_LayoutOfFloat.html
2.CSDN:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)
3.博客园:https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包
原文链接:https://www.cnblogs.com/ruigege0000/p/11735842.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- Html/css 列表项 区分列表首尾 2020-06-11
- HTML骨架 2020-06-10
- HTML基础教程_1 2020-06-09
- HTML基础02 2020-06-09
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash