高级布局：文档流、浮动布局、流式布局、定位布局、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#数据库高级教程文档分享
这一节我们演示下怎样使用VS2010创建与发布MVC3建立的网站.使用VS2010创建MVC3.0网站,需要下载MVC3.0的安装包,这个大家可以去网络上下载. 1.项目创建 ...
4、前端--浮动、定位、是否脱离文档流、溢出属性、z-index、透明度、JavaScript简介
浮动 # ps:html代码时没有缩进一说的全部写在一行也可以 """浮动主要就是用于页面布局的!!!""" # 浮动带来的负面影响 &q ...
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）-认知流文档 & 小议WPF的野心
原文:WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心流文档是WPF中的一种独特的文档承载格式,它的书写和呈现方式都很像HTML,它也几乎具备了HTML的绝大多数优势,并提供了更 ...

随机推荐

PHP-文件和目录操作
目录操作创建目录:mkdir(目录地址, 权限, 是否递归创建 = false); 删除目录:rmdir(目录地址);(仅仅可以删除空目录,不支持递归删除) 移动(改名):rename(旧地址, 新 ...
Jmeter 5.1参数化csv引入文件
Jmeter 5.1参数化csv引入文件 1.引用外部参数文件.新建json.txt文本输入需要的数据,我写了两条数据. 2.添加CSV数据文件设置,输入文件名.变量名.是否读取首行报文中引用参数, ...
git rollback
http://stackoverflow.com/questions/1616957/how-do-you-roll-back-reset-a-git-repository-to-a-particul ...
Windows10系统下，如何彻底删除卸载MySQL
本文介绍,在Windows10系统下,如何彻底删除卸载MySQL... 1>停止MySQL服务开始->所有应用->Windows管理工具->服务,将MySQL服务停止.2> ...
PAT甲级——A1152 GoogleRecruitment【20】
In July 2004, Google posted on a giant billboard along Highway 101 in Silicon Valley (shown in the p ...
ssh远程连接控制 linux 口令、密钥连接
sshd服务提供两种安全验证的方法: 基于口令的安全验证:经过验证帐号与密码即可登陆到远程主机. 基于密钥的安全验证:需要在本地生成“密钥对”后将公钥传送至服务端,进行公共密钥的比较(相对安全). 首 ...
MNIST多图显示--Python练习
在学习TensorFlow框架时,提到用MNIST手写数字数据库进行练习,为了更直观看下里面的数据到底长啥样,用OpenCV(cv2)中的imshow函数来进行显示. 默认已经安装: numpy.te ...
Git分布式版本控制系统（上）
Git分布式版本控制系统(上) 链接:https://pan.baidu.com/s/1CgaEv12cwfbs5RxcNpxdAg 提取码:fytm 复制这段内容后打开百度网盘手机App,操作更方便 ...
JMeter 并发压力测试
一,下载JMeter http://jmeter.apache.org/download_jmeter.cgi 二,创建默认配置可以不用配置相同参数. 测试计划:右键添加线程组线程组:右键添加 ...
「CTS2019 | CTSC2019」氪金手游解题报告
「CTS2019 | CTSC2019」氪金手游降智好题 ... 考场上签到失败了,没想容斥就只打了20分暴力... 考虑一个事情,你抽中一个度为0的点,相当于把这个点删掉了(当然你也只能抽中 ...

前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

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

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

随机推荐

热门专题