一、什么网页的布局方式？
网页的布局方式其实就是指浏览器是如何对网页的元素进行排版的
二、标准流排版方式（又称为文档流、普通流）
1.含义
其实浏览器默认的排版方式就是标准流排版方式
2.在css中将元素分为三类：块级元素（独占一行，可以是设置宽高）、行内元素（不独占一行不能设置宽高），行内块级元素（既不独占一行又可以设置宽高）
3.在标准流中有两种排版方式，一种是垂直排版，一种是水平排版
垂直排版：元素是块级元素，那么就会垂直排版；
水平排版：元素是行内元素或者行内块级元素，那么就会水平排版。
举例：
<!doctype html><html证婚人致辞 lang="en"><head> <meta chart="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&北京首都医科大学gt;<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大数据学习视频礼包
本文发布于:2023-04-07 06:04:32，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/96f80b4d941415872369839cfaacdc4e.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：HTML连载44.doc
本文 PDF 下载地址：HTML连载44.pdf
| 留言与评论（共有 0 条评论） |
