一、什么网页的布局方式？

网页的布局方式其实就是指浏览器是如何对网页的元素进行排版的

二、标准流排版方式（又称为文档流、普通流）

1.含义

其实浏览器默认的排版方式就是标准流排版方式

2.在CSS中将元素分为三类：块级元素（独占一行，可以是设置宽高）、行内元素（不独占一行不能设置宽高），行内块级元素（既不独占一行又可以设置宽高）

3.在标准流中有两种排版方式，一种是垂直排版，一种是水平排版

垂直排版：元素是块级元素，那么就会垂直排版；

水平排版：元素是行内元素或者行内块级元素，那么就会水平排版。

举例：

  1.  
  2. <!DOCTYPE html>
  3.  
  4. <html lang="en">
  5.  
  6. <head>
  7.  
  8.     <meta charset="UTF-8">
  9.  
  10.     <title>D121_LayoutOfWeb</title>
  11.  
  12.     <style>
  13.  
  14.         div,p,h1{r
  15.  
  16.             boder:1px solid red;
  17.  
  18.         }
  19.  
  20.         span,b,strong{
  21.  
  22.             border:2px dotted purple;
  23.  
  24.         }
  25.  
  26. </style>
  27.  
  28. </head>
  29.  
  30. <body>
  31.  
  32. <div>我是div</div>
  33.  
  34. <h1>我是标题</h1>
  35.  
  36. <p>我是段落</p>
  37.  
  38. <span>我是span</span>
  39.  
  40. <b>我是加粗</b>
  41.  
  42. <strong>我是加粗</strong>
  43.  
  44. </body>
  45.  
  46. </html>

三、浮动排版

我们对于标准流来进行布局的时候，首先要分清元素的属性，来进行布局，设置好之间的距离参数，但是每个人的屏幕分辨率都是不一样的，可能在你的屏幕上是好的，换做其他人那里位置就不是我们所预期的了，因此我们引出浮动排版，以此来应对活动多变屏幕。

举例：

  1. <style>
  2.  
  3.         .box1{
  4.  
  5.             width: 200px;
  6.  
  7.             height:200px;
  8.  
  9.             background-color: red;
  10.  
  11.             display:inline-block;
  12.  
  13. ​
  14.  
  15.         }
  16.  
  17.         .box2{
  18.  
  19.             width: 200px;
  20.  
  21.             height:200px;
  22.  
  23.             background-color: blue;
  24.  
  25.             display: inline-block;
  26.  
  27.             float:right;
  28.  
  29.         }
  30.  
  31. </style>
  32.  
  33. </head>
  34.  
  35. <body>
  36.  
  37. <div class="box1"></div>
  38.  
  39. <div class="box2"></div>
  40.  
  41. </body>

我们可以看出来源码中加入了float:right;

这段代码，在标准流的基础上，将我们第二个盒子进行浮动调整，也就是这个蓝色的盒子，无论页面的分辨率是怎么变得，它水平居右的属性不变，如果我们用外边距来实现居右，分辨率一变，那么相对位置也就变了。

 
   

2.浮动流是一种“半脱离标准流”的排版方式

3.浮动流只有一种排版方式，就是水平排版，他只能设置某个元素左对齐或者右对齐。

注意点：

（1）浮动流中没有居中对齐。

（2）在浮动流中是不能使用：margin:0
auto；来进行设置居中的。

特点：

在浮动流中，不会区分行内元素和块级元素的并且也是对任意元素进行宽高设置，因此上面的示例代码，就可以把display属性去掉了。即

  1.       .box1{
  2.  
  3.             width: 200px;
  4.  
  5.             height:200px;
  6.  
  7.             background-color: red;
  8.  
  9.             /*display:inline-block;*/
  10.  
  11.             float:left;
  12.  
  13. ​
  14.  
  15.         }
  16.  
  17.         .box2{
  18.  
  19.             width: 200px;
  20.  
  21.             height:200px;
  22.  
  23.             background-color: blue;
  24.  
  25.             /*display: inline-block;*/
  26.  
  27.             float:right;
  28.  
  29.         }

四、源码：

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大数据学习视频礼包

HTML连载44-标准排版、浮动排版的更多相关文章

  1. 了解HTML CSS格式化排版 文字排版

    这里简单的写一些涉及到字体排版中常用到的属性, 大家可以学习查看, 也可以mark下以后看. font-family: "Micrsoft Yahei"; 设置字体 font-si ...

  2. compass typography 排版 常用排版方法[Sass和compass学习笔记]

    Bullets 用来定义ul li 相关的样式 no-bullet  关闭 li的默认样式 那个小圆点 no-bullets 作用域ul 调用no-bullet 函数 不过用了reset 后 默认没有 ...

  3. 公众号的Markdown排版利器:Md2All

    微信公众号:颜家大少如有问题或建议,请公众号留言 本文所用排版工具:Md2All,http://md.aclickall.com 公众号排版工具 公众号的排版编辑工具还真的不少,但功能大同小异,大部分 ...

  4. [ActionScript 3.0] 分页排版

    竖排版: 横排版: /*** 分页排版 ***/ var _column:int = 5;//列数 var _row:int = 3;//行数 var _vGap:Number = 20;//行间距 ...

  5. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  6. 使用vim-latex排版

    前几天在某个群上看到了一篇简历,内容不重要,一看排版很漂亮的说.一问才知道是用latex排版工具排版的.一想到我都大三下学期的,也快大四了,是不是要准备一份简历.于是就想使用latex这个排版工具来排 ...

  7. iOS性能优化-预排版

    参考地址:https://blog.ibireme.com/2015/11/12/smooth_user_interfaces_for_ios/ 前面一篇说了异步绘制文字,异步渲染图片,这篇主要是预排 ...

  8. LaTeX技巧009：中国象棋的LaTeX排版

    Latex可以排版容易排版中国象棋, 围棋, 国际象棋棋谱和乐谱, 详情请见. http://bbs.chinatex.org/forum.php?mod=viewthread&tid=498 ...

  9. CSS系列：CSS中盒子的浮动与定位

    1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...

随机推荐

  1. Python中列表乘法需注意的问题/

    前几天看到一个关于Python的面试题 lst = [1, 2, [3]] lst1 = lst * 2  #  [1, 2, [3], 1, 2, [3]] lst1[2].append(4)  # ...

  2. Python Django 支付宝 扫码支付

    安装python-alipay-sdk pip install python-alipay-sdk --upgradepip install crypto 如果是python 2.7安装0.6.4这个 ...

  3. thinkphp5.0学习笔记

    2019-11-11学习笔记 安装TP5.0 a)源代码包下载 在thinkphp官网下载(www.thinkphp.cn)下载 完整版本的TP5.0 b) composer 安装 切换到网站的根目录 ...

  4. koa2 从入门到进阶之路 （六）

    之前的文章我们介绍了一下 koa post提交数据及 koa-bodyparser中间件,本篇文章我们来看一下 koa-static静态资源中间件. 我们在之前的目录想引入外部的 js,css,img ...

  5. Python 调用 ES、Solr、Phoenix

    #!/usr/bin/env python # -*- coding:utf-8 -*- # ************************************* # @Time : 2019/ ...

  6. PHP+Ajax实现文章心情投票功能实例

    一个PHP+Ajax实现文章心情投票功能实例,可以学习了解实现投票的基本流程:通过ajax获取心情图标及柱状图相关数据,当用户点击其中的一个心情图标时,向Ajax.php发送请求,PHP验证用户coo ...

  7. vue jsx与render的区别及基本使用

    vue template语法简单明了,数据操作与视图分离,开发体验友好.但是在某些特定场合中,会限制一些功能的扩展,如动态使用过滤器.解析字符串类型的模板文件等.以上功能的实现可以借助vue的rend ...

  8. JQuery Ztree 树插件配置与应用小结

    JQuery Ztree 树插件配置与应用小结 by:授客 QQ:1033553122 测试环境 Win7 jquery-3.2.1.min.js 下载地址: https://gitee.com/is ...

  9. [browser window窗口大小 算是screen补充吧]主要因为移动IE游览器 写了个兼容

    先上图吧 来上代码 console.log(window.outerWidth + '--' + window.outerHeight);//只读的整数,声明了整个窗口的XY //IE 不支持此属性, ...

  10. 搜索某个目录下所有jar包中的mapper目录下的xml文件

    rm -rf /mapper/* find /data/app/app-*/lib ! -path "*xnpush*" ! -path "*portal*" ...