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

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

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

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

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. 编译原理之LL(1)文法的判断，递归下降分析程序

    1. 文法 G(S): (1)S -> AB (2)A ->Da|ε (3)B -> cC (4)C -> aADC |ε (5)D -> b|ε 验证文法 G(S)是不 ...

  2. MySQL优化/面试，看这一篇就够了

    原文链接:http://www.zhenganwen.top/articles/2018/12/25/1565048860202.html 作者:Anwen~链接:https://www.nowcod ...

  3. 004.Windows Server 故障转移群集 (WSFC)简介

    一 WSFC 简介 1.1 WSFC 概述 “Windows Server 故障转移群集”(WSFC) 群集是一组独立的服务器,它们共同协作以提高应用程序和服务的可用性.SQL Server 2012 ...

  4. python之os模块（os.path）

    我们在做自动化测试的时候,可能会遇到一些需要处理文件一些需求,那么我们可以通过直接写文件的目录进行操作,当然作为一名自动化测试工程师,怎么可能用这种方法?python中自带的有OS,我们可以通过os模 ...

  5. Matlab线性规划

    线性规划   线性规划的标准形式 \[\underset{x}{min}{\ c^Tx}\ s.t.\ Ax \leqslant b\]   例如,线性规划为: \[ \underset{x}{min ...

  6. 关于定义序列化器时，read_only和write_only有什么作用

    关于序列化和反序列化 ​ 在谈论前,先说一下序列化和反序列化,这两个概念最初是在学习json的时候提出来的,回头来看,其实可以用最初的理解就可以了 序列化就是将对象转化方便传输和存储字节序列,例如js ...

  7. ReactNative: 使用滚动视图ScrollView组件

    一.简介 当页面内容的非常多时,即使换行后仍然无法充分显示,此时最好的解决办法就是让页面可以滚动显示.在React-Native中,提供了可供滚动的视图组件ScrollView组件.它的属性和方法以及 ...

  8. Python 从入门到进阶之路（二）

    之前的文章我们对 Python 语法有了一个简单的认识,接下来我们对 Python 中的 if while for 做一下介绍. 上图为 if 判断语句的流程,无论任何语言,都会涉及到判断问题,if ...

  9. [CrackMe]160个CrackMe之015

    吾爱破解专题汇总:[反汇编练习]160个CrackME索引目录1~160建议收藏备用 一.破解 该破解比较简单,其是一个静态密码  2G83G35Hs2 ,输入进去即可破解. 1)栈定位法找到用户代码 ...

  10. Selenium(五)：CSS选择器(二)

    1. CSS选择器 1.1 选择语法联合使用 CSS selector的另一个强大之处在于:选择语法可以联合使用. html代码: <div id='bottom'> <div cl ...