html笔记（四）弹性盒+响应式
| 一、彈性盒 | 1. 標準盒模型和怪異盒模型 2. 彈性盒dipalay 3. 與display配合使用的其他屬性 4. 彈性盒的對齊方式 5. 彈性盒的默認特性 |
| 二、響應式布局 | 1. 媒體查詢 2. 怎樣使用媒體查詢 3. 優(yōu)缺點以及使用場景 4. Meta 標簽的定義 5. 常見的屬性操作 |
| 三、多列布局 | |
| 四、移動端布局 | 1. 百分比彈性布局 2. rem 3. vw、vh |
一、彈性盒
css 中盒子模型分為兩種： w3c 標準（標準盒模型） 和 IE標準盒子模型（怪異盒模型）；
通過 box-sizing: content-box（默認，標準盒模型）/border-box（怪異盒模型）; 來轉換。
- 大多數(shù)瀏覽器在采用 w3c 標準模型，而 IE 中采用 Microsoft 自己的標準；
- 怪異模型是“部分瀏覽器在支持 w3c 標準的同時還保留了原來的解析模式”，怪異模式主要表現(xiàn)在 IE 內(nèi)核的瀏覽器。
- 當沒有 doctype 時（即沒有<!DOCTYPE html>聲明時），IE6 會觸發(fā)怪異模式；。
1. 標準盒模型 和 怪異盒模型（IE 盒子模型）：
（1）在標準模式下，一個塊的總寬度 = width + margin(左右) + padding(左右) + border(左右)；
（2）在IE盒子模型下，一個塊的總寬度= width + margin(左右)（即width已經(jīng)包含了padding和border值）；
（3）示例：給 div標簽 和 p標簽 設置一樣的寬高，但是 div標簽 有 border、padding 值。
2. 彈性盒 display
（兼容寫法：-webkit-display:）設置在父元素上。使用彈性盒后， float、vertical-align、多列等都樣式都無效；
display 的屬性值：
- box，將對象作為彈性伸縮盒顯示。（伸縮盒最老版本）；
- inline-box，將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最老版本）；
- flexbox，將對象作為彈性伸縮盒顯示。（伸縮盒過渡版本）；
- inline-flexbox，將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒過渡版本）；
- flex， 將對象作為彈性伸縮盒顯示。（伸縮盒最新版本）；
- inline-flex，將對象作為內(nèi)聯(lián)塊級彈性伸縮盒顯示。（伸縮盒最新版本）；
3. display 配合使用的其他屬性：
（1）flex-direction:，排列方式（寫在父元素身上）；
兼容寫法： -webkit-flex-direction:。
- row，默認的排列方式，橫向從左到右排列（左對齊） ；
- row-reverse，反轉橫向排列（右對齊，從后往前排，最后一項排在最前面）；
- column，縱向排列；
- column-reverse，反轉縱向排列，從后往前排，最后一項排在最上面）；
（2）order:，彈性盒子子元素順序（設置在子元素上）
- 負數(shù)靠前；（越小越前）
- 0為原始位置；
- 正整數(shù)靠后（越大越后）；
給子元素設置了order，order值越大，順序越靠后；
<style>*{margin:0; padding:0;}ul{display: flex;background:#9f9;}li{list-style: none;width: 50px;height: 50px;border:1px solid #000;}ul.one li:nth-child(1){order:1}ul.one li:nth-child(2){order:0}ul.one li:nth-child(3){order:13}ul.one li:nth-child(4){order:-2}ul.one li:nth-child(5){order:-1} </style> <body><ul class="one"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul> </body>（3）flex-grow:，彈性盒分配剩余空間（設置在子元素上）
- 0 為默認；
- 分配提成（數(shù)字）；
- 分配剩余空間比例 = flex-grow值/所有flex-grow值之和。
（4）flex-shrink:，檢索彈性盒的收縮比率（子元素設置）；
- 1 默認；
- 數(shù)字
設置flex-shrink后，所有子元素寬度 = 原寬度 - 超出寬度*收縮占比；
- 收縮占比=flex-shrink/(所有設置flex-shrink的值之和 + 沒有設置flex-shrink的子元素個數(shù))；沒有設置flex-shrink的值=1。
（5）flex-basis:，檢索彈性盒伸縮準值（子元素設置）；
- auto 默認；
- 數(shù)字px；
設置了flex-basis:之后子元素的寬度=原寬度*伸縮比例。
- 伸縮比例=子元素寬度總和/父元素寬度。
（6）flex:，伸縮性（設置在子元素上）
可以設置3個值，flex屬性是 flex-grow，flex-shrink 和 flex-basis 這3個CSS屬性的縮寫，推薦使用該屬性，而不是單獨書寫；
- 設置一個值：分配剩余空間；
- 設置三個值：0 0 百分比分配；
（7）flex-wrap:，伸縮換行（寫在父元素上）；
- nowrap;，當子元素溢出父容器時不換行；
- wrap; ，當子元素溢出父容器時自動換行；
- wrap-reverse;，反轉 wrap 排列；
（8）flex-flow:，伸縮流方向與換行（適用于父類容器上）；
- flex-direction;????
- flex-wrap;????
4. 彈性盒的對齊方式：
（1）justify-content，主軸橫向對齊（設置在父元素上）
- flex-start;，左對齊；
- flex-end;，右對齊；
- center;，居中對齊；
- space-between;，分開對齊；
- space-around;，分開左右邊距對齊；
（2）align-content:，主軸縱向對齊（設置在父類容器上，不常用）；
- flex-start;，上對齊；
- flex-end;，下對齊；
- center;，居中對齊；
- baseline;，基線對齊；
- strecth;，上下拉升對齊；
（3）側軸對齊： align-items:（設置在父上，常用）、 align-self:（設置在子，讓某個子元素單獨布局）；
- flex-start;，上對齊；
- flex-end;，右對齊；
- center;，居中對齊；
- baseline;，基線對齊；
- strecth;，上下拉升對齊；
5. 彈性盒的默認特性：
（1）默認流向為橫向；
（2）若不寫寬度，默認寬度為 0 或者被內(nèi)容撐開；
（3）彈性盒的高度，若不設置，高度與父元素一樣高；
（4）彈性盒默認不換行；
二、 響應式布局
1. 媒體查詢
2. 怎樣使用 media（媒體查詢）
在CSS文件中引入媒體查詢：
- 媒體查詢寫在CSS樣式代碼的最后，CSS是層疊樣式表，在同一特殊性下，靠后的的樣式會覆蓋前面的樣式；
（1）在頁面內(nèi)使用
需要先在 html 文檔中添加以下代碼，用來兼容移動設備的顯示效果：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
- width=device-width：寬度等于當前設備的寬度；
- initial-scale=1：初始的縮放比例(默認為1)；
- maximum-scale=1：允許用戶縮放到得最大比例(默認為1)；
- user-scalable=no：用戶不能手動縮放；
（2）媒體查詢外聯(lián) css 語法：
① <link rel="stylesheet" href="wide.css" media="screen and (min-width:1024px)" />，當屏幕寬度（最小寬度為1024px）大于等于1024px 時引入 wide.css的樣式。
② <link rel="stylesheet" href="mobile.css" media="screen and (max-width:320px)" />，小于等于 320px 時（最大寬度是 320px）使用 mobile.css 的樣式。
③<link rel=“stylesheet” href="medium.css" media="screen and (max-width:1024px) and (min-width:320px)" />，在 320px 和 1024px 之間的使用 medium.css的樣式。
3. 優(yōu)缺點以及使用場景：
（1）優(yōu)點：
① 多終端視覺和操作體驗非常風格統(tǒng)一；
② 兼容當前及未來新設備；
③ 響應式 web 設計中的大部分技術可以用在 WebApp 開發(fā)中；
④ 節(jié)約了開發(fā)成本，維護成本也降低很多；
（2） 缺點：
① 兼容性：低版本瀏覽器兼容性有問題；
② 移動帶寬流量：相比較手機定制網(wǎng)站，流量稍大；
③ 但比較加載一個完整 pc 端網(wǎng)站顯然是小得多；
④ 代碼累贅，會出現(xiàn)隱藏無用的元素，加載時間加長；
⑤ 兼容各種設備工作量大；
（3）適用場景：
① 對于重內(nèi)容的網(wǎng)站，例如形象展示，則比較適合使用響應式web設計；
② 對于重功能的網(wǎng)站，如電子商務類，則更推薦使用獨立移動網(wǎng)站；
4. Meta 標簽定義：
（1）使用 viewport meta 標簽在手機瀏覽器上控制布局：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
（2）隱藏蘋果瀏覽器的工具欄和菜單欄。 全屏顯示：
<meta name="apple-mobile-web-app-capable" content="yes" />
（3）設置Web App的狀態(tài)欄（屏幕頂部欄）的樣式：
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
5. 常見的屬性操作：
（1）orientation: 設備方向；
（2）portrait: 監(jiān)聽豎屏，指定輸出設備中的頁面可見區(qū)域高度大于或等于寬度；
（3）landscape: 監(jiān)聽橫屏（除portrait值情況外，都是landscape）；
（4）min-width:、max-width: 適用于全部屏幕（手機和網(wǎng)頁）的查詢；
（5）min-device-width:、max-device-width: 只用于手機分辨查詢；
三、多列布局
通過 CSS3，您能夠創(chuàng)建多個列來對文本進行布局 - 就像報紙那樣。
Internet Explorer 9 以及更早的版本不支持多列屬性；
多列屬性
（1）創(chuàng)建多列： column-count: 數(shù)字;屬性規(guī)定元素應該被分隔的列數(shù)；
（2）規(guī)定列之間的間隔： column-gap: 數(shù)字px; 屬性規(guī)定列之間的間隔；
（3）列規(guī)則： column-rule:數(shù)字px outset/solid/double/dotted/dashed #顏色 屬性設置列之間的寬度、樣式和顏色規(guī)則；
- Internet Explorer 10 和 Opera 支持多列屬性。
- Firefox 需要前綴 -moz-。
- Chrome 和 Safari 需要前綴 -webkit-。
四、移動端頁面布局
移動端布局優(yōu)缺點：
（1）移動端基本都兼容 h5、css3，所以可以放心的使用 css3 的樣式來布局；
（2）移動端頁面一般都不大，所以標簽使用的并不多，開發(fā)時間沒有 web 端長；
因為無法使用正常尺寸，不能直接寫像素，通常用 2 種方式來寫；
1. 百分比彈性布局：
移動端頁面基本上和 web 端區(qū)別不大，但要考慮到移動端屏幕尺寸不大并且都是全屏布局，而且尺寸都不一樣，所以不能使用網(wǎng)頁的 固定尺寸 來布局，需要使用 百分比 來布局；
（1）寬度的百分比是 屏幕寬度 的百分比數(shù)；
（2）高度的百分比是 父元素高度的百分比數(shù)。
2. rem
（1）rem 是永遠獲取 html 的 font-size 的值。
例：html{font-size:100px;} 那么所有子元素 1rem = 100px;
（2）通過 js 獲取屏幕尺寸，制定出一個系數(shù)，去改變 html 的 font-size 值。
例：當屏幕尺寸是 320px ，我想設置 1rem = 10%，那么就設置 html 的 font-size:32px; 通過 js 來設置屏幕尺寸÷10；
3. vw，vh
vw，vh 永遠跟隨屏幕大小變化而變化。
（1）100vw = 屏幕的寬度；1vw = 1% 屏幕尺寸；
（2）這樣更直觀的獲取百分比，但是少部分手機不支持，需要自己把控； vw 是為了的趨勢。
（3）使用：html{font-size: 100÷設計圖寬度的1%vw;}
其他元素： header{height:高度÷100rem;}
html筆記（一）html4+css2.0、css基礎和屬性、盒模型
html筆記（二）html4+css2.0（元素類型、css精靈、寬度自適應、BFC、瀏覽器相關概述、css統(tǒng)籌）
html筆記（三）html5+css3（html5、css3、文字相關）
總結
以上是生活随笔為你收集整理的html笔记（四）弹性盒+响应式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue打包后，font格式错误
- 下一篇： echarts地图在ie浏览器上不显示