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

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

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

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. jsp + js + 前端弹出框

    在项目中,前端页面我们时常需要各种各样的弹出框: 1.alert对话框:显示含有给定消息的"JavaScript Alert"对话框 代码: var a = "Hello ...

  2. Android TeaPickerView数据级联选择器

    数据级联选择器.三级联动.二级联动.层级联动.多数据筛选.必藏 (Data Cascade Selector, Hierarchical Structure, Multiple Data Screen ...

  3. 从零开始搭建solo个人博客系统

    目录 1.博客系统的搭建流程 2.服务器选购 2.1阿里云学生主机 2.2普通云主机 3.域名购买与备案(可选) 3.1域名购买 3.2域名服务器备案 3.3域名服务器解析 4.solo安装 4.1 ...

  4. Windows7安装PowerShell5.1方法（Flutter新版本需要）

    Windows7安装PowerShell5.1方法(Flutter新版本需要)   重新安装Windows7系统,在使用Flutter的时候,发现需要PowerShell5.0以上版本,需要升级Win ...

  5. 列表list常用的方法

    列表 name = ['Lisa', 'Mike', 'Jone', 'Lucy'] name.sort() # 排序,根据对应的ASCII码值,可以排各种类型的字符 name.append('Ms ...

  6. 并发编程~~~协程~~~greenlet模块, gevent模块

    一 协程 1. 协程: 单线程下的并发,又称微线程,纤程.协程是一种用户态的轻量级线程,即协程是由用户程序自己控制调度的. 并发真正的核心: 切换并且保持状态. 开启协程并发的执行,自己的程序把控着C ...

  7. nova安装与配置

    一.实验目的: 1.理解nova服务在OpenStack中的作用 2.掌握在控制节点上安装配置nova的方法和步骤 3.掌握在计算节点上安装与配置nova的方法和步骤 二.实验步骤: 1.在contr ...

  8. 一些常用的 redis 的操作配置（对String、hash）

    import java.util.List; import java.util.Map; import org.apache.logging.log4j.LogManager; import org. ...

  9. FreeHttp1.2升级说明

    一.升级方法 下载新版本插件 https://files.cnblogs.com/files/lulianqi/FreeHttp1.2.zip  或 http://lulianqi.com/file/ ...

  10. ES6新语法(二)

    1.解构         在ES6中,可以使用解构从数组和对象提取值并赋值给独特的变量,即将数组或对象中的值,拆成一个一个变量.         解构:自动解析数组或对象中的值,并赋值给指定的变量.. ...