高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

一、文档流

1、什么是文档流

将窗体自上而下分成一行一行，块级元素从上至下、行内元素在每行中从左至右的顺序依次排放元素

2、本质

文档流本质是 nomal flow （普通流、常规流）

3、BFC（Block Formatting Contxt）

块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干

4、BFC的规则

内部的Box会在垂直方向，一个接一个地放置；
Box自身垂直方向的位置由margin-top决定，属于同一个BFC的两个相邻Box的margin会发生重叠（取最大值）；
Box自身水平方向的位置由margin左或右决定(具体已经参照BFC方位)，属于同一个BFC的两个相邻Box的margin会发生叠加。

二、浮动布局

float: left | right

1、目的

float的目的是让block同行显示（在父级规定的宽度内、不完全脱离文档流）

2、文档流、完全脱离文档流、不完全脱离文档流

1、文档流：子标签在父级标签没有设置高度时，会自动撑开父级

2、完全脱离文档流：子标签不再为父级撑开高度，子标签高于文档流，不占用盒子模型的空间，有一个z-index

3、不完全脱离文档流：这是浮动后的结果，不清浮动,不会撑开父级高度,清浮动后,会重新撑开父级高度

3、清浮动

（1）原因

在子级中使用浮动布局，若是父级有兄弟标签，会出现布局问题

（2）解决方法

原理：在浮动布局情况下，让父级获得合适的高度

/*方法1. 浮动的父级设置高度*/

super {

    height: npx;

}

/*方法2. 浮动的父级设置overflow*/

super {

    overflow: hidden;

}

/*方法3. 浮动的父级兄弟设置clear，一般利用both同时清左右两边的浮动*/

brother {

    clear: left | right | both;

}

/*方法4. 浮动的父级伪类清浮动，一般利用both同时清左右两边的浮动*/

super:after {

    content: "";

    display: block;

    clear: left | right | both;

}

三、流式布局

1、目的

让布局脱离固定值限制，可以根据页面情况改变相应发生改变

<style type="text/css">

    .wrap {

        max-width: 1200px;

        min-width: 800px;

        width: 90%;

        height: 600px;

        margin: 0 auto;

        background-color: orange;

    }

</style>

<div class="wrap"></div>

2、常用操作

百分比设置 % 参考最近父级
窗口比设置 vw | vh
字体控制 em | rem ，em最近设置字体大小的父级规定的字体大小，rem为html字体大小

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>流式布局</title>

    <style type="text/css">

        html, body {

            width: 100%;

            margin: 0;

        }

        .box {

            /*百分比流式*/

            /*参考最近父级*/

            width: 90%;

            /*max-width: 1000px;*/

            /*min-width: 600px;*/

            /*窗口比*/

            /*width: 90vw;*/

            /*max-width: 1000px;*/

            /*min-width: 600px;*/

            height: 300px;

            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;

        }*/

        .txt {

            /*1em = 16px*/

            /*font-size: 16px;*/

            /*font-size: 0.4em;*/

            /*总结:em为最近设置字体大小的父级规定的字体大小*/

            font-size: 1rem;

            /*总结:rem为html字体大小*/

        }

        html {

            font-size: 50px;

        }

    </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="txt">文本</div>

     </div>

</body>

</html>

流式布局案例

四、定位布局

1、目的

让目标(要被布局的)标签在指定参考系下任意布局

2、语法

<!-- 基本语法: -->

<!-- 1.通过position设置定位是否开启 -->

<!-- static：静态，未定位（默认值） -->

<!-- relative: 相对定位, 未脱离文档流 -->

<!-- absolute: 绝对定位, 完全脱离文档流 -->

<!-- fixed: 固定定位, 完全脱离文档流 -->

<!-- 2.定位开启后,四个定位方位便会开启,且四个方位均参与布局 -->

<!-- 如果发生冲突,左右取左,上下取上 -->

position: static | relative | absolute | fixed

布局方位：left | right | top | bottom

3、相对定位（relative）

未脱离文档流，相对布局方位只改变盒子显示区域，不改变盒子原有位置，

简单的说相当于灵魂出窍，在原有位置仍然占一块区域，margin-top改变会影响兄弟盒子

相对定位主要用于给父级定位，从而辅助子级的绝对定位

（1）开启定位

position relative;

（2）方位布局，方位改变上盒子不会影响下盒子（灵魂出窍），四个方位如果发生冲突，左右取左，上下取上

left:30px;

top:30px;

（3）参考系

相对定位参考系为自身原有位置

（4）案例

<!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>

相对布局案例

4、绝对定位（absolute）

完全脱离文档流，有一个z-index可以控制两个绝对定位的优先级，不在文档流中占位，也永远不会撑开父级高度，永远不会影响兄弟布局，显示层高于文档流层

margin依旧可以影响自身布局，但不会影响兄弟布局，margin改变兄弟标签布局不会改变

（1）开启定位

position:absolute;

（2）定位布局

left:30px;

top:30px;

（3）参考系

最近的已定位的父级，sup(未定位) -> body(未定位) -> html(文档窗口）

（4）案例

<!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 {

            /*1.完全脱离文档流*/

            position: absolute;

            /*总结:不在文档流中占位,也永远不会撑开父级高度,永远不会影响兄弟布局,显示层高于文档流层*/

            /*打开定位方位*/

            /*margin-left: 100px;

            margin-top: 100px;*/

            /*总结:margin依旧可以影响自身布局,但不会影响父级即兄弟布局*/

            /*2.参考系:?*/

            left: 100px;

            right: -100px;

            /*3.同时存在,左右取左,上下取上*/

        }

    </style>

    <style type="text/css">

        .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;*/

            /*绝对定位好处:如果自身已经采用绝对定位布局了,那么子级一定参考自身进行定位*/

            position: absolute;

            margin: 100px 100px;

            /*注:如果父级只是辅助子级进行绝对定位,那么一定优选相对定位,因为绝对定位会产生新的BFC,导致盒模型布局会受影响*/

            /*注:margi-top|left依旧起作用,只是sup已经脱离文档流,不会获得到body宽度,所以auto没有参考值*/

        }

        .sub {

            /*2.参考坐标系为最近的定位父级*/

            position: absolute;

            left: 0;

            right: 0;

            top: 0;

            /*父级: sup(未定位) -> body(未定位) -> html(文档窗口)*/

            /*3.同时存在,左右取左,上下取上*/

        }

    </style>

</head>

<body>

    <!-- <div class="b1"></div>

    <div class="b2"></div> -->

    <div class="sup">

        <div class="sub"></div>

    </div>

</body>

</html>

绝对定位案例

5、固定定位（fixed）

完全脱离文档流，有一个z-index可以控制两个绝对定位的优先级，不在文档流中占位，也永远不会撑开父级高度，永远不会影响兄弟布局，显示层高于文档流层

margin依旧可以影响自身布局，但不会影响兄弟布局，margin改变兄弟标签布局不会改变

（1）开启定位

position:fixed;

（2）定位布局

left:30px;

top:30px;

（3）参考系

页面窗口

（4）案例

<!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>

</body>

</html>

固定定位案例

五、flex布局

1、目的

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex可以很好的解决垂直居中问题

2、名词概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
水平为轴（main axis），主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end。
垂直为交叉轴（cross axis），交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

3、容器属性

1. flex-direction 属性 决定主轴的方向（即项目的排列方向）

flex-direction: row | row-reverse | column | column-reverse;

     row（默认值）：主轴为水平方向，起点在左端。

     row-reverse：主轴为水平方向，起点在右端。

     column：主轴为垂直方向，起点在上沿。

     column-reverse：主轴为垂直方向，起点在下沿。

2. flex-wrap 属性 定义，如果一条轴线排不下，如何换行。

flex-wrap: nowrap | wrap | wrap-reverse;

     nowrap（默认）：不换行。

     wrap：换行，第一行在上方。

     wrap-reverse：换行，第一行在下方。

3. flex-flow 属性 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow: <flex-direction> <flex-wrap>;

4. justify-content 属性 定义了项目在主轴上的对齐方式。

justify-content: flex-start | flex-end | center | space-between | space-around;

5. align-items 属性 定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch;

6. align-content 属性 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

4、项目属性

1. order 属性 定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order: <integer>;

2. flex-grow 属性 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-grow: <number>; /* default 0 */

3. flex-shrink 属性 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-shrink: <number>; /* default 1 */

4. flex-basis 属性 定义了在分配多余空间之前，项目占据的主轴空间（main size）。

flex-basis: <length> | auto; /* default auto */

5. flex 属性 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex: <flex-grow> <flex-shrink> <flex-basis>

6. align-self 属性 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;

5、主要了解

1.将父级display属性设置为flex,则父级成为container,子级成为item

2.container设置item的排列方向flex-direction

3.item对于container的空间占比flex-grow

6、案例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>flex布局</title>

    <style type="text/css">

        .container {

            width: 600px;

            height: 600px;

            border: 1px solid black;

            margin: 0 auto;

        }

        .item {

            /*width: 200px;*/

            /*height: 200px;*/

            /*border-radius: 50%;*/

            background-color: orange;

            font-size: 80px;

        }

        /*容器:规定容器为flex,则容器内的标签会成为该容器的项目(item)*/

        .container {

            display: flex;

        }

        .item {

            /*默认只能一行排列,所有item总宽不允许超出container宽度*/

            /*width: 300px;*/

            /*默认情况下item可以不规定高度,高度会自适应父级*/

            /*item没有设置宽度下,可以通过flex-grow决定对于父级的占比*/

        }

        /*.it1, .it3 {

            flex-grow: 1;

        }

        .it2 {

            flex-grow: 3;

            background-color: pink

        }*/

        /*container属性*/

        .container {

            /*flex-direction: row | row-reverse | column | column-reverse; 方向*/

            /*flex-direction: column-reverse;*/

            /*flex-wrap: nowrap | wrap | wrap-reverse;换行方式*/

            /*flex-wrap: wrap;*/

            /*justify-content: flex-start | flex-end | center | space-between | space-around;水平对齐方式*/

            /*item为沾满父级区域*/

            justify-content: space-around;

        }

        /*item属性*/

        .item {

            /*width: 300px;

            height: 200px;*/

        }

        .item {

            width: 100px;

        }

    </style>

    <!-- 总结 -->

    <!-- 1.将父级display属性设置为flex,则父级成为container,子级成为item -->

    <!-- 2.container设置item的排列方向flex-direction -->

    <!-- 3.item对于container的空间占比flex-grow -->

</head>

<body>

    <div class="container">

        <div class="item it1">1</div>

        <div class="item it2">2</div>

        <div class="item it3">3</div>

    </div>

</body>

</html>

flex布局案例

六、响应式布局

当响应式布局中样式块起作用时,会与正常样式块设置协同布局,遵循选择器的优先级规则

1、目的

设置在不同页面宽度下的布局，满足当前屏幕尺寸时，该样式块起作用，不满足时，则样式块失效

2、语法

/*当页面尺寸小于<integer>宽度时的样式*/

@media only screen and (max-width: <integer>) {

    selector {

    }

}

/*当页面尺寸大于<integer1>宽度，小于<integer2>宽度时的样式*/

@media only screen and (min-width: <integer1>) and (max-width: <integer2>) {

    selector {

    }

}

/*当页面尺寸大于于<integer3>宽度时的样式*/

@media only screen and (min-width: <integer>) {

    selector {

    }

}

3、原则

（1）采用响应式布局的页面,基本样式块只做共性样式设置，需要根据页面尺寸进行适应变化的样式均有响应式布局处理
（2）要进行响应式布局的页面要处理所有屏幕尺寸下的样式块

4、案例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>响应式布局</title>

    <style type="text/css">

        /*基本样式块*/

        /*.box {

            max-width: 1200px;

            width: 95%;

            margin: 0 auto;

            background-color: red!important;

        }

        .it {

            width: 300px;

            height: 300px;

            font: 900 50px/300px 'STSong';

            text-align: center;

            float: left;

            border-radius: 50%;

            background-color: orange;

        }

        .box:after {

            content: "";

            display: block;

            clear: both;

        }*/

        html, body {

            margin: 0;

        }

        .it {

            height: 300px;

            background-color: orange;

            font: 900 50px/300px 'STSong';

            text-align: center;

            border-radius: 50%;

            float: left;

        }

        .box:after {

            content: "";

            display: block;

            clear: both;

        }

        /*屏幕宽度超出1200px*/

        @media only screen and (min-width: 1200px) {

            .box {

                background-color: pink;

            }

            .it {

                width: 25%;

            }

        }

        /*屏幕宽度间于600至1200px*/

        @media only screen and (min-width: 600px) and (max-width: 1200px) {

            .box {

                background-color: brown;

            }

            .it {

                width: 30%;

                margin: 0 calc(10% / 6);

            }

        }

        /*屏幕宽度小于600px*/

        @media only screen and (max-width: 600px) {

            .box {

                background-color: cyan;

            }

            .it {

                width: 80%;

                margin-left: 10%;

                min-width: 300px;

            }

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="it">1</div>

        <div class="it">2</div>

        <div class="it">3</div>

        <div class="it">4</div>

        <div class="it">5</div>

        <div class="it">6</div>

        <div class="it">7</div>

        <div class="it">8</div>

        <div class="it">9</div>

        <div class="it">10</div>

        <div class="it">11</div>

        <div class="it">12</div>

    </div>

</body>

</html>

响应式布局案例

前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局的更多相关文章

Web 前端 UI 组件库文档自动化方案 All In One
Web 前端 UI 组件库文档自动化方案 All In One 需求自动化动态好用 markdown element-ui 中示例和说明按照一定规则写在md文件中,调用md-loader将md文 ...
CSS的三种手段让元素脱离标准本文档流——浮动、绝对定位、固定定位
1.浮动浮动是CSS中用到的最多的一个选项,他有三个性质.关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动. 1.1 浮动元素脱离标准文档流 1.1.1 大概描 ...
[Web 前端] SuperAgent中文使用文档
cp from : https://blog.csdn.net/gebitan505/article/details/58585846 superagent是nodejs里一个非常方便的客户端请求代理 ...
MongoDB快速入门（八）- 删除文档
删除文档 MongoDB 的 remove()方法用于从集合中删除文档.remove()方法接受两个参数.一个是标准缺失,第二是justOne标志 deletion criteria : 根据文件(可 ...
pyautogui 文档（五）：截图及定位功能
截图函数 PyAutoGUI可以截取屏幕截图,将其保存到文件中,并在屏幕中查找图像.如果您有一个小图像,例如需要单击并希望在屏幕上找到它的按钮,这将非常有用.这些功能由PyScreeze模块提供,该模 ...
VisualC&num;数据库高级教程文档分享
这一节我们演示下怎样使用VS2010创建与发布MVC3建立的网站.使用VS2010创建MVC3.0网站,需要下载MVC3.0的安装包,这个大家可以去网络上下载. 1.项目创建 ...
WPF中使用流文档
转载自:http://www.cnblogs.com/zlgcool/archive/2008/11/17/1335456.html WPF面向的是UI展现,而文本显示无疑是UI层中的重要功能之一.W ...
WPF 流文档
WPF文本显示: WPF面向的是UI展现,而文本显示无疑是UI层中的重要功能之中的一个.WPF提供了XPS (XML 文件规范) 和Flow Document (流文档) 来在不同的场景下展现或者操作 ...
WPF界面设计技巧（11）-认知流文档 &amp&semi; 小议WPF的野心
原文:WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心流文档是WPF中的一种独特的文档承载格式,它的书写和呈现方式都很像HTML,它也几乎具备了HTML的绝大多数优势,并提供了更 ...
【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22&colon;24 813人阅读评论(1) 收藏
引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽 ...

随机推荐

python之最强王者（11）——异常（exception）
1.Python 异常处理 python提供了两个非常重要的功能来处理python程序在运行中出现的异常和错误.你可以使用该功能来调试python程序. 异常处理: 本站Python教程会具体介绍. ...
mysql创建远程用户
grant all privileges on *.* to myuser@"%" identified by 'password'; 用root用户登陆,然后: grant al ...
弹性ScrollView,和下啦刷新的效果类似实现下拉弹回和上拉弹回
今天做了一个弹性ScrollView,和下啦刷新的效果类似,我想这个很多需求都用的这种效果其实这是一个自定义的scrollView,上代码,这是我写在一个公共的组件包里的 package com.p ...
Android - 应用名称设置的问题
今天我想修改我的android应用名称,就是手机桌面上图标下面的名称,根据我的理解我修改AndroidManifest.xml文件中application标签中的android:label=&quot ...
jquery html标签的链式语法
<div id="ProductNet"> <table border='0' cellspacing='2' cellpadding='0' style='te ...
Unity 启动画面淡入淡出
前几天在玩我叫MT 2游戏的时候发现打开他们应用的时候发现他们Logo淡入淡出的效果做的挺好的,例如第一张是运营商腾讯的logo第二张是他们公司的游戏logo.我们也来模仿一下: 第一张图片:运营商的 ...
ASP&period;NET Core 中的应用程序启动 Startup
ASP.NET Core 应用使用Startup类来作为启动类. Startup类中包含了ConfigureServices方法,Configure方法,IConfiguration,IHos ...
记一次使用MemoryCache不能Get的问题
在.NET Core自带的Angular模板项目中,我想要做一个简单的登录认证. 所以想填写用户名密码,使用guid作为key,存储登录信息,每次页面刷新的时候check它. 思路觉得没有问题,但是一 ...
Spring MVC生成JSON数据
以下示例演示如何使用Spring Web MVC框架生成JSON数据格式.首先使用Eclipse IDE,并按照以下步骤使用Spring Web Framework开发基于动态表单的Web应用程序: ...
初学树套树：线段树套Treap
前言树套树是一个十分神奇的算法,种类也有很多:像什么树状数组套主席树.树状数组套值域线段树.\(zkw\)线段树套\(vector\)等等. 不过,像我这么弱,当然只会最经典的线段树套\(Trea ...