HTML网页布局方式总结 |有码有真相|

原创 2017年10月11日 00:34:03

HTML三种布局方式总结

1 普通流

又称为常规流,浏览器默认的排版方式。普通流是元素在多数情况下呈现在WEB页面上的方式。所有HTML都在块框(block boxes,块级元素)或者行内框(inline boxes,行内元素)中。当浏览器开始渲染HTML文档,它从窗口的顶端开始,经过整个文档内容的过程中,分配元素需要的空间。除非文档的尺寸被 CSS 特别的限定,否则浏览器垂直扩展文档来容纳全部的内容。每个新的块级元素渲染为新行。行内元素(行内元素/行内块级)则按照顺序被水平渲染直到当前行遇到了边界,然后换到下一行垂直渲染。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1, h4, p, span, strong, em, a {
            border: 2px solid red;
        }

        .setting {
            width: 100px;
        }
    </style>
</head>
<body>
<h1>块级元素</h1>
<h4>块级元素</h4>
<p>块级元素从上到下排列</p>
<p class="setting">块级元素从上到下排列,但是我的宽度被设置了</p>
<a href="#">行内元素1</a>
<span>行内元素2</span>
<strong>行内元素3</strong>
<em>行内元素从左到右</em>
</body>

这里写图片描述

2 定位流

这里写图片描述

1> absolute,绝对定位:绝对定位的元素位置是相对于距离它最近的那个已定位(定位流)的祖先(相对/绝对/固定)元素决定的。 如果元素没有已定位的祖先元素, 那么它的位置相对于初始包含块(body)进行定位。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .div1 {
            /*控制div2的父视图是否定位*/
            /*position: absolute;*/
            background-color: red;
            width: 200px;
            height: 200px;
            margin-left: 200px;
        }
        .div2 {
            position: absolute;
            background-color: yellow;
            width: 100px;
            height: 100px;
            left: 10px;
            top: 10px;
        }
    </style>
</head>
<body>
<div class="div1">
    <div class="div2"></div>
</div>
</body>

这里写图片描述
这里写图片描述

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

绝对定位的元素是脱离标准流的。不会占用标准流中的空间。

绝对定位的元素不区分块级元素/行内元素/行内块级元素。

如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点, 而不是以整个网页的宽度和高度作为参考点。定位的元素会随着页面滚动而滚动。

当一个盒子绝对定位之后不能使用margin: 0 auto;让盒子自身居中,可以使用left: 50%; margin-left:-元素宽度一半px设置居中;

2> fixed,固定定位:固定定位可以理解为是绝对定位的一种。固定定位的元素位置是相对于浏览器窗口决定的。这使得能够创建总是出现在窗口固定位置的元素。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .div1 {
            position: fixed;
            background: red;
            width: 100px;
            height: 100px;
            left: 20px;
            top: 20px;
        }
        .div2 {
            position: fixed;
            background: blue;
            width: 100px;
            height: 100px;
            left: 20;
            bottom: 20px;
        }
        .div3 {
            position: fixed;
            background: yellow;
            width: 100px;
            height: 100px;
            right: 20px;
            bottom: 20px;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2">
    <div class="div3"></div>
</div>
</body>

这里写图片描述

元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

固定定位的元素是脱离标准流的, 不会占用标准流中的空间。即可以理解为从标准流中删除。

固定定位的元素是不区分块级元素/行内元素/行内块级元素。

E6和更低版本不支持固定定位,可以使用javascript解决。

3> inherit,继承:继承父元素position属性的值。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .div2 {
            position: fixed;
            background: blue;
            width: 100px;
            height: 100px;
            left: 20px;
            bottom: 20px;
        }
        .div3 {
            position: inherit;
            background: yellow;
            width: 100px;
            height: 100px;
            right: 20px;
            bottom: 20px;
        }
    </style>
</head>
<body>
<div class="div2">
    <div class="div3"></div>
</div>

这里写图片描述

4> relative,相对定位:相对定位就是相对于自己以前在普通流中的位置来移动。即相对于其正常位置进行定位。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 100px;
        }

        .div1 {
            background-color: aquamarine;
        }

        .div2 {
            background-color: chocolate;
            position: relative;
            left: 20px;
            top: 20px;
        }

        .div3 {
            background-color: coral;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>

这里写图片描述

使用相对定位时,无论该元素是否移动,元素仍然占据原先的空间,因此移动元素会导致它覆盖其他框。

在相对定位中同一个方向上的定位属性只能使用一个。

相对定位是不脱离标准流的, 所以在相对定位中区分块级元素/行内元素/行内块级元素。且因为相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局。

5> static,静态定位:默认值,没有定位,元素出现在正常的流中,即上面的普通流,忽略 top, bottom, left, right 或者 z-index 声明。

3 浮动流

浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐。先浮动的元素会显示在前面, 后浮动的元素会显示在后面。

浮动流中没有居中对齐, 没有center这个取值。在浮动流中是不可以使用margin: 0 auto。

在浮动流中是不区分块级元素/行内元素/行内块级元素的。无论是块级元素/行内元素/行内块级元素都可以水平排版。都可以设置宽高。

当元素被设置为浮动后,那么他会脱离标准流(脱标),不会占用标准流中的空间。如果此时后面的元素没有浮动,那么此时这个元素会盖住后面的元素。

这里写图片描述

1> inherit,继承:继承父元素float属性的值。

2> left,左浮动:元素向左浮动。先浮动的在左边,后浮动的在右边。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          * {
            margin: 0;
            padding:0;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            float: left;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<ul>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
</ul>
</body>

这里写图片描述

3> none,不浮动:默认值。

4> right,右浮动:元素向右浮动。先浮动的在右边,后浮动的在左边。


<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
          * {
            margin: 0;
            padding:0;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: rebeccapurple;
            float: right;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<ul>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
    <div>div5</div>
</ul>
</body>

这里写图片描述

版权声明:欢迎访问个人独立博客:www.stevin3t3y.site

HTML与CSS布局技巧总结

很多人对CSS的布局有困惑,实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解,分析下了解各种布局的优劣,同时希望能分享给初入前端的朋友们一些在布局上的经验,如果有那些...
  • bingkingboy
  • bingkingboy
  • 2016年04月11日 00:29
  • 14485

关于HTML学习重点-绝对布局和相对布局总结

其实这篇文章早就该写了,很久写了关于HTML布局相关的经验总结,一直在百度云上,只是偶尔查询翻到对应资料,担心日后很难找到,所以最后还是决心以文章的形式记录下来供大家参考查阅,实现这篇文章应有的价值;...
  • lixiang987654321
  • lixiang987654321
  • 2016年07月24日 11:29
  • 3743

HTML5 - 简单的上下布局页面样例

1,下面是一个简单的上下布局样例: 2,代码如下 可以看到页面里使用了HTML5的语义元素:< header >、< footer >、< article >— index.html — ...
  • u014063717
  • u014063717
  • 2016年03月17日 13:13
  • 3023

分享总结10天来学习HTML DIV+CSS标准网页布局一些技巧

2013年03月23号开始了我们第一个项目,用DIV+CSS标准网页布局仿制Discuz论坛页面(首页、帖子列表页,帖子详情页以及注册页),这是检验我们10天以来对我们掌握HTML标签,CSS属性,一...
  • u011886490
  • u011886490
  • 2013年08月30日 15:05
  • 604

ASP.NET页面传值方式-有码有真相

页面传值常用有QueryString,Session,Cookies,Application,Server.Transfer。   一、QueryString   QueryString是...
  • rosefly110
  • rosefly110
  • 2013年04月01日 17:32
  • 508

一个简单的网页布局HTML+CSS

主页面                      body{                 margin: 0px;                 padding: 0px;         ...
  • yueludanfeng
  • yueludanfeng
  • 2014年11月29日 15:32
  • 353

《HTML5+CSS3网页布局和样式精粹 》 -- 读书笔记

第1章 认识HTML和CSS HTML是英文HyperText Mark-up Language的简称
  • CHS007chs
  • CHS007chs
  • 2014年07月08日 16:16
  • 1920

HTML——博客网页布局

HTML文件 HTML blog KSC 工作室 http://blog.csdn.net/sunshumin
  • u013263923
  • u013263923
  • 2014年11月01日 21:39
  • 1511

HTML+CSS学习笔记(一)——网页布局

HTML+CSS基础的标签和属性都掌握后,开始进行网站开发时,往往会遇到布局上的困难。所以本学习笔记从布局开始讲起,相关的基础知识可以参见W3C网站:http://www.w3school.com.c...
  • xuxumanzou
  • xuxumanzou
  • 2015年07月26日 19:34
  • 391

基本的html网页布局

我是从一个偶然的机会开始学习HTML的。 大三了,某大学计算机专业,学校重理论轻实践的教育方式很好,但是我还是想在大学积累一些代码量,,算了理由就不说那么多了。 刚好班里有一个人非常好的同学以前接...
  • sjxlovecode
  • sjxlovecode
  • 2016年12月07日 22:05
  • 103
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML网页布局方式总结 |有码有真相|
举报原因:
原因补充:

(最多只允许输入30个字)