CSS3基礎(3)——CSS3 佈局屬性全接觸
1、 彈性盒模型css
一、彈性盒子模型介紹html
彈性盒模型（Flexible Box或Flexbox）是一個CSS3新增佈局模塊，官方稱爲CSS Flexible Box Layout Module,用於實現容器裏項目的對齊、方向、排序（即便在線嗎大小位置、動態生成的狀況）。前端
彈性盒模型最大的特徵在於，可以動態修改子元素的寬度和高度，以知足在不一樣尺寸屏幕下的洽當佈局。web
兼容性：http://caniuse.com/#search=flexchrome
二、彈性盒子屬性數據庫
①彈性容器屬性express
| 屬性架構 |
描述框架 |
| displayide |
指定 HTML 元素盒子類型。 |
| flex-direction |
指定了彈性容器中子元素的排列方式 |
| flex-wrap |
設置彈性盒子的子元素超出父容器時是否換行。 |
| flex-flow |
flex-direction 和 flex-wrap 的簡寫 |
| align-items |
設置彈性盒子元素在側軸（縱軸）方向上的對齊方式。 |
| align-content |
修改 flex-wrap 屬性的行爲，相似 align-items, 但不是設置子元素對齊，而是設置行對齊 |
| justify-content |
設置彈性盒子元素在主軸（橫軸）方向上的對齊方式。 |
②彈性子元素屬性
| 屬性 |
描述 |
| order |
設置彈性盒子的子元素排列順序。 |
| flex-grow |
設置彈性子元素的擴展比率 |
| flex-shrink |
設置彈性子元素的收縮比率 |
| flex-basis |
指定彈性子元素伸縮前的默認大小值，至關於width和height屬性。 |
| flex |
設置彈性盒子的子元素如何分配空間。 |
| align-self |
在彈性子元素上使用。覆蓋容器的 align-items 屬性。 |
③屬性詳解
a、語法：flex-direction: row | row-reverse | column | column-reverse
含義：設置主軸方向，肯定彈性子元素排列方式
-
- row（默認值）：主軸爲水平方向。排列順序與頁面的文檔順序相同。若是文檔順序是ltr，則排列順序是從左到右；若是文檔順序是rtl，則排列順序是從右到左。
- row-reverse：主軸爲水平方向。排列順序與頁面的文檔順序相反。
- column：主軸爲垂直方向。排列順序爲從上到下。
- column-reverse： 主軸爲垂直方向。排列順序爲從下到上。
b、語法：flex-wrap: nowrap|wrap|wrap-reverse ;
含義：設置彈性盒子的子元素超出父容器時是否換行。
-
- nowrap - 默認， 彈性容器爲單行。該狀況下彈性子項可能會溢出容器。
- wrap - 彈性容器爲多行。該狀況下彈性子項溢出的部分會被放置到新行，子項內部會發生斷行
- wrap-reverse -反轉 wrap 排列。
c、語法：flex-flow: flex-direction flex-wrap;
含義：複合屬性（flex-direction 和 flex-wrap）,設置彈性子元素排列方式。
d、語法：justify-content: flex-start|flex-end|center|space-between|space-around；
含義：設置彈性子元素主軸上的對齊方式。
| 值 |
描述 |
| flex-start |
默認值。主軸開始對齊，主軸爲橫軸，ltr環境下，左對齊 |
| flex-end |
主軸結束對齊，主軸爲橫軸，ltr環境下，右對齊 |
| center |
居中對齊 |
| space-between |
第一個、最後一個對齊彈性容器的邊緣，其他均勻分佈。 |
| space-around |
所有均勻分佈 |
e、語法：align-items: stretch|center|flex-start|flex-end|baseline;
含義：設置彈性子元素側軸上的對齊方式
| 值 |
描述 |
| stretch |
默認值。 從側軸開始到側軸結束鋪滿整個側軸 |
| center |
居中對齊 |
| flex-start |
側軸開始對齊，主軸爲橫軸，頂對齊 |
| flex-end |
側軸結束對齊 |
| baseline |
基線對齊 |
f、語法：align-content: stretch|center|flex-start|flex-end|space-between|space-around;
含義：側軸有空白且有多行時，設置彈性子元素側軸上的對齊方式。
| 值 |
描述 |
| stretch |
默認值。各行伸展以佔用剩餘空間。若是剩餘空間是負數，該值等效flex-start。 |
| center |
居中對齊 |
| flex-start |
主軸開始對齊，主軸爲橫軸，ltr環境下，左對齊 |
| flex-end |
主軸結束對齊，主軸爲橫軸，ltr環境下，右對齊 |
| space-between |
第一個、最後一個對齊彈性容器的邊緣，其他均勻分佈。 |
| space-around |
所有均勻分佈 |
g、語法：order：<integer>
含義：設置彈性子元素的順序，數值小的排在前面，能夠爲負值。
h、語法：flew-grow:<number>
含義：設置彈性子元素的擴展比率，不容許爲負值，默認爲0.根據彈性盒子元素所設置的擴展因子做爲比率來分配剩餘空間。
i、語法：flex-shrink:<number>
含義：設置彈性子元素的收縮比率，不容許爲負值，默認值爲1.
根據彈性盒子元素所設置的擴展因子做爲比率來收縮空間
j、語法：flex-basis:<length>|<percentage>|auto
含義：設置彈性子元素的伸縮基準值，不容許爲負值。默認值爲auto，無特定寬度（高度）。
k、語法：flex: flex-grow flex-shrink flex-basis|auto;
含義：複合屬性，設置彈性子元素的如何分配空間。
l、語法：align-self: auto|stretch|center|flex-start|flex-end|baseline;
含義：設置彈性子元素的在側軸上的對齊方式，與align-item的相同。
示例：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Flexbox響應式菜單</title>
6 <link rel="stylesheet" type="text/css" href="normalize.css">
7 <link rel="stylesheet" type="text/css" href="begin.css">
8 </head>
9 <body>
10 <!--
11 響應式菜單html架構，emmet的方式進行簡寫
12 ul.menu>li*6>a[href="#"]{HTML}
13 以後用tab鍵展開
14 -->
15 <ul class="menu">
16 <li><a href="#">HTML</a></li>
17 <li><a href="#">CSS</a></li>
18 <li><a href="#">Javascript</a></li>
19 <li><a href="#">Sass</a></li>
20 <li><a href="#">Ruby</a></li>
21 <li><a href="#">Mongo</a></li>
22 </ul>
23 </body>
24 </html>
25 /*
26 移動優先原則，優先實現小屏幕下的佈局
27 使用顏色：#39ADD1 #3079AB #982551 #E15258 #CC6699 #52AC43
28 */
29 .menu{
30 list-style-type: none;
31 padding: 0px;
32 margin: 0px;
33 /*以彈性盒子顯示*/
34 display: flex;
35 /*flex-direction 和 flex-wrap 的簡寫
36 row:主軸水平方向；左到右；wrap：彈性容器爲多行。*/
37 flex-flow: column wrap;
38 }
39 .menu li{
40 /*設置元素高度*/
41 height: 40px;
42 /*設置文字居中*/
43 text-align: center;
44 /*設置行高*/
45 line-height: 40px;
46 /*
47 flex: flex-grow flex-shrink flex-basis|auto;
48 設置子元素擴展比率
49 收縮比率（全部彈性子元素都1表明均勻收縮）
50 設置彈性子元素的伸縮基準值
51 */
52 flex: 1 1 100%;
53 }
54 /*選擇每一個li元素是其父級的第一個子元素*/
55 .menu li:nth-child(1){
56 background-color: #39ADD1;
57 }
58 .menu li:nth-child(2){
59 background-color: #3079AB;
60 }
61 .menu li:nth-child(3){
62 background-color: #982551;
63 }
64 .menu li:nth-child(4){
65 background-color: #E15258;
66 }
67 .menu li:nth-child(5){
68 background-color: #CC6699 ;
69 }
70 .menu li:nth-child(6){
71 background-color: #52AC43 ;
72 }
73 .menu li a{
74 color: #fff;
75 text-decoration: none;
76 }
77 @media (min-width: 480px) {
78 .menu li {
79 flex: 1 1 50%;
80 }
81 }
82 @media (min-width: 768px) {
83 .menu{
84 flex-flow: row nowrap;
85 }
86 }
2、 多列屬性詳解
多列（Multi-column）是一個CSS3新增佈局模塊，官方稱爲Multiple column layout,能夠比較輕鬆的實現多列布局。
一、多列屬性一覽表
| 屬性 |
屬性描述 |
| columns |
複合屬性（column-width和column-count）,設置寬度和列數 |
| columns-width |
設置每列的寬度 |
| columns-count |
設置列數 |
| column-gap |
設置列之間的間隙 |
| column-rule |
複合屬性（column-rule-width、column-rule-style和column-rule-color），設置列之間的邊框樣式 |
| column-fill |
設置列的高度是否統一 |
| column-span |
設置是否橫跨全部列 |
二、多列屬性詳解
①語法：column-width：<length>|auto
含義：設置列的寬度
| 屬性值 |
描述 |
| auto |
根據column-count自定義分配寬度 |
| <length> |
用長度值來定義列寬。不容許負值 |
②語法：column-count：<integer>|auto
含義：設置列的個數
| 屬性值 |
描述 |
| auto(默認) |
根據column-count自定義分配寬度 |
| <integer> |
用整數來定義列數。不容許負值 |
③語法：columns：column-width || column-count
複合屬性，設置列的寬度和個數
④語法：column-gap：<length>|normal
含義：設置列與列之間的間隙
| 屬性值 |
描述 |
| normal(默認) |
與font-size大小相同 假設該對象的font-size爲16px,則normal值爲16px,類推。 |
| <length> |
用長度值來定義列與列之間的間隙，不容許負值。 |
⑤語法：column-rule：[column-rule-width] || [column-rule-style] || [column-rule-color]
含義：設置列與列之間的邊框，相似border
| 屬性值 |
描述 |
| [column-rule-width] |
設置列與列之間的邊框厚度 |
| [column-rule-style] |
設置列與列之間的邊框樣式 |
| [column-rule-color] |
設置列與列之間的邊框顏色 |
⑥語法：column-fill：auto | balance
含義：設置全部列的高度是否統一
| 屬性值 |
描述 |
| auto(默認) |
列高度自適應內容 |
| balance |
全部列的高度以其中最高的一列統一 |
⑦語法：column-span：none | all
含義：對象顏色是否橫跨全部列
| 屬性值 |
描述 |
| none(默認) |
不跨列 |
| all |
橫跨全部列 |
3、 媒體查詢解析
響應式佈局（Responsive Web design）指的是z在網頁開發過程當中針對不一樣設備開發一套網站，而後根據用戶行爲以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）自適應地顯示不一樣佈局。
響應式佈局的核心是媒體查詢。媒體查詢（Media Query）是獲取用戶行爲和設備環境、而後提供相應的css規則的過程的簡稱。
媒體查詢讓CSS能夠更精確做用於不一樣的媒體類型和同一媒體的不一樣條件。
一、 基礎語法：
1 <!--link元素中的CSS媒體查詢-->
2 <link rel="stylesheet" media="(max-width:800px)" href="example.css"/>
3
4 <!--樣式表中的CSS媒體查詢-->
5 <style>
6 @media (max-width:600px) {
7 .facet_sidebar{
8 display: none;
9 }
10 }
11 </style>
語法： <media_query_list>: [<media_query>[‘,’<media_query]*]? <media_query>: [only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]* <expression>:’(’<media_feature>[:<value>]?)’
<表達式>: ’(’<媒體特徵)[:<值>]?’)’ <媒體查詢>:[only | not]? <媒體類型> [and<表達式>*] | <表達式>[and<表達式>]* <媒體查詢列表>:[<媒體類型> [，<媒體查詢>]*]?
二、 媒體特徵
| 媒體特徵 |
取值 |
接受min max |
簡介 |
| width |
<length> |
yes |
定義輸出設備中的頁面可見區域寬度 |
| height |
<length> |
yes |
定義輸出設備中的頁面可見區域高度 |
| device-width |
<length> |
yes |
定義輸出設備的屏幕可見寬度 |
| device-height |
<length> |
yes |
定義輸出設備的屏幕可見高度 |
| orientation |
portrait | landscape |
yes |
定義「heigth「是否大於或等於」width「。portrait是，landscape否 |
| aspect-ratio |
<ratio> |
yes |
定義「width「與」height「的比率 |
| device-aspect-ratio |
<integer> |
yes |
定義「device-width「與」device-height「的比率 |
| color |
<integer> |
yes |
定義每一組輸出設備的纔是原件個數。若是不是彩色設備，則值等於0 |
| color-index |
<integer> |
yes |
定義在輸出設備的彩色查詢表中的條目數。若是沒有使用彩色查詢表，則值等於0 |
| monochrome |
<integer> |
yes |
定義在一個單色框架緩衝區中每像素包含的單色原件個數。若是不是單色設備，則值等於0 |
| resolution |
<resolution> |
yes |
定義設備的分辨率。如96dpi,300dpi,118dpcm |
| scan |
progressive | interlace |
yes |
定義電視類設備的掃描工序 |
| grid |
<integer> |
yes |
用來查詢輸出設備是否使用柵格或點陣。只有1和0纔是有效值，1表明是，0表明否 |
三、 媒體類型
| 類型 |
描述 |
| all |
全部設備 |
| screen |
彩色電腦屏幕 |
| |
文檔打印或打印預覽模式 |
| projection |
項目演示，好比幻燈片 |
| handheld |
手持設備 |
| speech |
演講 |
| tv |
電視 |
| tty |
固定字母間距的網格的媒體，好比電傳打印機 |
| braille |
盲文 |
| embossed |
盲文打印 |
四、 媒體查詢規則
| 類型 |
描述 |
| @media all and (min-width:800px) |
全部最小水平屏幕寬度爲800像素的屏幕應用規則 |
| @media(min-width:800px) |
簡寫方式，同上 |
| @media(min-width:800px) and (max-width:1200px) |
全部介於800px與1200px之間的屏幕應用規則 |
| @media(min-width:800px) or (orientation:portrait) |
寬度至少是800像素或方向是縱向的，則會應用該規則 |
| @media (not min-width:800px) |
當最小寬度不是800像素時，會應用下列CSS規則 |
| @media (width:800px) and (height:400px) |
當最小寬度不是800像素時、400像素高時應用規則 |
| @media(min-width:700px), handheld and(orientation:landscape) |
最小寬度爲700像素或是橫屏的手持設備上，同時應用樣式 |
五、 屏幕尺寸
經常使用的屏幕尺寸從大到小以下所示：
-
-
- 老智能機：320px~480px
- 智能手機：³480px
- 平板電腦：³768px
- 中等屏幕（桌面顯示器）：³992px
- 大屏幕（大桌面顯示器）：³1200px
-
實現過程當中，遵循移動優先原則
六、多列屬性圖片瀑布流+響應式佈局：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>圖片瀑布流</title>
6 <link href="picBegin.css" type="text/css" rel="stylesheet">
7 </head>
8 <body>
9 <!--h1{圖片瀑布流}+ul.picC>li*9>img[src="img/$.jpg"]-->
10 <h1>圖片瀑布流</h1>
11 <ul class="picC">
12 <li><img src="img/1.jpg" alt=""></li>
13 <li><img src="img/2.jpg" alt=""></li>
14 <li><img src="img/3.jpg" alt=""></li>
15 <li><img src="img/4.jpg" alt=""></li>
16 <li><img src="img/5.jpg" alt=""></li>
17 <li><img src="img/6.jpg" alt=""></li>
18 <li><img src="img/7.jpg" alt=""></li>
19 <li><img src="img/8.jpg" alt=""></li>
20 </ul>
21 </body>
22 </html>
23 h1{
24 width: 100%;
25 height: 50px;
26 margin: 0;
27 text-align: center;
28 line-height: 50px;
29 background-color: white;
30 box-shadow: 0 2px 6px 0 rgba(0,0,0,0.5);
31 position: fixed;
32 left: 0;
33 top: 0;
34 }
35 .picC{
36 width: 90%;
37 margin: 50px auto;
38 -webkit-column-count: 1;
39 column-count: 1;
40 -webkit-column-gap: 10px;
41 column-gap: 10px;
42 list-style-type: none;
43 }
44 .picC li{
45 margin-top: 10px;
46 }
47 @media (min-width: 480px) {
48 .picC{
49 -webkit-column-count: 2;
50 column-count: 2;
51 }
52 }
53 @media (min-width: 768px) {
54 .picC{
55 -webkit-column-count: 3;
56 column-count: 3;
57 -webkit-column-gap: 10px;
58 column-gap: 10px;
59 }
60 }
4、 響應式表格示例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>響應式表格示例</title>
6 <link href="style.css" type="text/css" rel="stylesheet">
7 </head>
8 <body>
9 <h1>程序開發相關課程</h1>
10 <table class="responsive">
11 <thead>
12 <tr>
13 <th>課程序號</th>
14 <th>課程名稱</th>
15 <th>課程操做</th>
16 </tr>
17 </thead>
18 <tbody>
19 <tr>
20 <td class="number">150406</td>
21 <td class="name">移動應用開發課程</td>
22 <td class="action">
23 <a href="#">修改</a><a href="del">刪除</a>
24 </td>
25 <tr>
26 <td class="number">150407</td>
27 <td class="name">web前端開發課程</td>
28 <td class="action">
29 <a href="#">修改</a><a href="del">刪除</a>
30 </td>
31 <tr>
32 <td class="number">150408</td>
33 <td class="name">操做系統&數據庫系列課程</td>
34 <td class="action">
35 <a href="#">修改</a><a href="del">刪除</a>
36 </td>
37 </tr>
38 <tr>
39 <td class="number">150409</td>
40 <td class="name">智能硬件&物聯網系列課程</td>
41 <td class="action">
42 <a href="#">修改</a><a href="del">刪除</a>
43 </td>
44 </tr>
45 </tbody>
46 </table>
47 </body>
48 </html>
49 h1{
50 font-size: 30px;
51 text-align: center;
52 color: #666666;
53 }
54 table.responsive{
55 width: 98%;
56 margin: 0 auto;
57 border: 1px solid #666666;
58 box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);
59 border-collapse: collapse;
60 }
61 table.responsive th,table.responsive td{
62 border:1px solid #666666;
63 padding: 0.5em 1em;
64 }
65 table.responsive th{
66 background-color: #35B558;
67 }
68 table.responsive .action a{
69 color: #ff5c00;
70 /*去除下劃線*/
71 text-decoration: none;
72 padding: 0 4px;
73 }
74 table.responsive .number,table.responsive .action{
75 text-align: center;
76 }
77 @media (max-width: 480px) {
78 table.responsive{
79 box-shadow: none;
80 border: none;
81 }
82 table.responsive thead{
83 display: none;
84 }
85 table.responsive tr,table.responsive td{
86 display: block;
87 border:none ;
88 position: relative;
89 }
90 table.responsive tr{
91 margin-bottom: 1em;
92 box-shadow: 0 1px 10px 0 rgba(0,0,0,0.2);
93 }
94 table.responsive .number{
95 background-color: #35B558;
96 text-align: center;
97 padding-left: 20%;
98 }
99 table.responsive .number::before{
100 content: "課程序號";
101 position: absolute;
102 left: 0.5em;
103 top: 0.5em;
104 font-weight: bold;
105 }
106 table.responsive .name{
107 text-align: left;
108 padding-left: 28%;
109 }
110 table.responsive .name::before{
111 content: "課程名稱";
112 position: absolute;
113 left: 0.5em;
114 top: 0.5em;
115 font-weight: bold;
116 }
117 table.responsive .action{
118 position: absolute;
119 right: 0;
120 top: 0;
121 }
122 }
5、 響應式圖片項目示例
響應式圖片指用戶代理根據輸出設備的分辨率不一樣加載不一樣類型的圖片，不會形成寬帶的浪費。同時，在改變輸出設備類型或分辨率時，能及時加載對應類型的圖片。(兼容性問題)
常見的實現方式有：
- 用srcset和sizes加載不一樣圖片
1 <img 2 sizes="(min-width:40em) 80vm,100vm" 3 srcset="img/mediu.jpg 375w, 4 img/large.jpg 480w, 5 img/extralarge.jpg 768w" 6 src="img/medium.jpg" 7 alt="響應式圖片佈局">
- picture、source media加載不一樣圖片
1 <picture> 2 <source 3 media="(min-width:40em) 80vm, 100w" 4 srcset="img/medium.jpg 375w, 5 img/large.jpg 480w, 6 img/extraalarge.jpg 768w" /> 7 <img 8 src="img/medium.jpg" 9 alt="響應式圖片佈局" /> 10 </picture>
- 用source type 指定多種格式
1 <picture> 2 <source 3 type=」imge/webp」 4 media="(min-width:40em) 80vm, 100w" 5 srcset="img/medium.jpg 375w, 6 img/large.jpg 480w, 7 img/extraalarge.webp 768w" /> 8 <source 9 type=」imge/webp」 10 media="(min-width:40em) 80vm, 100w" 11 srcset="img/medium.jpg 375w, 12 img/large.jpg 480w, 13 img/extraalarge.jpg 768w" /> 14 <img 15 src="img/medium.jpg" 16 alt="響應式圖片佈局" /> 17 </picture>
- 1. CSS3基礎(3)——CSS3 佈局屬性全接觸
- 2. CSS3基礎(4)——CSS3 渲染屬性
- 3. css3 彈性佈局
- 4. CSS3中display屬性的Flex佈局
- 5. 談談CSS3中display屬性的Flex佈局（彈性佈局）
- 6. CSS3動畫屬性和flex彈性佈局各個屬性
- 7. css3 FlexBox 彈性佈局
- 8. CSS3 —— Flex 彈性佈局
- 9. CSS3彈性盒佈局
- 10. CSS3彈性盒子佈局
- 更多相關文章...
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • PHP 超級全局變量 - PHP教程
- • JDK13 GA發佈：5大特性解讀
- • ☆基於Java Instrument的Agent實現
-
每一个你不满意的现在，都有一个你没有努力的曾经。