第二章：第一节移动端布局

一、居中布局

居中布局通常分为两种，一种是固定宽高，另一种是非固定宽高。

非固定宽高通常都是靠里面的内容来撑起盒子的高度，内容时多时少。

【绝对定位】

*{padding:0;margin:0}

html,body{height: 100%;background:gray;}

body{position: relative;}

.center{

position: absolute;

top:0;left:0;right:0;bottom:0;/*紧贴着父元素的边*/

width: 70%;

height: 25%;

margin:auto;/*自动填充边距，令其居中*/

background:white;

}

优点：兼容性很好，现在多数网站都用的这个方法

【绝对定位+负边距】

适用范围：具体的数值

*{padding:0;margin:0}

html,body{height: 100%;background:gray;}

body{position: relative;}

.center{

position: absolute;

top:50%;

left:50%;

width: 300px;

height: 200px;

margin-top:-100px;/*上外边距为负的给定高度的一半，相对于父元素*/

margin-left:-150px;/*左外边距为负的给定宽度的一半，相对于父元素*/

background:white;

}

优点：兼容性良好。前两年多数网站都使用。

【绝对定位+平移】

平移是 CSS3 的属性，它可以按照自身尺寸的百分比来进行平移。

适用范围：未知宽高、固定宽高

*{padding:0;margin:0}

html,body{height: 100%;background:gray;}

body{position: relative;}

.center{

position: absolute;

top:50%;

left:50%;

padding:10px;/*防止内容与盒子过于贴合*/

transform: translate(-50%,-50%); /*相对于自身*/

background:white;

}

兼容性：IE9以上、谷歌4.0以上

【网格布局】

网格其实就是 Grid 布局，原理就是把父元素分割成一个个的小格子，类似于表格布局。

*{padding:0;margin:0}

html,body{height: 100%;background:gray;}

body{

display:grid;

place-items: center;

}

.center{

padding:10px;/*防止内容与盒子过于贴合*/

background:white;

}

兼容性：IE10以上

【弹性布局】

<div class="center">用内容撑开盒子用内容撑开盒子用内容撑开盒子用内容撑开盒子</div>

*{padding:0;margin:0}

html,body{height: 100%;background:gray;}

body{

display:flex;

}

.center{

margin:auto;

padding:10px;/*不用给宽高*/

background:white;

}

兼容性：IE10以上

【表格布局】

<div class="center">用内容撑开盒子用内容撑开盒子用内容撑开盒子用内容撑开盒子</div>

*{padding:0;margin:0}

html,body{height: 100%;background:gray;}

body{

width: 100vw;

height:100vh;/*令body全屏显示*/

display: table-cell;/*显示为表格的格子*/

text-align: center;

vertical-align: middle;

background:gray;

}

.center{

display: inline-block;

padding:10px;/*不用给宽高*/

background:white;

}

小结：

低版本浏览器：绝对定位

高版本浏览器、移动端：弹性布局

二、单列布局

适用范围：通常用于首页等引导页面，陈列展示各种信息，点击后便跳转至具体的详情页面

【外边距】

*{padding:0;margin:0}

html,body{

height: 100%;

background-color: gray;

}

.center{

width: 90%;

height: 100%;

margin:0 auto;

background:white;

}

【弹性布局】

*{padding:0;margin:0}

html,body{

height: 100%;

background-color: gray;

}

body{

display: flex;

justify-content: center;

}

.center{

flex-basis: 90%;

background:white;

}

【绝对定位+平移】

*{padding:0;margin:0}

html,body{

height: 100%;

background-color: gray;

}

body{

position: relative;

}

.center{

position: absolute;

left:50%;

width: 90%;

height: 100%;

transform: translate(-50%);

background-color: white;

}

【网格布局】

*{padding:0;margin:0}

html,body{

height: 100%;

background-color: gray;

}

body{

display: grid;

grid:1fr / 1fr 10fr 1fr;/*将其分成一行三列*/

}

.center{

grid-area: 1/2/2/3;/*将其定位于中间那个格子 1/2/3也可以*/

background-color: white;

}

【行内块元素】

*{padding:0;margin:0}

html,body{

height: 100%;

background-color: gray;

}

body{

text-align: center;

}

.center{

display: inline-block;

width: 90%;

height: 100%;

background-color: white;

}

三、双列布局

适用范围：以图片为主，图片占比较大，文字占比较小。常见于电商网站、视频网站等需要大量展示图片的网站。

【多列属性】

*{padding:0;margin:0}

html,body{

height: 100%;

background-color: gray;

}

body{

columns: 2;

column-gap: 10px;

}

div{

height: 100%;

background-color: white;

}

.left{margin-left: 10px;}

.right{margin-right: 10px;}

【左浮动】

*{padding:0;margin:0}

html,body{

height: 100%;

background-color: gray;

}

div{

width: 47%;

height: 100%;

background-color: white;

}

.left{

float:left;

margin-left: 2%;

}

.right{

float:right;

margin-right: 2%;

}

缺点：会导致父元素的坍塌。如果两列下面还有元素的话，需要清除浮动。

【绝对定位】

*{padding:0;margin:0}

html,body{

height: 100%;

background-color: gray;

}

body{

position: relative;

}

div{

position: absolute;

top:0;bottom:0;

background-color: white;

}

.left{

left: 2%;

right:51%;

}

.right{

left:51%;

right: 2%;

}

这里加起来不等于 100%，因为这里的百分号指的不是宽度，而是相对于父元素的距离。

缺点：要计算，比较麻烦

【弹性布局】

*{padding:0;margin:0}

html,body{

height: 100%;

background-color: gray;

}

body{

display: flex;

justify-content: space-evenly;

}

div{

flex-basis: 48%;

height: 100%;

background-color: white;

}

子元素一般会用 flex-basis 属性来表示在父元素所占的长度。

【网格布局】

*{padding:0;margin:0}

html,body{

height: 100%;

background-color: gray;

}

body{

display: grid;

grid-template-columns: repeat(2,10px 1fr) 10px;/*设置垂直方向为五列*/

/*gap:10px;列之间的间距为10像素*/

}

div{

height: 100%;

background-color: white;

}

.left{

grid-area: 1 / 2 / 2 / 3;

}

.right{

grid-area: 1 / 4 / 2 / 5;

}

4.吕形布局

吕字就是上面一个矩形，下面一个矩形。上面的矩形高度较小，通常固定在屏幕上，不会随着用户滑动手机而进行任何的移动。

目前流行的方案一种是直接默认显示上栏，另一种是随着屏幕的滑动而慢慢显示出上栏。

上面的矩形宽度充满屏幕，并提供一系列的按钮，每当点击时上方矩形按钮时下方矩形就会跳转到另一个页面，通常上方的一排按钮会有其中一个高亮显示，以告知用户当前所在的页面是哪一个。

就像爱奇艺APP一样

【固定定位】

<div class="top">无论你怎么滑动屏幕，我就是固定的不变的</div>

<ul>

</ul>

</div>

*{padding:0;margin:0}

html,body{

height: 100%;

}

.top{

position: fixed;

top:0;left:0;

width: 100%;

height: 80px;

color:white;

background:blue;

}

.main{

margin-top: 90px;

height: 1000px;

background:bisque

}

【非固定定位】上栏和主盒子都在屏幕不动

主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容

</div>

*{padding:0;margin:0}

html,body{

height: 100%;

}

.top{

height: 10%;

background:blue;

}

.main{

height: 90%;

background:skyblue;

overflow-y: auto;

}

div{color:white;font-size: 30px;}

【固定定位+渐隐渐显】

</div>

* {

padding: 0;

margin: 0

}

html,

body {

height: 100%;

}

.top {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 80px;

opacity: 0;

background: blue;

}

.main {

background: skyblue;

}

div {

color: white;

font-size: 30px;

}

//获取固定栏

const dom = document.getElementsByClassName('top')[0];

window.addEventListener('scroll', _ => {

//获取偏移值

const top = document.documentElement.scrollTop;

if (top <= 150) {

//对opacity作计算，透明度从起始到1随偏移值而改变

const opacity = top / 150;

//令上栏的透明度变成计算后的透明度

dom.style.opacity = opacity;

} else {

//在移动一定范围后令其完全不透明

dom.style.opacity = 1;

}

})

5.上下栏布局

上下两行都是宽度充满屏幕，高度固定。不会随着用户滚动屏幕的操作而进行移动。

【固定定位】

主盒子内主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容主盒子内容

</div>

*{padding:0;margin:0}

html,body{

height: 100%;

}

body{position: relative;}

.top{

position: fixed;

top:0;left:0;width: 100%;height: 80px;

background:blue;

}

.main{

margin:90px 0;

background:skyblue;

}

.bottom{

position: fixed;

bottom:0;left:0;width: 100%;height:80px;background:gray;

}

div{color:white;font-size: 30px;}

【非固定定位】

*{padding:0;margin:0}

html,body{

height: 100%;

}

.top{

height:10%;

background:blue;

}

.main{

height: 80%;

background-color: skyblue;

overflow-y: auto;

}

.bottom{

height:10%;

background:gray;

}

div{color:white;font-size: 30px;}

【固定定位+渐隐渐显】

* {padding: 0;margin: 0}

html,body {height: 100%;}

.top {position: fixed;top: 0;left: 0;

width: 100%;height: 80px;opacity: 0;background: blue;}

.main {background: skyblue;margin-bottom: 80px;}

.bottom{position: fixed;bottom:0;left:0;width:100%;height:80px;background:gray}

div {color: white;font-size: 30px;}

//获取固定栏

const dom = document.getElementsByClassName('top')[0];

window.addEventListener('scroll',_=>{

//获取偏移值

const top = document.documentElement.scrollTop;

if(top <= 150){

//对opacity作计算，透明度从起始到1随偏移值而改变

const opacity = top / 150;

//令上栏的透明度变成计算后的透明度

dom.style.opacity = opacity;

}else{

//在移动一定范围后令其完全不透明

dom.style.opacity = 1;

}

})

</script>

6.九宫格

它是一种小型三行三列的布局，通常集成在主要布局之内。

【网格布局】grid

<ul>

</ul>

* {

padding: 0;

margin: 0

}

html,body,ul{

height: 100%;

}

ul{

list-style: none;

display: grid;

grid:repeat(3, 1fr) / repeat(3, 1fr);

gap:3px;

}

li{

background:skyblue;

}

【表格布局】

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

* {

padding: 0;

margin: 0

}

html,body,ul{

height: 100%;

}

ul{

width: 100%;

list-style: none;

display: table;

border-spacing: 3px;

}

li{

display: table-row;

}

div{display: table-cell;background-color: skyblue;}

display: table; 相当于把元素的行为变成 <table></table>

display: inline-table; 相当于把元素的行为变成行内元素版的 <table></table>

display: table-header-group; 相当于把元素的行为变成 <thead></thead>

display: table-row-group; 相当于把元素的行为变成 <tbody></tbody>

display: table-footer-group; 相当于把元素的行为变成 <tfoot></tfoot>

display: table-row; 相当于把元素的行为变成 <tr></tr>

display: table-column-group; 相当于把元素的行为变成 <colgroup></colgroup>

display: table-column; 相当于把元素的行为变成 <col></col>

display: table-cell; 相当于把元素的行为变成 <td></td>或<th></th>.

display: table-caption; 相当于把元素的行为变成 <caption></caption>

【绝对定位】

<ul>

</ul>

* {

padding: 0;

margin: 0

}

html,body,ul{

height: 100%;

}

ul{

list-style: none;

}

li{

position: absolute;

width: 33%;

height: 33%;

background-color: red;

}

li:first-child{

top:0;left:0;

}

li:nth-child(2){

top:0;

left:33.33%;

}

li:nth-child(3){

top:0;

left:66.66%;

}

li:nth-child(4){

top:33.33%;

left:0;

}

li:nth-child(5){

top:33.33%;

left:33.33%;

}

li:nth-child(6){

top:33.33%;

left:66.66%;

}

li:nth-child(7){

top:66.66%;

left:0;

}

li:nth-child(8){

top:66.66%;

left:33.33%;

}

li:nth-child(9){

top:66.66%;

left:66.66%;

}

【弹性布局】

* {

padding: 0;

margin: 0

}

html,body,ul{

height: 100%;

}

ul{

list-style: none;

display: flex;

flex-flow: wrap;

}

li{

width: 33%;

height: 33%;

margin:.5px;

background:blue;

}

【左浮动】

* {padding: 0;margin: 0}

html,body,ul{height: 100%;}

ul{list-style: none;}

ul::after{display: block;

content:'';clear:both;}

li{width: 33%;height: 33%;float:left;margin:.5px;

background:skyblue;}

【有边框】

* {

padding: 0;

margin: 0

}

html,body,ul{

height: 100%;

}

ul{

list-style: none;

display: grid;

grid:repeat(3,1fr) / repeat(3,1fr);

gap:20px;

padding-right: 20px;

padding-bottom:20px;

box-sizing: border-box;

border-right: 2px solid black;

border-bottom: 2px solid black;

animation: clear-gap 5s ease-out infinite alternate;

}

li{

border-right: 2px solid black;

border-bottom: 2px solid black;

}

@keyframes clear-gap{

to{gap:0;padding:0}

}

【经典面试题】

要求如下：

边框九宫格的每个格子中的数字都要居中

鼠标经过时边框和数字都要变红

格子中的数字居中用flex实现

点击九宫格会弹出对应的数字

7.响应式布局

1.利用弹性盒子Flex、网格布局Grid或左浮动法Float等 CSS 属性来实现的在一列上根据屏幕大小的不同而进行自动换行

2.利用媒体查询来根据当前屏幕大小来运行相应的 CSS 代码

3.利用 JavaScript 来获取窗口宽高来动态操作 DOM 元素

【网格布局】

* {padding: 0;margin: 0}

html,body{height: 100%;}

ul{

list-style: none;

display: grid;

/*自动添加行数，列数自动填充，每列不低于100px*/

grid:auto-flow auto / repeat(auto-fit, minmax(100px, 1fr));

gap:5px;

}

li{height: 100px;background:skyblue}

【弹性布局】--推荐此法

* {padding: 0;margin: 0}

html,body{height: 100%;}

li{list-style: none;}

ul{

display: flex;

flex-flow: wrap;/*允许换行*/

}

li{margin:2px;background:skyblue;height:100px;flex:1;flex-basis: 100px;}

flex: 1;一定要写在flex-basis之前，不然的话就会变成这样：

【左浮动】--低版本浏览器使用

* {padding: 0;margin: 0}

html,body{height: 100%;}

ul{list-style: none;}

li{

width:100px;height:100px;

background:skyblue;

float:left;margin:2px}

ul::after{

content:'';

display: block;clear: both;

}

【媒体查询】

媒体：就是当前使用的各种设备(移动设备、固定设备等)

查询：通过查询当前属于何种设备以运行不同的代码

all所有设备

print用于打印机和打印预览

screen用于电脑屏幕、平板电脑、智能手机等

speech应用于屏幕阅读器等发声设备（可以屏蔽掉那些没有必要读出来的内容）

媒体属性----

max-width浏览器的最大宽度--------最大宽度就相当于≤（宽度小于等于）

min-width浏览器的最小宽度---------最小宽度就相当于≥（宽度大于等于）

max-height浏览器的最大高度-------最大高度就相当于≤（高度小于等于）

min-height浏览器的最小高度--------最小高度就相当于≥（高度大于等于）

乔布斯：人眼能分辨出的最大分辨率是300dpi，超过这个分辨率，人的眼睛就难以看出颗粒感

【逻辑操作符】

and用于将多个媒体查询规则组合成单条媒体查询，当每个查询规则都为真时则该条媒体查询为真，它还用于将媒体功能与媒体类型结合在一起。

not用于否定媒体查询，如果不满足这个条件则返回true，否则返回false。如果出现在以逗号分隔的查询列表中，它将仅否定应用了该查询的特定查询。如果使用not运算符，则还必须指定媒体类型

only仅在整个查询匹配时才用于应用样式，并且对于防止较早的浏览器应用所选样式很有用。当不使用only时，旧版本的浏览器会将screen and (max-width: 500px)简单地解释为screen，忽略查询的其余部分，并将其样式应用于所有屏幕。如果使用only运算符，则还必须指定媒体类型。在一些非常老旧的浏览器，如果你加了only，它就会直接忽略掉这条语句。

, (逗号)逗号用于将多个媒体查询合并为一个规则。逗号分隔列表中的每个查询都与其他查询分开处理。因此，如果列表中的任何查询为true，则整个media语句均返回true。换句话说，列表的行为类似于逻辑或or运算符。逗号其实就相当于或者的意思

第二章：第一节 移动端布局

第二章：第一节移动端布局