第二章：第一節(jié) 移動(dòng)端布局

一、居中布局

居中布局通常分為兩種，一種是固定寬高裤纹，另一種是非固定寬高。

非固定寬高通常都是靠里面的內(nèi)容來(lái)?yè)纹鸷凶拥母叨壬ッ唬瑑?nèi)容時(shí)多時(shí)少鹰椒。

【絕對(duì)定位】

<div class="center"></div>

*{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;/*自動(dòng)填充邊距，令其居中*/

? ? background:white;

}

優(yōu)點(diǎn)：兼容性很好呕童，現(xiàn)在多數(shù)網(wǎng)站都用的這個(gè)方法

【絕對(duì)定位+負(fù)邊距】

適用范圍：具體的數(shù)值

<div class="center"></div>

*{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;/*上外邊距為負(fù)的給定高度的一半漆际，相對(duì)于父元素*/

? ? margin-left:-150px;/*左外邊距為負(fù)的給定寬度的一半，相對(duì)于父元素*/

? ? background:white;

}

優(yōu)點(diǎn)：兼容性良好夺饲。前兩年多數(shù)網(wǎng)站都使用奸汇。

【絕對(duì)定位+平移】

平移是 CSS3 的屬性施符，它可以按照自身尺寸的百分比來(lái)進(jìn)行平移。

適用范圍：未知寬高擂找、固定寬高

<div class="center"></div>

*{padding:0;margin:0}

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

body{position: relative;}

.center{

? ? position: absolute;

? ? top:50%;

? ? left:50%;

? ? padding:10px;/*防止內(nèi)容與盒子過(guò)于貼合*/

? ? transform: translate(-50%,-50%); /*相對(duì)于自身*/

? ? background:white;

}

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

【網(wǎng)格布局】

網(wǎng)格其實(shí)就是 Grid 布局，原理就是把父元素分割成一個(gè)個(gè)的小格子贯涎，類似于表格布局听哭。

<div class="center"></div>

*{padding:0;margin:0}

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

body{

? ? display:grid;

? ? place-items: center;

}

.center{

? ? padding:10px;/*防止內(nèi)容與盒子過(guò)于貼合*/

? ? background:white;

}

兼容性：IE10以上

【彈性布局】

<div class="center">用內(nèi)容撐開(kāi)盒子用內(nèi)容撐開(kāi)盒子用內(nèi)容撐開(kāi)盒子用內(nèi)容撐開(kāi)盒子</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">用內(nèi)容撐開(kāi)盒子用內(nèi)容撐開(kāi)盒子用內(nèi)容撐開(kāi)盒子用內(nèi)容撐開(kāi)盒子</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;

}

小結(jié)：

低版本瀏覽器：絕對(duì)定位

高版本瀏覽器、移動(dòng)端：彈性布局

二塘雳、單列布局

適用范圍：通常用于首頁(yè)等引導(dǎo)頁(yè)面欢唾，陳列展示各種信息，點(diǎn)擊后便跳轉(zhuǎn)至具體的詳情頁(yè)面

【外邊距】

<div class="center"></div>

*{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;

}

【絕對(duì)定位+平移】

*{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;

}

【網(wǎng)格布局】

*{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;/*將其定位于中間那個(gè)格子 1/2/3也可以*/

? ? background-color: white;

}

【行內(nèi)塊元素】

*{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;

}

三粉捻、雙列布局

適用范圍：以圖片為主礁遣，圖片占比較大，文字占比較小肩刃。常見(jiàn)于電商網(wǎng)站祟霍、視頻網(wǎng)站等需要大量展示圖片的網(wǎng)站。

【多列屬性】

<div class="left"></div>

<div class="right"></div>

*{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;}

【左浮動(dòng)】

*{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%;

}

缺點(diǎn)：會(huì)導(dǎo)致父元素的坍塌盈包。如果兩列下面還有元素的話沸呐，需要清除浮動(dòng)。

【絕對(duì)定位】

*{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%;

}

這里加起來(lái)不等于 100%呢燥，因?yàn)檫@里的百分號(hào)指的不是寬度崭添，而是相對(duì)于父元素的距離。

缺點(diǎn)：要計(jì)算叛氨，比較麻煩

【彈性布局】

*{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;

}

子元素一般會(huì)用?flex-basis?屬性來(lái)表示在父元素所占的長(zhǎng)度呼渣。

【網(wǎng)格布局】

*{padding:0;margin:0}

html,body{

? ? height: 100%;

? ? background-color: gray;

}

body{

? ? display: grid;

? ? grid-template-columns: repeat(2,10px 1fr) 10px;/*設(shè)置垂直方向?yàn)槲辶?/

? ? /*gap:10px;列之間的間距為10像素*/

}

div{

? ? height: 100%;

? ? background-color: white;

}

.left{

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

}

.right{

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

}

4.呂形布局

呂字就是上面一個(gè)矩形，下面一個(gè)矩形寞埠。上面的矩形高度較小屁置，通常固定在屏幕上，不會(huì)隨著用戶滑動(dòng)手機(jī)而進(jìn)行任何的移動(dòng)仁连。

目前流行的方案一種是直接默認(rèn)顯示上欄蓝角，另一種是隨著屏幕的滑動(dòng)而慢慢顯示出上欄。

上面的矩形寬度充滿屏幕饭冬，并提供一系列的按鈕使鹅，每當(dāng)點(diǎn)擊時(shí)上方矩形按鈕時(shí)下方矩形就會(huì)跳轉(zhuǎn)到另一個(gè)頁(yè)面，通常上方的一排按鈕會(huì)有其中一個(gè)高亮顯示昌抠，以告知用戶當(dāng)前所在的頁(yè)面是哪一個(gè)患朱。

就像愛(ài)奇藝APP一樣

【固定定位】

<div class="top">無(wú)論你怎么滑動(dòng)屏幕，我就是固定的不變的</div>

<div class="main">

? ? <ul>

? ? ? ? <li>文字</li>

? ? ? ? <li>文字</li>

? ? ? ? <li>文字</li>

? ? ? ? <li>文字</li>

? ? ? ? <li>文字</li>

? ? ? ? <li>文字</li>

? ? </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

}

【非固定定位】上欄和主盒子都在屏幕不動(dòng)

<div class="top">我也不變</div>

<div class="main">

? ? 主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容

</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 class="top">我也不變</div>

<div class="main">

? ? 主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容

</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) {

? ? ? ? //對(duì)opacity作計(jì)算扰魂，透明度從起始到1隨偏移值而改變

? ? ? ? const opacity = top / 150;

? ? ? ? //令上欄的透明度變成計(jì)算后的透明度

? ? ? ? dom.style.opacity = opacity;

? ? } else {

? ? ? ? //在移動(dòng)一定范圍后令其完全不透明

? ? ? ? dom.style.opacity = 1;

? ? }

})

5.上下欄布局

上下兩行都是寬度充滿屏幕麦乞，高度固定蕴茴。不會(huì)隨著用戶滾動(dòng)屏幕的操作而進(jìn)行移動(dòng)。

【固定定位】

<div class="top">固定不變</div>

<div class="main">

? ? 主盒子內(nèi)主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容主盒子內(nèi)容

</div>

<div class="bottom">固定不變</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;}

<script>

//獲取固定欄

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

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

? ? //獲取偏移值

? ? const top = document.documentElement.scrollTop;

? ? if(top <= 150){

? ? ? ? //對(duì)opacity作計(jì)算姐直，透明度從起始到1隨偏移值而改變

? ? ? ? const opacity = top / 150;

? ? ? ? //令上欄的透明度變成計(jì)算后的透明度

? ? ? ? dom.style.opacity = opacity;

? ? }else{

? ? ? ? //在移動(dòng)一定范圍后令其完全不透明

? ? ? ? dom.style.opacity = 1;

? ? }

})

</script>

6.九宮格

它是一種小型三行三列的布局倦淀，通常集成在主要布局之內(nèi)。

【網(wǎng)格布局】grid

<ul>

? ? <li></li>

? ? <li></li>

? ? <li></li>

? ? <li></li>

? ? <li></li>

? ? <li></li>

? ? <li></li>

? ? <li></li>

? ? <li></li>

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

? ? ? ? <div></div>

? ? ? ? <div></div>

? ? ? ? <div></div>

? ? </li>

? ? <li>

? ? ? ? <div></div>

? ? ? ? <div></div>

? ? ? ? <div></div>

? ? </li>

? ? <li>

? ? ? ? <div></div>

? ? ? ? <div></div>

? ? ? ? <div></div>

? ? </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; 相當(dāng)于把元素的行為變成 <table></table>

display: inline-table; 相當(dāng)于把元素的行為變成行內(nèi)元素版的 <table></table>

display: table-header-group; 相當(dāng)于把元素的行為變成 <thead></thead>

display: table-row-group; 相當(dāng)于把元素的行為變成 <tbody></tbody>

display: table-footer-group; 相當(dāng)于把元素的行為變成 <tfoot></tfoot>

display: table-row; 相當(dāng)于把元素的行為變成 <tr></tr>

display: table-column-group; 相當(dāng)于把元素的行為變成 <colgroup></colgroup>

display: table-column; 相當(dāng)于把元素的行為變成 <col></col>

display: table-cell; 相當(dāng)于把元素的行為變成 <td></td>或<th></th>.

display: table-caption; 相當(dāng)于把元素的行為變成 <caption></caption>

【絕對(duì)定位】

<ul>

? ? <li></li>

? ? <li></li>

? ? <li></li>

? ? <li></li>

? ? <li></li>

? ? <li></li>

? ? <li></li>

? ? <li></li>

? ? <li></li>

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

}

【左浮動(dòng)】

* {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}

}

【經(jīng)典面試題】

要求如下：

邊框九宮格的每個(gè)格子中的數(shù)字都要居中

鼠標(biāo)經(jīng)過(guò)時(shí)邊框和數(shù)字都要變紅

格子中的數(shù)字居中用flex實(shí)現(xiàn)

點(diǎn)擊九宮格會(huì)彈出對(duì)應(yīng)的數(shù)字

7.響應(yīng)式布局

1.利用彈性盒子Flex声畏、網(wǎng)格布局Grid或左浮動(dòng)法Float等 CSS 屬性來(lái)實(shí)現(xiàn)的在一列上根據(jù)屏幕大小的不同而進(jìn)行自動(dòng)換行

2.利用媒體查詢來(lái)根據(jù)當(dāng)前屏幕大小來(lái)運(yùn)行相應(yīng)的 CSS 代碼

3.利用 JavaScript 來(lái)獲取窗口寬高來(lái)動(dòng)態(tài)操作 DOM 元素

【網(wǎng)格布局】

* {padding: 0;margin: 0}

html,body{height: 100%;}

ul{

? ? list-style: none;

? ? display: grid;

? ? /*自動(dòng)添加行數(shù)撞叽，列數(shù)自動(dòng)填充，每列不低于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之前插龄，不然的話就會(huì)變成這樣：

【左浮動(dòng)】--低版本瀏覽器使用

* {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;

}

【媒體查詢】

媒體：就是當(dāng)前使用的各種設(shè)備(移動(dòng)設(shè)備愿棋、固定設(shè)備等)

查詢：通過(guò)查詢當(dāng)前屬于何種設(shè)備以運(yùn)行不同的代碼

all所有設(shè)備

print用于打印機(jī)和打印預(yù)覽

screen用于電腦屏幕、平板電腦均牢、智能手機(jī)等

speech應(yīng)用于屏幕閱讀器等發(fā)聲設(shè)備（可以屏蔽掉那些沒(méi)有必要讀出來(lái)的內(nèi)容）

媒體屬性----

max-width瀏覽器的最大寬度--------最大寬度就相當(dāng)于≤（寬度小于等于）

min-width瀏覽器的最小寬度---------最小寬度就相當(dāng)于≥（寬度大于等于）

max-height瀏覽器的最大高度-------最大高度就相當(dāng)于≤（高度小于等于）

min-height瀏覽器的最小高度--------最小高度就相當(dāng)于≥（高度大于等于）

喬布斯：人眼能分辨出的最大分辨率是300dpi糠雨，超過(guò)這個(gè)分辨率，人的眼睛就難以看出顆粒感

【邏輯操作符】

and用于將多個(gè)媒體查詢規(guī)則組合成單條媒體查詢徘跪，當(dāng)每個(gè)查詢規(guī)則都為真時(shí)則該條媒體查詢?yōu)檎娓恃€用于將媒體功能與媒體類型結(jié)合在一起。

not用于否定媒體查詢垮庐，如果不滿足這個(gè)條件則返回true松邪，否則返回false。 如果出現(xiàn)在以逗號(hào)分隔的查詢列表中哨查，它將僅否定應(yīng)用了該查詢的特定查詢逗抑。 如果使用not運(yùn)算符，則還必須指定媒體類型

only僅在整個(gè)查詢匹配時(shí)才用于應(yīng)用樣式寒亥，并且對(duì)于防止較早的瀏覽器應(yīng)用所選樣式很有用邮府。 當(dāng)不使用only時(shí)，舊版本的瀏覽器會(huì)將screen and (max-width: 500px)簡(jiǎn)單地解釋為screen护盈，忽略查詢的其余部分挟纱，并將其樣式應(yīng)用于所有屏幕。 如果使用only運(yùn)算符腐宋，則還必須指定媒體類型。在一些非常老舊的瀏覽器檀轨，如果你加了only胸竞，它就會(huì)直接忽略掉這條語(yǔ)句。

, (逗號(hào))逗號(hào)用于將多個(gè)媒體查詢合并為一個(gè)規(guī)則参萄。 逗號(hào)分隔列表中的每個(gè)查詢都與其他查詢分開(kāi)處理卫枝。 因此，如果列表中的任何查詢?yōu)閠rue讹挎，則整個(gè)media語(yǔ)句均返回true校赤。 換句話說(shuō)吆玖，列表的行為類似于邏輯或or運(yùn)算符。逗號(hào)其實(shí)就相當(dāng)于或者的意思

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
禁止轉(zhuǎn)載马篮，如需轉(zhuǎn)載請(qǐng)通過(guò)簡(jiǎn)信或評(píng)論聯(lián)系作者沾乘。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市浑测，隨后出現(xiàn)的幾起案子翅阵，更是在濱河造成了極大的恐慌，老刑警劉巖迁央，帶你破解...
    沈念sama閱讀 211,348評(píng)論 6贊 491
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件掷匠，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡岖圈，警方通過(guò)查閱死者的電腦和手機(jī)讹语，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,122評(píng)論 2贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蜂科，“玉大人顽决，你說(shuō)我怎么就攤上這事〕缟悖” “怎么了擎值？”我有些...
    開(kāi)封第一講書人閱讀 156,936評(píng)論 0贊 347
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長(zhǎng)逐抑。 經(jīng)常有香客問(wèn)我鸠儿，道長(zhǎng)，這世上最難降的妖魔是什么厕氨？ 我笑而不...
    開(kāi)封第一講書人閱讀 56,427評(píng)論 1贊 283
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任进每，我火速辦了婚禮，結(jié)果婚禮上命斧，老公的妹妹穿的比我還像新娘田晚。我一直安慰自己，他們只是感情好国葬，可當(dāng)我...
    茶點(diǎn)故事閱讀 65,467評(píng)論 6贊 385
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布贤徒。 她就那樣靜靜地躺著，像睡著了一般汇四。 火紅的嫁衣襯著肌膚如雪接奈。 梳的紋絲不亂的頭發(fā)上，一...
    開(kāi)封第一講書人閱讀 49,785評(píng)論 1贊 290
  • 城市分裂傳說(shuō)
    那天通孽，我揣著相機(jī)與錄音序宦，去河邊找鬼。 笑死背苦，一個(gè)胖子當(dāng)著我的面吹牛互捌，可吹牛的內(nèi)容都是我干的潘明。 我是一名探鬼主播，決...
    沈念sama閱讀 38,931評(píng)論 3贊 406
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼秕噪，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼钳降！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起巢价，我...
    開(kāi)封第一講書人閱讀 37,696評(píng)論 0贊 266
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤牲阁，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后壤躲，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體城菊，經(jīng)...
    沈念sama閱讀 44,141評(píng)論 1贊 303
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,483評(píng)論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年碉克，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了凌唬。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,625評(píng)論 1贊 340
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡漏麦，死狀恐怖客税，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情撕贞，我是刑警寧澤更耻，帶...
    沈念sama閱讀 34,291評(píng)論 4贊 329
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站捏膨，受9級(jí)特大地震影響秧均，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜号涯，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,892評(píng)論 3贊 312
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一目胡、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧链快，春花似錦誉己、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 30,741評(píng)論 0贊 21
  • 一樁弒父案巨双，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至霉祸，卻和暖如春炉峰，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背脉执。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 31,977評(píng)論 1贊 265
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留戒劫，地道東北人半夷。 一個(gè)月前我還...
    沈念sama閱讀 46,324評(píng)論 2贊 360
  • 代替公主和親
    正文 我出身青樓婆廊，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親巫橄。 傳聞我的和親對(duì)象是個(gè)殘疾皇子淘邻，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,492評(píng)論 2贊 348