布局 html代码示例

 文档流

　 document flow=> normal flow
    本质：普通流/常规流

流：水流 河流... => 自上而下（连续的，连续的
    文档：页面主体

文档流：一个连续具有上下逻辑的页面整体
    理解：出现在页面中的显示内容，均可以理解为在文档流中（片面的）

概念：将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素
    BFC：Block formatting context
    概念：由blck-level box 参与布局，同一区域（容器空间）中，相互影响，且不会对空间区域外产生影响

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>文档流</title>
    <style type="text/css">
        .box{
            width:200px;
            height:200px;
            background-color:orange;
            /* 默认BFC布局方向，从左到右： */
            margin-left:50px;

            /* 默认BFC、水平布局方向 */
            /* 更改BFC水平布局方向：从右至左 */
            float: right;
            margin-right:-50px;

        }
        .b1{
            width:200px;
            height:200px;
            background-color:red;
            margin-left:10px;
        }
        .bb1,.bb2{
            width:50px;
            height:50px;
            background:cyan;
            float: left;
        }
        .bb1{
            margin-left:20px;
            margin-right:20px;
        }
        .bb2{
            margin-left:20px;
        }

    </style>
</head>
<body>
    document flow=> normal flow
    <!-- b1 b2 同在一个区域 | bb1 和bb2同在一个区域 -->
    <div class="b1">
        <div class="bb1"></div>
        <div class="bb2"></div>
    </div>
    <div class="b2">

    </div>
</body>
</html>

浮动布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>浮动布局</title>
    <!-- part1 -->
    <style type="text/css">
        .article{
            width:450px;
            border:1px solid #333;
            padding:0;

        }
        .p1 img{
            width:200px;
            /* 块级：独占一行 */
            display:block;
            /* 浮动后：可以同行显示（只占自身显示区域） */
            float: left;
            margin-right:15px;
        }
        .p1{
            display:none;
        }
    </style>

    <!-- part2 -->
    <style type="text/css">
        .p2{
            width:300px;
            height:300px;
            background-color:orange;
        }
        .sub{
            width:100px;
            height:100px;
            background-color:red;
        }
        /* float: left; BFC横向布局规则为从左至右，且block box 同行显示(之间没有间隔) */
        /* 注：从左至右可以理解横坐标正方向为右 */
        .sub{
            float: left;
        }
        /* float: right; BFC横向布局规则为从右至左，且block box 同行显示(之间没有间隔) */
        /* 注：从右至左可以理解横坐标正方向为左 */
        .sub{
            float: right;

        }
        .sub:nth-child(2){
            margin-right:-100px;
        }
        /* 隐藏p2 */
        .p2{
            display:none;
        }

    </style>
    <!-- part3 -->
    <style type="text/css">
        .sup{
            width:300px;
            background-color:orange;
        }
        .sup1{
            width:100px;
            height:100px;
            background-color:red;
            border-radius:50%;
        }
        .sup1:nth-child(2){
            /* margin-top:-100px; */
            /* 文本层次高于背景层次 */
            /* 2的背景只能遮挡1的背景，但不能遮挡1的文本 */
            /* background-color:pink;
            margin-top:-80px; */
            /* 父级的高度最终决定于逻辑最后位置上的子级的盒子底端 */
        }
        /* 显示区域重叠，文本区域正常(与显示区域共同讨论就不正常) */
        .br{
            width:300px;
            height:100px;
            background-color:yellowgreen;
        }
        /* 恢复正常：父级刚好拥有存放所有子级的高度（合适高度） */
        .sup{
            height:100px;
        }
        .sup1{
            float:left;
        }
        /* 总结（坑）：当target标签的内部有浮动的子级，target的兄弟标签布局会出现显示异常 */
    </style>
</head>
<body>
        <!-- part3 -->
    <!-- 浮动产生的问题:父级未设置固定高度，不再撑开父级高度 -->
    <div class="p3">
        <div class="sup">
            <div class="sup1">1</div>
            <div class="sup1">2</div>
        </div>
        <div class="br">1231222222222222223</div>
    </div>

        <!-- part2 -->
    <!-- 基本语法: float：left|right -->
    <div class="p2">
        <div class="sub">1</div>
        <div class="sub">2</div>
    </div>
        <!-- part1 -->
    <!-- 解决的问题:让block box 同行显示 -->
    <div class="p1">
        <div class="article">
        <img src="icon.jpg" >文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本</div>
    </div>
</body>
</html>

清浮动

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>清浮动</title>
    <style type="text/css">
        .sup{
            width:300px;
            /* height:50px; */
            background-color:orange;
        }
        .sub,.sub1{
            width:100px;
            height:100px;
            background-color:red;
            border-radius:50%;
            font:900 40px/100px "STSong";
            text-align:center;
        }
        .br{
            width:200px;
            height:200px;
            background-color:pink;
        }
        .sub{
            float: left;
        }
        /* 清浮动对象：拥有浮动子级的父级 sup */
        /* 方式1 */
        /* 设置自身高度 */
        /* .sup{
            height:100px;
        } */
        /* 方式2 */
        /* 设置自身overflow:hidden; */
        /* .sup{
            overflow:hidden;
        } */
        /* 设置兄弟标签的clear:left | right | both */
        /*  .sub1{
            float:right;
         } */
         /* .br{
            clear:left;
        }
 */
        /* 方式三 */
        /* 设置自身：after伪类 */
        .sup:after{
            content:"";
            display:block;
            clear:both;
        }
    </style>
</head>
<body>
    <!-- 不完全脱离文档流 -->
    <!-- 通常文档流中，子标签在父级标签未设置高度的情况下，会撑开父级的高度 -->
    <!-- 脱离文档流后的子级标签，不在撑开父级高度 -->
    <!-- 不完全脱离文档流（浮动后的结果），不清浮动，不会撑开父级的高度。清浮动后，会重新撑开父级高度 -->
    <!-- 清浮动本质：让父级获得合适的高度 -->

    <div class="sup">
        <div class="sub">1</div>
        <div class="sub">2</div>
        <!-- <div class="sub1">2</div> -->
    </div>
    <div class="br"></div>
</body>
</html>

 

流式布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>流式布局</title>
    <style type="text/css">
        .box{
            /* 百分比流式 */
            /* 参考最近父级 */
            /* width:90%; */
            /* max-width:900px;
            min-width:600px; */

            /* 窗口比 */
            /* width:90vw;
            max-width:900px;
            min-width:600px; */

            height:600px;
            background-color:orange;
            margin:0 auto;
        }
        .b{
            width:100px;
            height:100px;
            background-color:red;
            border-radius:50%;
            float:left;
        }
        body{
            font-size:30px;
        }
        .sup{
            font-size:20px;
        }
        .text{
            /* 1em=16px 不一定*/
            /* font-size:1em; */
            /* font-size:16px; */
            /* font-size:0.4em;  */
            /* em为最近设置字体大小的父级规定的字体大小 */
            font-size:1rem;
            /* rem为html字体大小 */
        }
        html{
            font-size:40px;
        }
    </style>
</head>
<body>
    <!-- 流式布局 -->
    <!-- 目的：让布局脱离固定值限制，可以根据页面情况改变相应发生改变 -->
    <div class="box">
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
        <div class="b"></div>
    </div>
    <div class="sup">
        <div class="text">wenben</div>
    </div>
</body>
</html>

 定位布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>定位布局应用</title>
    <style type="text/css">
        .box{
            width:150px;
            height:300px;
            background-color:orange;
            /* 定位了 */
            position:fixed;
            /* 打开了布局方位 */
            left:10px;
            top:calc(50vh - 150px);
        }
    </style>
    <!-- 基本语法： -->
    <!-- 1.通过position设置定位 -->
    <!--    position 四个值：
            1.static：静态，未定位（默认值）
            2.relative：相对定位，未脱离文档流,会撑开父级，效果是定于那个位置
            3.absolute：绝对定位，完全脱离文档流，不会撑开父级 效果是相当于定于那个位置
            4.fixed：固定定位，完全脱离文档流 -->
    <!-- 2.定位开启后，四个定位方位变回开始，且四个方位均参与布局
        如果发生冲突 左右取左，上下取上 -->
</head>
<body>

    <!-- 定位布局的目的（应用）：让目标（目标要被布局的）标签在指定参考系下任意布局 -->
    <div class="box"></div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</body>
</html>

 

相对定位

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>相对定位</title>
    <style type="text/css">
        div{
            width:200px;
            height:200px;
            background-color:red;
        }
        .b2{
            background-color:orange;
        }
        /* 不做定位操作 */
        /* b1,b2均在文档流中，b1的布局会影响到b2 */
        /* .b1{
            margin-top:30px;
            margin-bottom: 30px;
        } */
        /* 固定定位后 */
        .b1{
            /* 1.为脱离文档流 */
            /* BFC规则下margin布局，上盒子会影响下盒子 */
            /* margin-top:30px;
               margin-bottom:30px; */
            /* 开启定位 */
            position:relative;
            /* 具有定位方位 */
            /* 2.方位布局下，上盒子不会影响下盒子 */
            /* left:30px; */
            /* top:30px; */
            /* 总结：方位布局只改变盒子显示区域，不改变盒子原有位置 */
            /* margin-top:30px; */ /*改变的原先位置并不是显示区域*/
            /* 3.参考系：相对定位参考系为自身原有位置 */
            /* right:30px; */
            /* 方位布局就是显示区域上|下|左|右距离自身原有位置上下左右的间隔 */
            /* 4.left=-right top=-bottom,同时存在，左右取左，上下取上 */
            /* left:-30px; */
            /* right:-100px; */
        }
    </style>
</head>
<body>
    <div class="b1"></div>
    <div class="b2"></div>
</body>
</html>

绝对定位

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>绝对定位</title>
    <style type="text/css">
        html,body{
            margin:0;
            padding:0;
        }
        div{
            width:200px;
            height:200px;
            background-color:red;
        }
        .b2{
            background-color:orange;
        }
        .b1{
            /* 1.完全脱离文档流 */
            /* position:absolute; */
            /* 总结：不在文档流中占位，也永远不会撑开父级高度，永远不会影响兄弟布局，显示层高于文档流显示层 */
            /* 打开定位方位 */
          /*   margin-left:100px;
            margin-top:100px; */
            /* 总结：margin依旧可以影响自身布局，但不会影响父级即兄弟布局 */

            /* 2.参考系在下面sup sub 例子 */

            /* 3.同时存在，左右取左，上下取上 */
            /* left:30px; */
            /* right:100px; */
        }
        .sup{
            width:500px;
            height:500px;
            background-color:orange;
        }
        .sub{
            width:200px;
            height:200px;
            background-color:red;
        }
        .sup{
            /* 采用盒模型布局 */
            /* margin:0 auto; */
            /* 需求：sub应该参考sup，sup需要定位：相对|绝对|固定 */
            /* 相对定位好处：父级不会脱离文档流,满足所有的盒模型布局 */
            /* position:relative; */
            /* 绝对定位好处：如果自身已经采用绝对定位布局了，name子级一定参考自身进行定位
             */
            margin:100px auto;
            /* margin-top margin-bottom 起作用 margin-left，margin-right 没有起作用，详细解释在下面的注。 */
            position:absolute;
            /* 注：如果父级只是辅助子级进行绝对定位，name一定优先相对定位，因为绝对定位会产生新的BFC，导致盒模型布局会受影响 */
            /* 注：margin-top|left 依旧起作用，只是sup已经脱离文档流，不会或得到body宽度，所以auto没有参考值 */
        }
        .sub{
            /* 2.参考坐标系为最近的定位父级 */
            position:absolute;
            /* left:0; */

            top:0;
            /* 父级：sup(未定位)->body(未定位)->html(文档窗口) */
        }
    </style>
</head>
<body>
    <!-- <div class="b1"></div>
    <div class="b2"></div> -->
    <div class="sup">
        <div class="sub"></div>
    </div>
</body>
</html>

固定定位

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>固定定位</title>
    <style type="text/css">
        .sup{
            width:500px;
            height:500px;
            background-color:orange;
            margin:0 auto;
        }
        .sub{
            width:200px;
            height:200px;
            background-color:red;
        }
        .sup{
            position:relative;
            /* position:absolute; */
        }
        .sub{
            position:fixed;
            left:0;
            /* top: 0; */
            bottom:0;
        }
    </style>
</head>
<body>
    <!-- 固定定位 -->
    <!-- 1.完全脱离文档流 -->
    <!-- 2.参考系为文档窗口 -->
    <!-- 3.左右取左，上下取上 -->
    <div class="sup">
        <div class="sub"></div>
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</body>
</html>

原文地址：https://www.cnblogs.com/layerluo/p/9709934.html

时间： 2024-08-19 17:13:37

布局 html代码示例的相关文章

java 翻盖hashCode()深入探讨 代码示例

package org.rui.collection2.hashcode; /** * 覆盖hashcode * 设计HashCode时最重要的因素 就是:无论何时,对同一个对象调用HashCode都应该产生同样的值, * 如果你的HashCode方法依赖于对象中易变的数据,用户就要当心了,因为此数据发生变化 时 * HashCode就会生成一个不同的散列码,相当于产生一个不同的健 * 此外 也不应该使HashCode依赖于具有唯一性的对象信息,尤其是使用this的值,这只能很糟糕, * 因为这

Web前端设计:Html强制不换行&lt;nobr&gt;标签用法代码示例

在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容.这就可以nobr标签来实现.它起到的作用与word-break:keep-all 是一样的.nobr 是 No Break 的缩写,意思是禁止换行.通常在浏览器上显示的文档会在到达浏览器的横幅底端时自动换行,但是如果文字被包含在<nobr>-</nobr>标签里的话,则不会换行.由www.169it.com搜集整理 一.nobr语法 1 <nobr>内容</nobr>

计算DXFReader中多边形的面积代码示例

在DXFReader中, 一般的多边形的面积计算绝对值 其中K表是顶点的数目,它们的坐标,用于在求和和, 所以用下面的代码就可以计算出一个封闭的多段线的区域: view source print? 01 Dim Vertex As Object 02 Dim Entity As Object 03 Dim k As Long 04 Dim i As Long 05 Dim Area As Single 06 07 With DXFReader1 08 09  For Each Entity In

代码示例：一些简单技巧优化JavaScript编译器工作详解，让你写出高性能运行的更快JavaScript代码

告诉你一些简单的技巧来优化JavaScript编译器工作,从而让你的JavaScript代码运行的更快.尤其是在你游戏中发现帧率下降或是当垃圾回收器有大量的工作要完成的时候. 单一同态: 当你定义了一个两个参数的函数,编译器会接受你的定义,如果函数参数的类型.个数或者返回值的类型改变编译器的工作会变得艰难.通常情况下,单一同态的数据结构和个数相同的参数会让你的程序会更好的工作. function example(a, b) { // 期望a,b都为数值类型 console.log(++a * +

jquery操作单选钮代码示例

jquery操作单选钮代码示例:radio单选按钮是最重要的表单元素之一,下面介绍一下常用的几个jquery对radio单选按钮操作.一.取消选中: $(".theclass").each(function(){ if($(this).attr('checked')) { $(this).attr('checked',false); } }); 以上代码可以将class属性值为theclass的被选中单选按钮取消选中.二.获取被选中的单选按钮的值: var val=$('.thecla

Python实现各种排序算法的代码示例总结

Python实现各种排序算法的代码示例总结 作者:Donald Knuth 字体:[增加 减小] 类型:转载 时间:2015-12-11我要评论 这篇文章主要介绍了Python实现各种排序算法的代码示例总结,其实Python是非常好的算法入门学习时的配套高级语言,需要的朋友可以参考下 在Python实践中,我们往往遇到排序问题,比如在对搜索结果打分的排序(没有排序就没有Google等搜索引擎的存在),当然,这样的例子数不胜数.<数据结构>也会花大量篇幅讲解排序.之前一段时间,由于需要,我复习了

领域驱动开发推荐代码示例 — Microsoft NLayerApp

简介: Microsoft NLayerApp是由微软西班牙团队出品的基于.NET 4.0的“面向领域N层分布式架构”代码示例,在codeplex上的地址是:http://microsoftnlayerapp.codeplex.com/. 架构图: 点击查看大图 代码下载:http://microsoftnlayerapp.codeplex.com/releases/view/56660 所用到的软件: - Microsoft Visual Studio 2010  - Microsoft Ex

Aspectj快速上手代码示例之Before,After,Around

本文不打算解释AOP的相关专业名词和概念,仅通过几个代码示例来展示Aspectj(对AOP实现的)的基本使用,并且使用的Aspectj是目前最新版本. 1.搭建环境 本文使用Maven来构建工程,通过aspectj-maven-plugin插件来编译*.aj文件至.class. Maven的具体配置: <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>aspectj-maven-plugin&

jxl创建Excel文件java代码示例

记得要下载 并 导入 jxl.jar 包,免积分下载地址:http://download.csdn.net/detail/u010011052/7561041 package Test; import java.io.*; import jxl.*; import jxl.format.Colour; import jxl.write.*; public class JXLTest { private static WritableWorkbook book; private static Wr