一, 什么网页的布局方式?
网页的布局方式其实就是指浏览器是如何对网页的元素进行排版的
二, 标准流排版方式 (又称为文档流, 普通流)
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/
来源: http://www.bubuko.com/infodetail-3256119.html