css常用布局方式，以及如何实现响应式布局-CSDN博客

auto：默认值，继承align-items属性值，如果没有父容器，则等同于stretch

flex-start：侧轴起始端（有些解释说的交叉轴其实就是侧轴）

flex-end：侧轴结束端

center：侧轴居中

baseline：项目与侧轴的基线对齐（项目第一行文字的基线对齐）

stretch：拉伸，侧轴方向占满盒子（前提未设置高度），遵循min-width/max-width或min-height/max-height限制

safe/unsafe（与上数值组合使用，解决元素内容溢出容器问题）

02. 调整顺序

设置order属性
值越大越靠后，默认属性值等于0（支持负值）
order属性值相同，则按代码先后顺序排列

03. 剩余宽高属性

属性：flex

flex作用于主轴方向，可以使宽高给定值失效，实现元素的灵活伸缩和空间分配；

多个项目均设置flex:1;可以实现平分效果（%也可以）
单个项目常用

flex 是 CSS Flexbox 中用于弹性项（flex item）的简写属性，整合了三个关键属性：flex-grow、flex-shrink 和 flex-basis，用于控制弹性项在容器中的空间分配和尺寸表现。

关于flex-shrink，默认值是1，代表允许挤压；0代表不允许挤压

二、移动端布局知识补充

1. 在网页中切换为移动端模拟器

浏览器页面->右击检查->上方控制栏中可以看移动端的效果

上方的工具栏功能包括：

断网/高质量/中质量/低质量网络情况
不同手机型号显示（支持自定义）
手机模拟横屏/竖屏
还可以模拟截屏（capture screenshot）
滚动全屏截图（capture full size screenshot）

2. 模拟器上方显示的分辨率是css像素，使用截屏功能截出的分辨率是物理分辨率

css像素与物理像素！

这里记一下，rem布局中会用到：iphone6/7/8物理像素宽度为750px,dpr==2

css像素：设备的独立像素

物理分辨率：设备像素

设备像素比（dpr）== 物理像素 / css像素

例如，iPhone6 出厂规定 2物理分辨率==1css像素，所以dpr==2

含义为：用 2×2 个物理像素去渲染 1 个 CSS 像素

如果设计稿提供的是物理像素，需要转换为css像素

css像素转换方法：设计稿像素除以dpr

以iPhone6为例，移动端需要除以2

不同设备分辨率不同，所以尽量写为响应式布局。（百分比；弹性盒；rem布局）

3. 关于html默认模版中<meta name="viewport" content="width=device-width, initial-scale=1.0">

布局视口（没加meta标签）：指网页的实际宽度，设备不同宽度也不同
视觉视口：用户在手机屏幕看到的区域
理想视口：布局视口==视觉视口，最理想的视口尺寸（为了适配，必须加上meta...）

解释：

viewport：视口

width=device-width：设备宽度==理想视口。如果禁止用户在手机上缩放屏幕，则加上user-scalable=no

三、多列布局

这个在实际应用中提到的不多，甚至除了刚开始系统学习，之后这个名词就再也没有听到过了

初始布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            height:300px;
            background:lightblue;
        }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias ipsa assumenda laboriosam aliquid rem placeat beatae ratione delectus, commodi obcaecati quaerat, dolorem, neque consectetur iste quam minus temporibus. Asperiores, minus?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias ipsa assumenda laboriosam aliquid rem placeat beatae ratione delectus, commodi obcaecati quaerat, dolorem, neque consectetur iste quam minus temporibus. Asperiores, minus?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias ipsa assumenda laboriosam aliquid rem placeat beatae ratione delectus, commodi obcaecati quaerat, dolorem, neque consectetur iste quam minus temporibus. Asperiores, minus?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias ipsa assumenda laboriosam aliquid rem placeat beatae ratione delectus, commodi obcaecati quaerat, dolorem, neque consectetur iste quam minus temporibus. Asperiores, minus?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias ipsa assumenda laboriosam aliquid rem placeat beatae ratione delectus, commodi obcaecati quaerat, dolorem, neque consectetur iste quam minus temporibus. Asperiores, minus?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias ipsa assumenda laboriosam aliquid rem placeat beatae ratione delectus, commodi obcaecati quaerat, dolorem, neque consectetur iste quam minus temporibus. Asperiores, minus?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias ipsa assumenda laboriosam aliquid rem placeat beatae ratione delectus, commodi obcaecati quaerat, dolorem, neque consectetur iste quam minus temporibus. Asperiores, minus?
    </div>
</body>
</html>

加属性！

1. 显示的列数：column-count: 5;（宽度会自动设置）
2. 调整列间距：column-gap: 30px;
3. 列边框：column-rule:2px solid black;

再加属性！

4. 列高度统一属性：column-fill:auto;

5. 除此之外，column-width属性可以调整列宽，一般不常用，会与column-count产生冲突

6. 跨列属性：column-span，加给里面的小盒子，只有两个属性值all和none

多列布局只有六个属性。适合瀑布流的布局方式

注意：多列布局可能会把盒子中的内容分开显示，要给子盒子加属性：

禁止盒子内部折行属性：break-inside:avoid;

四、响应式布局

个人认为这个不是一个布局方法，是一个通用的概念，使内容自适应屏幕大小；或者根据屏幕的大小自适应内容

IBM的官方网站就是典型的响应式布局，网址：IBM 中国官方网站丨全球知名的人工智能解决方案和云平台公司

响应式布局既满足PC端也满足移动端

以下是一些基础知识

1. 布局响应时要有临界点（发生布局改变的临界点称之为断点）

2. 布局响应分为两种方式

PC优先：从PC端开始向下设计
移动优先：从移动端开始向上设计

3. 设计原则（理论）

模块中内容：挤压/拉伸（布局不变）
模块中内容：换行/平铺（布局不变）
模块中内容：删减/增加（布局不变）
模块位置变换（布局改变）
模块展示方式改变：隐藏/展开（布局改变）

4. 如何知道视口宽度？---> 媒体查询@media

1. 自适应

01. 宽高自适应

宽度自适应

设置方法：不写或者width:auto就是自适应

元素宽度的默认值为auto，width:auto与width:100%不一样，自适应情况下如果加padding、margin等等，宽度会自动调整，不会撑开滚动条。

应用：导航栏、通栏布局

高度自适应

设置方法：不写高度

元素高度的默认：height:auto;

盒子高度不确定，就不要写高度，要保持页面，可以加最小高度：min-height:500px

类似的，还有max-height、min-width、max-height

02. 浮动元素之父元素高度自适应（清浮动）

假设父盒子中有很多子盒子在浮动

方法一：

给父盒子加边框

缺点：宽高固定，元素过多时不能自适应

方法二：

在所有子元素的最后，增加一个空标签div（不能是行内元素，如：span），样式：clear:both;

缺点：不利于代码可读性

方法三：

父盒子溢出隐藏overflow:hidden（使父盒子成为bfc，让浮动元素计算高度）

缺点：文字溢出隐藏，二级菜单显示异常

上面的方法都不怎么靠谱

方法四：

万能清除浮动法：使用伪元素

.box::after{
    /* .box后加内容 */
    content:"";
    /* 清浮动 */
    clear:both;
    /* 转化为块级元素 */
    display: block;
    /* 不成文的规定：防止content中有内容 */
    width: 0;
    height: 0;
    visibility: hidden;
}

1. 伪元素：

伪元素不是DOM中真实存在的元素，它是用css创建的，依托于其它元素，使用双冒号（区别于伪类元素），用于对元素特定部分进行样式装修。

::before和::after必须配合content属性使用，（这两个默认行内元素）
伪元素默认是行内元素，可以通过display属性改变
伪元素无法通过js直接操作，因为它们不再DOM中

举例：

div::first-letter 用于给首字母设置样式

div::first-line 用于在首行设置样式

div::before{content:"内容"} 在前面插入内容

div::after{content:"内容"} 在后面插入内容

div::selection 用于设置用户选中的文本样式

2. display : none 和 visibility : hidden 区别：

display:none：没有脱离文档流，不占位隐藏（阿飘，看不见摸不着的）
visibility:hidden：占位隐藏（相当于给元素穿了隐身衣）

03. 窗口自适应

盒子根据窗口的大小进行改变

设置方法：html,body{height:100%}

2. css3媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或者纵向）为其设定css样式

媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成

可用于检测的媒体特性有width、height、color等等

01. 操作方式

对设备提出询问（称作表达式）开始

表达式结果为真->媒体查询中的css被应用；假则忽略

02. 结构（3部分）

示例：

/* 1000~max */
@media screen and (min-width:1000px){
    body{
        background-color: green;
    }
}

/* 320~1000 */
@media screen and (min-width:320px) and (max-width:1000px){
    body{
        background-color: lightblue;
    }
}

/* 0~320 */
@media screen and (max-width:320px){
    body{
        background-color: blue;
    }
}

解释：

@media all表示设备类型
and是一个关键字。其它关键字还包括not（排除某种设备）、only（限定某种设备）
(min-width:320px)，表示媒体特性，放在圆括号中，后面可以继续and条件

设备类型：css2.1定义了10种媒体类型

all：所有设备

aural：听觉设备

braille：点字触觉设备

handled：便捷设备，如手机、平板

print：打印预览图等

projection：投影设备

screen：常用。显示器、笔记本、移动端等设备

tty：打字机或终端等设备

tv：电视机等设备类型

embossed：盲文打印机

断点设置举例：

03响应式布局特点

设计特点：

面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题

缺点：

兼容各种设备工作量大，效率低下
代码累赘，会出现影藏无用的元素，加载时间长（爬虫也不喜欢）
折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

04横竖屏检测原理

宽<高竖屏
宽>高横屏

/* 竖屏 */
@media screen and(orientation: portrait) and (max-width:720px){
    
}
/* 横屏 */
@media screen and(orientation: landscape){
    
}

05案例：超绝小猫！

效果展示：

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .top>div {
            width: 49%;
        }

        .top img {
            width: 100%;
            height: 300px;
        }

        .top .right {
            display: flex;
            justify-content: space-between;
        }

        .top .right>div {
            width: 49%
        }

        @media screen and (max-width:768px) {
            .top>div {
                width: 100%;
            }
        }

        .bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .bottom>div {
            width: 23%;
            padding: 5px;
            box-sizing: border-box;
            border: 1px solid gray;

            margin-bottom: 10px;
            box-shadow: 0 0 4px black;
        }

        .bottom img {
            width: 100%;
        }

        @media screen and (max-width:1024px) and (min-width:768px) {
            .bottom>div {
                width: 31%;
            }
        }

        @media screen and (max-width:768px) and (min-width:450px) {
            .bottom>div {
                width: 48%;
            }
        }

        @media screen and (max-width:450px) {
            .bottom>div {
                width: 90%;
            }
        }
    </style>
</head>

<body>
    <!-- 
    top:flex, wrap
        >768px  左49%  右49%
        <768px  上100%  下100%

    bottom:flex, wrap
        >1024   23%*4
        <1024  >768   31%*3
        <768   >450   48%*2
        <450   90%*1
     -->
    <div class="top">
        <div class="left">
            <img src="https://img95.699pic.com/photo/50260/9095.jpg_wh300.jpg" alt="">
        </div>
        <div class="right">
            <div>
                <img src="https://img95.699pic.com/photo/30469/2116.jpg_wh860.jpg" alt="">
            </div>
            <div>
                <img src="https://ts3.tc.mm.bing.net/th/id/OIP-C.Gipno-GhWBJ7aRcpwKrLmQHaEo?rs=1&pid=ImgDetMain&o=7&rm=3"
                    alt="">
            </div>
        </div>
    </div>
    <div class="bottom">
        <div>
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.S6mPPCXdR8_MenRzTGyH0wHaHa?w=194&h=185&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                alt="">
            <p>超绝小猫</p>
        </div>
        <div>
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.S6mPPCXdR8_MenRzTGyH0wHaHa?w=194&h=185&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                alt="">
            <p>超绝小猫</p>
        </div>
        <div>
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.S6mPPCXdR8_MenRzTGyH0wHaHa?w=194&h=185&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                alt="">
            <p>超绝小猫</p>
        </div>
        <div>
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.S6mPPCXdR8_MenRzTGyH0wHaHa?w=194&h=185&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                alt="">
            <p>超绝小猫</p>
        </div>
        <div>
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.S6mPPCXdR8_MenRzTGyH0wHaHa?w=194&h=185&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                alt="">
            <p>超绝小猫</p>
        </div>
        <div>
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.S6mPPCXdR8_MenRzTGyH0wHaHa?w=194&h=185&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                alt="">
            <p>超绝小猫</p>
        </div>
        <div>
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.S6mPPCXdR8_MenRzTGyH0wHaHa?w=194&h=185&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                alt="">
            <p>超绝小猫</p>
        </div>
        <div>
            <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.S6mPPCXdR8_MenRzTGyH0wHaHa?w=194&h=185&c=7&r=0&o=5&dpr=1.5&pid=1.7"
                alt="">
            <p>超绝小猫</p>
        </div>
    </div>
</body>

</html>

3. css3新增单位

本节涉及“css像素与物理像素的知识”，不清楚的请先看前面“关于移动端布局”一章

未特殊说明本节均以iPhone6/7/8为例，物理像素宽度为750，dpr=2，

01. rem

em是相对单位，相对于父元素的字体大小
rem（r代表root）也是相对单位，相对于根元素（html）的字体大小

使用rem可以省去判断父元素大小的麻烦

未手动设置html字体大小时，1rem=16px

rem布局

rem布局可以使移动端等比例缩放

rem布局准备工作：（知识点都写代码中了，还有不生效时请刷新网页）

1.根据css像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        /* 假设设计稿是物理像素，宽750，所以css像素就是375px */
        html{
            /* 方便rem计算，375/100=3.75rem */
            font-size:100px;
        }
        
        body{
            /* 使继承body的font-size而不是html */
            font-size: 16px;
        }

        .box{
            /* width: 375px; */
            /* 方法一： */
            width:3.75rem;
        }
    </style>
    <script>
        //动态fontsize计算
        //计算出屏幕比iPhone6/7/8大多少倍，再乘以基准值100px
        // 方法一：
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 100 + 'px'
    </script>
</head>
<body>
    <div class="box">
        我是天才！
    </div>
</body>
</html>

2.根据物理像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        /* 假设设计稿是物理像素，宽750 */
        html{
            font-size:100px;
        }
        
        body{
            /* 使继承body的font-size而不是html */
            font-size: 16px;
        }

        .box{
            /* 方法二： */
            width: 7.5rem;
            height: 100px;
            background:yellow;
        }
    </style>
    <script>
        //动态fontsize计算
        //计算出屏幕比iPhone6/7/8大多少倍，再乘以基准值100px
        // 方法二：直接写物理像素750
        // font-size = 当前设备的css布局宽度/物理分辨率 * 基准font-size
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 100 + 'px'
    </script>
</head>
<body>
    <div class="box">
        我是天才！
    </div>
</body>
</html>

3. 使用插件自动转化

安装插件：搜索“px to rem”

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }

        /* 假设设计稿是物理像素，宽750 */
        html{
            /* 750/16=?---使用插件 */
            /* 改插件的基准值：文件-首选项-设置-输入px-找到对应位置修改 */
            font-size:16px;
        }

        .box{
            /* 快捷方式：750px-，会自动根据基准16px值转化为rem值 */
            /* 自动转化整个页面的px值为rem值，以16px为基准:打开命令面板(在页面右击，或者ctrl+shift+p)，输入cssrem */
            width: 46.875rem;
            height: 100px;
            background:yellow;
        }
    </style>
    <script>
        document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 * 16 + 'px'
    </script>
</head>
<body>
    <div class="box">
        我是天才！
    </div>
</body>
</html>

注意注意：如果使用第三方的iconfont，基准值的16px也要改为rem

02. vw与vh

vw和vh可以把rem布局中的js代码干掉~

vw和vh是视口单位，不同设备上所对应的px不一致

vh（view-height）：100vh==视口的高度
vw（view-width）：100vw==视口的宽度

计算，还是以iphone6/7/8为例

375px == 100vw

1px == 100/375 vw == 0.2667vw

只需要把html的font-size改为对应的vw值就可以了，其它的rem值不要动

关于100%和100vw

1. 无滚动条的时候：100vw==100%

2. 有滚动条的时候：100vw窗口大小包括滚动条；而100%代表除滚动条外，剩余的空间占满

五、网格布局Grid

比较主流的除了Flex，还有一个Grid。网格用Flex也能写，但是有时Grid会更方便

Flex布局是轴线布局，只能指定“项目”针对轴线的位置，可以看做一维布局
Grid布局则是将容器划分成“行”和“列”，产生单元格，然后确定“项目”所在的单元格，可以看作二维布局

另外，B站就是用的网格布局

开启容器的Grid布局：（容器将变为块级元素）

display:inline-grid：行内块级网格

display:grid：块级网格（常用）

概念：网格线！

使用检查工具时，会看到网格线，小方格即为“单元格”

容器属性

1. 行列划分

规定行属性：grid-template-row

规定列属性：grid-template-column

有多少行多少列就写多少个属性值，中间用空格连接。

无规定时，会根据内容按行填充满，如果内容过多，则会溢出网格

属性值支持：（可以混用）

01. 绝对值：px

    /* 3行3列 */    
    grid-template-rows: 200px 200px 200px;
    grid-template-columns: 200px 200px 200px;

02. 百分比

    /* 4行4列 */
    grid-template-rows: 25% 25% 25% 25%;
    grid-template-columns: 25% 25% 25% 25%;

03. 功能函数：repeat(a,b)

a代表重复的次数，或者auto-fill值（根据b的值自动分配占满）

b代表重复的数值或者重复的模式

    /* 4行4列 */
    grid-template-rows: repeat(3, 200px);
    grid-template-columns: repeat(auto-fill, 33.33%);

04. fr片段，相当于弹性盒的flex:1

    /* 左边的列100px,右边300px，中间自适应 */
    grid-template-columns: 100px 1fr 300px;

05. 最小最大值：minmax

字面意思。如果整体宽/高总和超出网格总宽/总高会溢出

    grid-template-columns: minmax(100px,200px) 300px 300px;

06. auto，自适应，与fr片段类同

    grid-template-columns: 100px 200px auto;

2. 间距

    /* 行间距 */
    row-gap: 10px;
    /* 列间距 */
    column-gap: 20px;
    /* 复合写法，行列间距相同时只写一次就可以 */
    gap:10px 20px;

注：旧版本中要加“grid-”前缀

3. 区域命名与合并

步骤1：划分区域，并指定名字

注意：

区域名字相同的会合并
形状只能是矩形

    grid-template-areas: 'a a c'
                         'd e f'
                         'g h i';

步骤2：规定项目属于哪个区域

.box div:nth-child(1){
    grid-area: a;
}

案例：风景画框

（图片均来源于网络）

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 600px;
            height: 300px;
            border: 5px solid gray;
            display: grid;
            /* 3行6列，自适应宽高 */
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(6, 1fr);
            /* 行列间距 */
            gap: 10px;
            /* 区域 划分 */
            grid-template-areas: 'a a a a b b'
                'a a a a e e'
                'c c d d e e';
        }

        .box img {
            width: 100%;
            height: 100%;
        }

        /* 指定项目所属区域 */
        .box img:nth-child(1) {
            grid-area: a;
        }

        .box img:nth-child(2) {
            grid-area: b;
        }

        .box img:nth-child(3) {
            grid-area: c;
        }

        .box img:nth-child(6) {
            grid-area: e;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="https://img95.699pic.com/photo/40249/9368.jpg_wh300.jpg!/fh/300/quality/90" alt="">
        <img src="https://bpic.588ku.com/illus_water_img/19/09/25/5ca2d7f730c765cb8031ff70ead2a0bc.jpg" alt="">
        <img src="https://ts1.tc.mm.bing.net/th/id/R-C.d25ba2db94931d5352eaf1f2987d92b3?rik=jHHdcvQhWX158g&riu=https%3a%2f%2f2.zoppoz.workers.dev%3a443%2fhttp%2fpic.616pic.com%2fys_bnew_img%2f00%2f49%2f85%2fjzEgRaTqAi.jpg&ehk=s58UyRzetgU4W%2fN%2fW9uNDdA1p%2fGh7v2UHll9zVlkpaI%3d&risl=&pid=ImgRaw&r=0"
            alt="">
        <img src="https://www.keaitupian.cn/cjpic/frombd/0/253/977961022/2876458025.jpg" alt="">
        <img src="https://img95.699pic.com/photo/32125/8670.jpg_wh300.jpg" alt="">
        <img src="https://img.tukuppt.com/png_preview/00/56/60/bXP5CxlXZk.jpg!/fw/780" alt="">
    </div>
</body>

</html>