HTML连载44-标准排版、浮动排版
一、什么网页的布局方式？
网页的布局方式其实就是指浏览器是如何对网页的元素进行排版的
二、标准流排版方式（又称为文档流、普通流）
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-标准排版、浮动排版的更多相关文章
- 了解HTML CSS格式化排版 文字排版
这里简单的写一些涉及到字体排版中常用到的属性, 大家可以学习查看, 也可以mark下以后看. font-family: "Micrsoft Yahei"; 设置字体 font-si ...
- compass typography 排版 常用排版方法[Sass和compass学习笔记]
Bullets 用来定义ul li 相关的样式 no-bullet 关闭 li的默认样式 那个小圆点 no-bullets 作用域ul 调用no-bullet 函数 不过用了reset 后 默认没有 ...
- 公众号的Markdown排版利器:Md2All
微信公众号:颜家大少如有问题或建议,请公众号留言 本文所用排版工具:Md2All,http://md.aclickall.com 公众号排版工具 公众号的排版编辑工具还真的不少,但功能大同小异,大部分 ...
- [ActionScript 3.0] 分页排版
竖排版: 横排版: /*** 分页排版 ***/ var _column:int = 5;//列数 var _row:int = 3;//行数 var _vGap:Number = 20;//行间距 ...
- 简单实用的CSS网页布局中文排版技巧
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
- 使用vim-latex排版
前几天在某个群上看到了一篇简历,内容不重要,一看排版很漂亮的说.一问才知道是用latex排版工具排版的.一想到我都大三下学期的,也快大四了,是不是要准备一份简历.于是就想使用latex这个排版工具来排 ...
- iOS性能优化-预排版
参考地址:https://blog.ibireme.com/2015/11/12/smooth_user_interfaces_for_ios/ 前面一篇说了异步绘制文字,异步渲染图片,这篇主要是预排 ...
- LaTeX技巧009：中国象棋的LaTeX排版
Latex可以排版容易排版中国象棋, 围棋, 国际象棋棋谱和乐谱, 详情请见. http://bbs.chinatex.org/forum.php?mod=viewthread&tid=498 ...
- CSS系列：CSS中盒子的浮动与定位
1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接:而在竖直方向与相邻元素依次排列,不能并排. CSS中float属性,默认为none.将float属性的值设置为l ...
随机推荐
- Android 使用 aapt 命令查看 apk 包名
一.aapt 是什么 aapt 即Android Asset Packaging Tool,在SDK的build-tools目录下.该工具可以查看,创建, 更新ZIP格式的文档附件(zip, jar, ...
- MySQL数据库～～～～pymysql 连接 MySQL的客户端
import pymysql conn = pymysql.connect( host = '127.0.0.1', # 主机 port = 3306, # 端口号 user = 'root', # ...
- Nginx：反向代理
与众不同的生活方式很累人呢,因为找不到借口 在上一章节中,我们以及了解到正向.反向代理.负载均衡和动静分离的基本概念,安装教程,而在本节中将会了解到在 本文要点: 1.理清概念 2.Linux ...
- 11-《Node.js开发指南》-模块和包
什么是模块? 一个node.js文件就是一个模块,这个文件可能是js代码,json或者编译过的C/C++扩展 创建及加载模块 //a.js var name; exports.setName = fu ...
- VS 2017 中取消自动补全花括号
输入 "{", VS 会很智能的给你补全,得到 “{}”, 如果不想享受这个服务,可以按以下设置取消: Tools -> Options -> Text Editor ...
- Java连载54-两种单例模式、接口详解
一.单例模式分为两种: (1)饿汉式单例:在类加载阶段就创建了一个对象. (2)懒汉式单例:用对对象的时候才会创建对象.(连载53中例子就是懒汉式) 饿汉式举例: package com.bjpowe ...
- Linux 部署MySQL 一主一从一备
主服务器搭建 准备三台服务器,一主一从一备 在主服务器(master)下找到mysql配置文件. Window下为my.ini(一般在C:\ProgramData\MySQL\MySQL Server ...
- Linux之自动化部署
No.1 自动化部署git项目 一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一一 ...
- windows下的go get 显示进度
我的Go版本是:go1.12.7 1.在你的Go安装目录下找到 D:\Go\src\github.com\tools\godep\vendor\golang.org\x\tools\go\vcs\vs ...
- PHP中RBAC权限管理
1.RBAC概念和原理 RBAC:全称叫做Role-Based Access Control,中文翻译叫做基于角色的访问控制.其主要的作用是实现项目的权限控制. ...