CSS布局方式汇总

最新推荐文章于 2024-09-03 22:48:27 发布

不写博客的前端不是好前端

最新推荐文章于 2024-09-03 22:48:27 发布

阅读量531

点赞数 1

分类专栏： css 文章标签： css css3 前端

本文链接：https://blog.csdn.net/yfm120750310/article/details/108020583

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

css的布局

css的基础知识
盒子模型
- 基本概念
- 盒子模型的margin重叠现象
表格布局
浮动布局
- float实现的两栏布局
- float实现三栏布局
绝对定位布局
flex布局
响应式布局

css的基础知识

display属性的可能值

属性值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似`<table>`），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 `<table>`），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似`<tbody>`）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 `<thead>`）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 `<tfoot>`）。
table-row	此元素会作为一个表格行显示（类似`<tr>`）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似`<colgroup>`）。
table-column	此元素会作为一个单元格列显示（类似 `<col>`）
table-cell	此元素会作为一个表格单元格显示（类似`<td>`和 `<th>`）
table-caption	此元素会作为一个表格标题显示（类似 `<caption>`）
inherit	规定应该从父元素继承 display 属性的值。

position 属性的可能值

属性值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

static

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS-position-static</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
    <style>
        .container{
            background-color: #868686;
            width: 100%;
            height: 300px;
        }
        .content{
            background-color: yellow;
            width: 100px;
            height: 100px;
            position: static;
            left: 10px;/* 这个left没有起作用 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
        </div>
    </div>
</body>
</html>

对 content 的 position 设定 static 后，left就失效了，而元素（content）就以正常的 normal flow 形式呈现。
效果图：
在这里插入图片描述

relative

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>CSS-position-relative</title>  
     <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
     <style>
            .container{
                 background-color: #868686;
                 width: 100%;
                 height: 300px;
             }
            .content_0{
                 background-color: yellow;
                 width: 100px;
                 height: 100px;               
             }
             .content_1{
                 background-color: red;
                 width: 100px;
                 height: 100px;
                 position: relative;/* 这里使用了relative  */            
             }
             .content_2{
                 background-color: black;
                 width: 100px;
                 height: 100px;               
             }
         </style>
     </head>
     <body>
         <div class="container">
             <div class="content_0">    
             </div>
             <div class="content_1">    
             </div>
             <div class="content_2">    
             </div>
         </div>   
 </body>
 </html>

相对于normal flow中的原位置来定位。
效果图：
在这里插入图片描述
我们为它添加left，top属性

.content_1 {
     background-color: red;
     width: 100px;
     height: 100px;
     position: relative;/* 这里使用了relative  */
     left: 20px;/* 这里设置了left和top */
     top: 20px;
 }

效果图：
在这里插入图片描述

absolute

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>CSS-position-static</title>
     <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.css">
     <style>
         .container{
             background-color: #868686;
             width: 100%;
             height: 300px;
             margin-top: 50px;
         }
         .content{
             background-color: red;
             width: 100px;
             height: 100px;
             position: absolute;
             top: 10px;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="content">    
         </div>
     </div>
 </body>
 </html>

生成绝对定位的元素，其相对于 static 定位以外的第一个父元素进行定位,会脱离normal flow。注意：是除了static外
因为 content 的父元素 container 没有设置 position，默认为 static，所以找到的第一个父元素是 body（），可以看成是元素（content）相对于 body 向下移动10px。
在这里插入图片描述

fixed

fixed相对于window固定，滚动浏览器窗口并不会使其移动，会脱离normal flow。

文档流和文本流

文档流是相对于盒子模型讲的，文本流是相对于文章段落讲的。
元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。
绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。

盒子模型

基本概念

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：

不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

盒子模型的margin重叠现象

我们通常会遇到这样一个问题，给一个div内部的div设置一个margin-top，结果它的父级跟着它一起下移了。
为什么会产生这样的效果呢？这要谈到css的盒模型margin的合并问题

css在盒模型中规定
In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

通常我们只关注了相邻div之间的margin合并而没有考虑父级和子集的合并。我们一定要注意，嵌套也属于毗邻的哟。

解决方案

让父级具有“包裹性”

将父级over-flow设为hidden

将父级display设为inline-block

将父级float或absolute

改变父级的结构

给父元素设置padding

给父元素设置透明border

表格布局

table 的特性决定了它非常适合用来做布局，并且表格中的内容可以自动居中，这是之前用的特别多的一种布局方式。

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>CSS 布局</title>
	</head>
	<style>
	.left{
	    background-color: red
	}
	.right{
	    background-color: green
	}
	</style>
	<body>
	    <table>
	        <tbody>
	            <tr>
	                <td class='left'> 左列 </td>
	                <td class='right'> 右列 </td>
	            </tr>
	        </tbody>
	    </table>
	</body>
</html>

浮动布局

浮动元素是脱离文档流的，但不脱离文本流。

那么它有什么特点呢？

对自身的影响：

float 元素可以形成块，如 span 元素。可以让行内元素也拥有宽和高，因为块级元素具有宽高
浮动元素的位置尽量靠上
尽量靠左（float:left）或右（float:right），如果那一行满足不了浮动元素的宽度要求，则元素会往下掉

对兄弟元素的影响：
不影响其他块级元素的位置
影响其他块级元素的文本
上面贴非 float 元素
旁边贴 float 元素或者边框

对父级元素的影响：
从布局上 “消失”
高度塌陷

高度塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 200px;
    background-color:red;
}

.left{
    background-color: yellow; 
    float: left;
    height: 50px;
    width:50px;
}
.right{
    background-color: yellow; 
    float: right;
    height: 50px;
    width:50px;
}
</style>
<body>
    <div class=container>       
        <span class=left>float</span>
        <span>我是字</span>
        <span class=right>float</span>
    </div>
    <div class="container" style="height: 200px;background: blue">      
    </div>
</body>
</html>

效果图
在这里插入图片描述
从图中可以看出，两个 float 元素虽然包含在第一个 container 中，但是却超出了第一个 container 的范围，在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

解决办法：

父元素设置 overflow: auto 或者 overflow: hidden
给父元素加一个 after 伪类

.container::after{
 	content:'';
    clear:both;
    display:block;
    visibility:hidden;
    height:0; 
}

在这里插入图片描述

float实现的两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 400px;
    height: 200px;
}

.left{
    background-color: yellow; 
    float: left;
    height: 100%;
    width:100px;
}
.right{
    background-color: red; 
    margin-left: 100px;
    height:100%;
}
.container::after{
    content: '';
    display: block;
    visibility: hidden;
    clear: both
}

</style>
<body>
    <div class=container>       
        <div class=left></div>
        <div class=right></div>
    </div>
</body>
</html>

上面代码中最重要的是 margin-left: 100px;，这一句将浮动元素的位置空了出来，所以右边栏里面的元素不会影响到浮动的 div。
这就是浮动布局的基本思想。
效果如下：
在这里插入图片描述

float实现三栏布局

三栏布局的思想是左边一个浮动元素，右边一个浮动元素，中间的元素要写在最后，因为中间元素假设有块级元素的话，会影响右边浮动元素的定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 布局</title>
</head>
<style>
*{
    margin: 0;
    padding: 0;
}
.container{
    width: 400px;
    height: 200px;
}

.left{
    background-color: yellow; 
    float: left;
    height: 100%;
    width:100px;
}
.right{
    background-color: green; 
    float: right;
    height: 100%;
    width:100px;
}
.middle{
    background-color: red; 
    margin-left: 100px;
    margin-right: 100px;
    height:100%;
}
.container::after{
    content: '';
    display: block;
    visibility: hidden;
    clear: both
}

</style>
<body>
    <div class=container>       
        <div class=left></div>
        <div class="middle"></div>
        <div class=right></div>
    </div>
</body>
</html>

效果图
在这里插入图片描述
因为浮动元素会把块级元素的位置空出来，所以这里右边的浮动元素把上面的位置空了下来，所以正确的写法应该是

<div class=container>       
   <div class=left></div>
   <div class=right></div>
   <div class="middle"></div>
</div>

效果图
在这里插入图片描述

绝对定位布局

flex布局

flex布局的概念

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
在这里插入图片描述

flex布局的步骤

容器指定为flex布局

.box{
  display: flex;
}

行内元素指定为flex布局

.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

容器属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

flex-direction

flex-direction属性决定主轴的方向（即项目的排列方向）。
四个值：
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
在这里插入图片描述

flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
它可能取三个值。
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
在这里插入图片描述

flex-flow

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

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content

justify-content属性定义了项目在主轴上的对齐方式。
它可能取五个值
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
在这里插入图片描述

align-items属性

align-items属性定义项目在交叉轴上如何对齐
它可能取五个值
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
在这里插入图片描述

align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
它可能取六个值
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
在这里插入图片描述

项目属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order

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

flex-grow

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
在这里插入图片描述

响应式布局

基本概念

屏幕分辨率
像素
PPI（Pixel Per Inch）：每英寸包括的像素数
DPI（Dot Per Inch）：即每英寸包括的点数
设备独立像素
设备像素比（dpr）
Meta Viewport

响应式布局适配方案

相对单位布局

css中相对的布局单位有以下几种：em、rem、vh、vw、vmin、vmax、%、calc()

em 相对于当前元素或当前元素继承来的字体的宽度，但是每个字母或汉字的宽度有可能是不一样的，那么一般来说，就是一个大写字母 M 的宽度（事实上，规范中有一个 x-height 概念，建议取 X 的高度，但并没有推荐绝对的计算执行标准，还需要看浏览器的实现，也有的地方采用 O 的高度）；一个非常容易出错的点在于：很多同学会认为 em 相对于父元素的字体大小，但是实际上取决于应用在什么 CSS 属性上。对于 font-size 来说，em 相对于父元素的字体大小；line-height 中，em 却相对于自身字体的大小。

rem 相对于根节点（html）的字体大小，根节点一个大写字母 M 的宽度（同上）

以 rem 为核心，诞生了淘宝的 flexible 响应式布局的方案。

vw 相对于视口宽度，100vw 就相当于一个视口宽度

vh 同理，1vh 表示视口高度的 1/100，100vh 就是一个视口高度

vmin 相对于视口的宽度或高度中较小的那个，也就是 1vw 和 1vh 取最小（Math.min(1vw, 1vh)）；vmax 相对于视口的宽度或高度中较大的那个，（Math.max(1vw, 1vh)）

calc 也是一个响应式布局神器，它使得 CSS 有了运算的能力

width: calc(100vw - 80px)

meta 标签

最简单的处理方式是加上一个 meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1">

其中，width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。

media query（媒体查询）

css2 允许用户根据特定的 media 类型定制样式，基本语法如下

@media screen and (max-width: 360px) {  
     html { font-size: 12px;    }
}

意思就是：当屏幕的宽度小于等于 360 px 的时候 html 的字体大小为 12 px。

有一个需要注意的点是范围大的要放在上面，范围小的放在下面。假设有两个样式，一个适应 360px 以下，一个适应 640px 以下，如果 360px 的放在上面，但是小于 360px 同样满足小于 640px，这就不是我们想要的结果了，所以范围大的需要放在上面。

基于相对单位 rem 的 flexible 布局

flex 布局

grid 布局

借助 JavaScript

p {
    height: var(--test-height);
}

function changePHeight (height)
    document.documentElement.style.setProperty('--test-height', `${height}px);
}

响应式布局案例

淘宝

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

禁用了用户缩放功能，使页面宽度和设备宽度对齐，一般这种操作也是移动端的响应式适配的标配。

页面根节点 HTML 元素上，显式设置了 font-size：

在这里插入图片描述
当改变浏览器大小时，html 的 font-size 会动态变化。采用 rem 作为相对单位的长宽数值，都会随着 resize 事件进行变化。

!function(e, t) {
    var n = t.documentElement,
        d = e.devicePixelRatio || 1;

    function i() {
        var e = n.clientWidth / 3.75;
        n.style.fontSize = e + "px"
    }
    if (function e() {
        t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e)
    }(), i(), e.addEventListener("resize", i), e.addEventListener("pageshow", function(e) {
        e.persisted && i()
    }), 2 <= d) {
        var o = t.createElement("body"),
            a = t.createElement("div");
        a.style.border = ".5px solid transparent", o.appendChild(a), n.appendChild(o), 1 === a.offsetHeight && n.classList.add("hairlines"), n.removeChild(o)
    }
}(window, document)

这是一个 IIFE，在 DOMContentLoaded、resize、pageshow 事件触发时，进行对 html 的 font-size 值设定，计算方式为：
font-size = document.documentElement.clientWidth / 3.75
当然淘宝实现响应式布局除了依靠 rem 以外，还大量运用了 flex 布局：
在这里插入图片描述

网易

网易的做法大体类似，同样采用了 rem 布局，但区别是网易并没有 JavaScript 介入计算 html 的 font-size，而是通过媒体查询和 calc 手段，“枚举”了不同设备下不同的 HTML font-size 值。
在这里插入图片描述
slider 宽度明显是 JavaScript 获取设备宽度后动态赋值的（图中为 414px），而高度采用了 rem 布局： 3.7 rem = 55.3px(calc(13.33333333vw) * 3.7)

Bootstrap 栅格

直接进行代码分析：

<div class="col-6 col-sm-3">
    ...
</div>
<div class="col-6 col-sm-3">
    ...
</div>
<div class="col-6 col-sm-3">
    ...
</div>
<div class="col-6 col-sm-3">
    ...
</div>

.col-6 class 和.col-sm-3 class样式在源码里面可以简单归纳（不完全）为：

.col-6 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.col-sm-3 {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%;
        -ms-flex: 0 0 25%;
            flex: 0 0 25%;
    max-width: 25%;
}

类似 flex: 0 0 25% 的声明，为了理解它，我们从 flex 属性入手：flex 属性是 flex-grow、flex-shrink 和 flex-basis 的简写（类似 backgroud 是很多背景属性的简写一样），它的默认值为 0 1 auto，后两个属性可选。语法格式如下：

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

flex-grow：属性定义项目的放大比例，默认为 0。我们看到 Bootstrap 代码里这个值一直为 0，即如果存在剩余空间，也不放大。
flex-shrink：属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
flex-basis：属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。

浏览器根据这个属性，计算主轴是否有多余空间，它可以设为跟 width 或 height 属性一样的值（比如 350px），则项目将占据固定空间。

Bootstrap 这里对 flex 设置为比例值，这也是响应式自然而然实现的基础。

如何做到在不同的屏幕比例下，只有一个属性发生作用呢？

我们在源码里发现 .col-sm-* 的样式声明全部在

 @media (min-width: 576px) {...}

的媒体查询中，这就保证了在 576px 宽度以上的屏幕，只有在媒体查询之外的 .col-* 样式声明发挥了作用。

在屏幕宽度小于 576px 时候，命中媒体查询，命中 .col-sm-3 的样式声明。它的优先级一定大于 .col-6（媒体查询优先级高），这时候就保证了移动端的样式“占上风”。

再结合 col-6 col-sm-3 的样式声明，我们可以简单总结一下：Bootstrap 主要是通过百分比宽度（max-width: 50%; max-width: 25%;），以及 flex 属性，再加上媒体查询，“三管齐下”实现了栅格化布局的主体。

横屏适配

横竖屏适配代码之javascript检查

window.addEventListener("resize", () => {
    if (window.orientation === 180 || window.orientation === 0) { 
        console.log('竖屏')
    };
    if (window.orientation === 90 || window.orientation === -90 ){ 
        console.log('横屏')
    }  
})

横竖屏适配代码之css实现

@media screen and (orientation: portrait) {
  /*竖屏样式代码*/
} 
@media screen and (orientation: landscape) {
  /*横屏样式代码.*/
}

其他常见的响应式布局话题

1px 问题

由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，所以在高清屏下看着1px总是感觉变胖了。

解决方法有以下几个：

1、在ios8+中当devicePixelRatio=2的时候使用0.5px

p{
    border:1px solid #000;
}
@media (-webkit-min-device-pixel-ratio: 2) {
     p{
         border:0.5px solid #000;
     }
}

2、伪元素 + transform 实现
原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。

.scale-1px{ position: relative; border:none; }

.scale-1px:after{

    content: '';

    position: absolute; bottom: 0;

    background: #000;

    width: 100%; height: 1px;

    -webkit-transform: scaleY(0.5);

    transform: scaleY(0.5);

     -webkit-transform-origin: 0 0;

    transform-origin: 0 0; 

}

3、viewport + rem 实现
在devicePixelRatio = 2 时，输出viewport：

在devicePixelRatio = 3 时，输出viewport：

使用box-shadow模拟边框

利用css 对阴影处理的方式实现0.5px的效果

.box-shadow-1px {
    box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

适配 iPhoneX 齐刘海

#define TabbarHeight     ([[UIApplication sharedApplication] statusBarFrame].size.height>20?83:49) // 适配iPhone x 底栏高度

_tabBarView.frame = CGRectMake(0, CurrentScreenHeight - TabbarHeight, CurrentScreenWidth, TabbarHeight);

图片自适应

1、inline-block设置

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

2、flex设置

div {
    width: 500px;
    height: 500px;
    /* 如果需要让图片各方位居中 */
    display: flex;
      justify-content: center;
      align-items: center;
}
/* 让图片自适应父级大小 */
img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

%的相对元素

position: absolute 中的 %
对于设置绝对定位 position absolute 的元素，我们可以使用 left right 表示其偏移量，我们把这个元素的祖先元素中第一个存在定位属性的元素成为参照物元素，其中的 % 是相对于参照物的，left 相对于参照物的 width，top 相对于这个参照物的 height。
position: relative 中的 %
对于设置相对定位 position relative 的元素，% 的数值是相对与自身的，left 相对于自己的 width，top 相对于自己的 height。
position: fixed 中的 %
对于设置固定定位 position fixed 的元素，% 的数值是相对于视口的，left 相对于视口的 width，top 相对于视口的 height。
margin 和 padding 的 %
margin 和 padding 当中的 % 非常特殊，它是相对于父元素的宽度。与父元素的高度无关。
border-radius 的 %
% 是相对于自身宽高的
background-size 的 %
background-size 的百分比和 border-radius 一样，也是相对于自身的宽高。
transform： translate
transform 的 translate 属性 % 是相对于自身的宽高，这也是我们上述代码能够实现居中的原因。
text-indent 的 %
text-indent 这个属性可以设置首行缩进，当使用 % 时，它是相对于父元素的 width。
font-size 的 %
相对于父元素的字体大小。
line-height 的 %
line-height 设置行高时，如果单位为 %，则相对于该元素的 font-size 数值。