Web學習路線筆記（九）css3：彈性盒子+響應式布局

第九天

1.多列（分欄）

1）column-count 規定元素應該被分隔得列數

文法：column-count:number|auto;

p{column-count:3} 效果如下圖

2）column-gap 規定列之間的間隔

column-gap:length|normal;

3）column-rule 設定所有column-rule-*的簡寫屬性

a.column-rule-style :設定線形

none:定義沒有線

hidden:隐藏線

dotted: 點線

solid : 實線

double : 雙線

注意：3d線型在分欄中沒有效果

groove 定義3d groove 線，3d溝槽效果

ridge : 3d 脊狀效果

inset : 3d左上角陰影效果

outset : 3d右下角陰影效果

b.column-rule-color:設定分隔線的顔色

c.column-rule-width:設定分隔線的寬度

複合寫法：

coulumn-rule: width style color;

4）column-width 規定列的寬度（内容的寬度）

5）columns 複合寫法，規定設定 column-width 和 column-count

columns: width count;

2.彈性布局（flex布局）

彈性盒子是css3的一種新的布局模式

css3彈性盒（Flexible Box或 flexbox）,是一種當頁面需要适應不同的螢幕大小以及裝置類型時，確定元素擁有恰當的行為的布局方式。

引入彈性布局模型的目的是提供一種更加有效的方式對一個容器中的子元素進行排列、對齊和配置設定空白空間。

2.1 彈性盒子的定義方式

彈性容器通過設定 display:flex 或者 display:inline-flex将其定義為彈性容器。

彈性盒子隻定義了彈性子元素如何在彈性容器内布局。

彈性子元素通常在彈性盒子内一行顯示。預設情況每個容器隻有一行。

2.2常用的屬性

1）flex-direction、justify-content、align-item、flex-grow和flex.

1.flex-direction

參數: row 橫向從左到右排列（左對齊），預設的排序方式

row-reverse:反向橫向排列（右對齊），從後往前排，最後一項排在最前面

column:縱向排列

column-reverse:反轉縱向排列，從後往前排，最後一項排在最上面。

Web學習路線筆記（九）css3：彈性盒子+響應式布局

執行個體：

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .container {
            width: 100%;
        }
        
        .nav {
            width: 100%;
            display: flex;
            /* -webkit-flex-direction: row;
            flex-direction: row; */
            /* flex-direction: row-reverse; */
            /* flex-direction: column; */
            list-style-type: none;
            background-color: #0ff;
            position: fixed;
            bottom: 0;
            margin-left: 5px;
        }
        
        .nav li {
            width: 20%;
            line-height: 20px;
            font-size: 13px;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul class="nav">
            <li>菜單項1</li>
            <li>菜單項2</li>
            <li>菜單項3</li>
            <li>菜單項4</li>
            <li>菜單項5</li>
        </ul>
    </div>
</body>

</html>

Web學習路線筆記（九）css3：彈性盒子+響應式布局

2.justify-content

把彈性項沿着彈性容器的主軸線對齊，即x軸水準方向

文法：

justiffy-content : flex-start | flex-end |center

space-between space-around

參數：

flex-start: 緊湊方式左對齊

flex-end: 緊湊方式右對齊

center:緊湊方式居中對齊

（重要）space-between: 除第一個元素和最後一個元素，其他子元素等分空白區域

（重要）space-around：所有子元素等分空白區域

3.align-items

子元素在側軸（縱軸）方向上的對齊方式。此屬性作用于父容器。

文法：

align-items:flex-start | flex-end |center |baseline |stretch

參數：

flex-start : 沿着縱軸頂端對齊

flex-end: 沿着縱軸底端對齊

center:沿着縱軸居中對齊

baseline: 沿着縱軸的基線對齊（文字的基線）

stretch:沿着縱軸拉伸對齊（注意高度别給固定）

Web學習路線筆記（九）css3：彈性盒子+響應式布局

4.flex-grow

規定彈性布局裡項目的放大比例，預設為0（即如果存在剩餘空間，也不放大）。此屬性作用于子元素。

文法：flex-grow : number;

代碼執行個體：

<style>
		.container {
		display:flex;
		width:100%;
		height:800px;
		}
		.div1{
		flex-grow:1;
		background:red;
		}
		.div1{
		flex-grow:3;
		background:rgreen;
		}
		.div1{
		flex-grow:2;
		background:purple;
		}
	</style>
	<div class="container">
		<div class="div1"></div>
		<div class="div2"></div>
		<div class="div3"></div>
	</div>

效果：

Web學習路線筆記（九）css3：彈性盒子+響應式布局

5.flex （應用于子元素）

用于指定彈性子元素的空間配置設定。

文法：

flex:auto | initial |none | inherit | [flex-grow] | [flex-shrink]

|[flex-basis]

參數：

auto: 相當于 1 1 auto

initial : 相當于 0 1 auto

none :相當于 0 0 auto

inherit : 從父元素繼承

Tips：

flex可以帶1-3個參數

1)帶1個參數，

a.無機關，這個數值會被當做flex-grow 的值，即放大比例

b.帶機關（px），這個數值會被當做flex-basis（基本寬度）的值

c.auto|initial|none

2）帶2個參數

a.第一個參數必須沒有機關，表示flex-grow （放大比例）

b.第二個參數分兩種情況

i）不帶機關，即表示flex-shrink,縮放比例

ii）帶機關，表示flex-basis基本寬度

3）帶3個參數

a.第一個參數和第二個參數必須不帶機關，分别表示flex-grow,flex-shrink

放大比例和縮放比例

b.第三個參數必須帶機關（一個有效的寬度指）被當作flex-basis，基本寬度

Web學習路線筆記（九）css3：彈性盒子+響應式布局

3.響應式布局

1）響應式布局的概念

Responsive Design ,在實作不同螢幕分辨率的終端上浏覽網頁的不同方式。通過響應式布局設計能使網站在手機和平闆電腦上有更好的浏覽閱讀體驗。

2）響應式布局和自适應布局的差別

a.響應式布局隻開發一套代碼，通過檢測視口的分辨率，針對不同用戶端在用戶端做代碼處理，來展現不同的布局和内容。

自适應開發需要開發多套界面，通過檢測視口的分辨率，來判斷目前通路的裝置是pc端、平闆、電腦、手機，進而請求服務層，傳回不同布局方式。

b.響應式布局等同于流動網格布局，而自适應等同于用固定分割點來進行布局。

c.自适應布局給出了更多的設計空間，隻用考慮幾種不同的狀态就可以了

而響應式布局要考慮上百種不同的狀态，雖然有些狀态差異較小，但也要考慮。

3）響應式布局開發實作方法

a）媒體查詢

b）百分比布局

c）rem布局

d）視口機關布局(vw/vh)

4)響應式設計步驟

a)設定meta标簽

b)通過媒體查詢來設定樣式

c）設定多種視圖的寬度

i）寬度需要使用百分比/rem/vw&vh等

ii）處理圖檔縮放

iii）其他屬性處理

如 pre /iframe/ video 等,都要縮放其大小，table，建議不要增加padding屬性，低分辨率下要使用内容居中操作。

執行個體：

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-UA-compatible" content="IE=edge,chrome=1">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->


    <!-- <meta http-equiv="x-ua-compatible" content="IE=edg,chrome=1" /> -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-saclable=no">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            overflow: hidden;
            min-width: 600px;
        }
        
        .container div {
            height: 200px;
            float: left;
        }
        
        .div1 {
            background-color: red;
            width: 30%;
        }
        
        .div2 {
            background-color: yellow;
            width: 40%;
        }
        
        .div3 {
            background-color: blue;
            width: 30%;
        }
    </style>
</head>

<body>
    <div class=" container ">
        <div class="div1 "></div>
        <div class="div2 "></div>
        <div class="div3 "></div>
    </div>
</body>

</html>

4.媒體查詢

步驟：

1.設定meta标簽

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

說明：
以上标簽内容隻能被移動端識别。
viewport : 視口（移動端）
width=device-width 寬度等于目前裝置寬度
initial-scale=1.0 初始縮放比例為1.0，預設為1.0
minimum-scale :允許使用者縮放的最小比例
maximum-scale:允許使用者縮放的最大比例

2.設定IE的渲染方式預設為最高版本

<meta http-equiv="x-ua-compatible" content="IE=edg,chrome=1" />

說明：

以上代碼表示如果浏覽器有chrome插件，将以chrome提供的v8引擎渲染該頁面，如果沒有将以IE的最高版本渲染頁面。

3.引入相容的JS檔案

Web學習路線筆記（九）css3：彈性盒子+響應式布局

說明：因為IE8及IE8以下版本既不支援hml5，也不支援css3 Media，是以我們需要加載JS檔案來處理這個相容。上面的代碼是一個注釋語句，也就是說，IE9及以上的版本不會編譯這幾行代碼。

Web學習路線筆記（九）css3：彈性盒子+響應式布局

第一種方法

根據媒體查詢引入不同的css檔案

用法：

屏寬 480以下

屏寬 480-800

屏寬 800以上

<link rel="stylesheet" href="css/screentmore800.css" media="screen and (min-width:800px)"/>

裝置：

all:所有裝置

screen: pc端顯示器

print:列印機或列印預覽圖

handheld:便攜裝置

tv:電視

speech:音頻合成器

braille:盲人點觸裝置

embossed:盲人列印機

projection:投影裝置

tty:固定密度字母栅格裝置

Only:用來排除不支援媒體查詢的浏覽器

第二種方法

在style标簽裡寫

@media screen and (max-width:480px) {
.menu {
	display: none;
}
}

執行個體：

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-UA-compatible" content="IE=edge,chrome=1">
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->


    <!-- <meta http-equiv="x-ua-compatible" content="IE=edg,chrome=1" /> -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-saclable=no">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            overflow: hidden;
            min-width: 600px;
        }
        
        .container div {
            height: 200px;
            float: left;
        }
        
        .div1 {
            background-color: red;
            width: 30%;
        }
        
        .div2 {
            background-color: yellow;
            width: 40%;
        }
        
        .div3 {
            background-color: blue;
            width: 30%;
        }
    </style>
</head>

<body>
    <div class=" container ">
        <div class="div1 "></div>
        <div class="div2 "></div>
        <div class="div3 "></div>
    </div>
</body>

</html>

效果：

Web學習路線筆記（九）css3：彈性盒子+響應式布局

5.web字型

Web學習路線筆記（九）css3：彈性盒子+響應式布局

@font-face

執行個體：

<style>
	@font-face
	{
		font-family: Myfont(自己定義的名字);
		src:url(下載下傳的字型的路徑)
	}
</style>

例如：

Web學習路線筆記（九）css3：彈性盒子+響應式布局

說明：

可以同時引入多個字型檔案，字型一樣，檔案的擴充名不一樣，目的是為了處理浏覽器相容。

src: url (“字型檔案”) format(字型格式) , url (“字型檔案”) format(字型格式);

6.iconfont 圖示字型

由阿裡巴巴提供的一種圖示字型。

步驟：

1.進入官網http://iconfont.cn

2.建立一個項目

3.添加圖示到購物車

4.将購物車中的圖示添加到項目中

5.下載下傳iconfont檔案，解壓後，将部分檔案複制到我的網頁項目中

6.使用字型圖示前，先引入iconfont.css檔案

7.使用圖示方法：

a.使用類名

<div class="iconfont icongerenzhongxin"></div>

b.使用unicode值

<div class="icofont">&#xe62f;</div>

Web學習路線筆記（九）css3：彈性盒子+響應式布局

1.多列（分欄）

2.彈性布局（flex布局）

3.響應式布局

4.媒體查詢

第一種方法

根據媒體查詢引入不同的css檔案

第二種方法

在style标簽裡寫

5.web字型

6.iconfont 圖示字型

繼續閱讀

leetcode電話号碼的字母組合

javascript使用ZeroClipboard元件複制内容到剪切闆

css超連結之新聞清單

2018年不想被web前端開發淘汰，你需要掌握哪些技術？

如何才能學好Web前端技術？

HTML CSS 的滑鼠懸浮，點選的樣式當滑鼠懸浮時：a:hover當滑鼠點選連結時：a:active

初學web前端開發需要掌握什麼

前端開發技術彙總

如何正确的去學習web前端開發？

Jeecg-Boot 2.4.0版部署後無法加載驗證碼問題Provisional headers are shown Failed to load response data

談談css的僞類和僞元素

聊一聊Swagger-UI的那些事情軟體簡介Swagger 原生Bootstrap-ui Bootstrap的UIKnife4j Bootstrap的更新版的UI

javascript console對象解讀

十大酷炫屌的圖像懸停特效

vue3 transitionvue3 transition元件和vue2 transition元件

JavaScript的那些坑之事件代理事件代理事件階段