06--Web前端之HTML5+CSS3

時間 2020-05-30

標籤 web 前端 html5+css3 html css 欄目 HTML 简体版

原文原文鏈接

HTML5+CSS3綜合概述

什麼是HTML5和CSS3？

HTML5和CSS3是在1.0和CSS以後推出的一種技術。主要面向移動端的開發。javascript

推出HTML5和CSS3的目的是什麼？

HTML5和CSS3推出的目的就比較有野心了，它的目的是要取代目前主流的兩大移動平臺上的APP應用程序。css

HTML5和CSS3的野心具體是什麼？

你們都知道，蘋果的IOS平和咱們常用的安卓平臺徹底不同。所以，你要開發一個在蘋果手機IOS平臺上運行的一個APP，須要專門的IOS程序員，可是這個IOS的程序員只能開發蘋果平臺的，安卓平臺的他不會開發。一樣的，你要開發一個在安卓手機上運行的一個APP，就須要一個安卓程序員。那麼問題來了，一個公司要開發一款APP，由於如今是蘋果和安卓的天下，因此須要一款蘋果端的APP，安卓端的呢，也須要一個。這樣的話公司要開發出這款手機軟件須要聘請兩個團隊，這無疑就大大增長了公司的運營成本。html

HTML5和CSS3就是想要成爲一款跨平臺的APP開發技術，不管是蘋果的IOS平臺，仍是谷歌的安卓平臺，我都有能力搞定，我呢，只須要開發一次就能同時擁有兩個平臺的APP應用程序，要是能作到這種程度的話，IOS和安卓程序開發人員就不須要了！！前端

HTML5和CSS3的應用場景有哪些？

1. 應用程序可使用HTML5和CSS3的頁面。html5

2.主流瀏覽器裏能夠看HTML5和CSS3的頁面。java

3.微信平臺裏能夠看HTML5和CSS3的頁面。程序員

4.原生IOS和安卓應用程序裏面也能夠嵌入HTML5和CSS3的頁面。（就至關於程序員只是作了外面的一個殼，裏面呢仍是HTML5和CSS3的東西。）web

CSS權重

CSS權重指的是樣式的優先級，有兩條或多條樣式做用於一個元素，權重高的那條樣式對元素起做用,權重相同的，後寫的樣式會覆蓋前面寫的樣式。瀏覽器

權重的等級

能夠把樣式的應用方式分爲幾個等級，按照等級來計算權重微信

一、!important，加在樣式屬性值後，權重值爲 10000
二、內聯樣式，如：style=」」，權重值爲1000
三、ID選擇器，如：#content，權重值爲100
四、類，僞類和屬性選擇器，如： .content、:hover 權重值爲10
五、標籤選擇器和僞元素選擇器，如：div、p、權重值爲1
六、通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~）、權重值爲0

權重案例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7  div{
 8  width: 100px; 
 9  height: 100px;
10  background-color: red !important;
11      }
12 
13  div{
14  width: 100px;
15  height: 100px;
16  background-color: blue;
17      }
18 
19 
20     </style>
21 </head>
22 <body>
23     <div></div>
24 </body>
25 </html>

!important的使用方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7  .red{
 8  width: 100px; 
 9  height: 100px;
10  background-color: red;
11      }
12 
13  div{
14  width: 100px;
15  height: 100px;
16  background-color: blue;
17      }
18 
19 
20     </style>
21 </head>
22 <body>
23     <div class="red"></div>
24 </body>
25 </html>

類與標籤選擇器權重對比

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7  #lan{
 8  width: 100px; 
 9  height: 100px;
10  background-color: blue;
11      }  
12 
13  .red{
14  width: 100px; 
15  height: 100px;
16  background-color: red;
17      }
18 
19      
20 
21 
22     </style>
23 </head>
24 <body>
25     <div class="red" id="lan"></div>
26 </body>
27 </html>

類與id選擇器權重對比

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7  #lan{
 8  width: 100px; 
 9  height: 100px;
10  background-color: blue;
11      }  
12 
13   
14     </style>
15 </head>
16 <body>
17     <div id="lan" style="width:400px;height:400px;background:red"></div>
18 </body>
19 </html>

內聯式與ID選擇器權重對比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> #lan{ width: 100px; height: 100px; background-color: blue !important;
     }  

  
    </style>
</head>
<body>
    <div id="lan" style="width:400px;height:400px;background:red"></div>
</body>
</html>

內聯式與ID選擇器權重對比!important提高ID選擇器權重

CSS3新增選擇器

一、E:nth-child(n)：匹配元素類型爲E且是父元素的第n個子元素

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7  li{
 8  background-color: yellow;
 9  margin-bottom: 10px;
10       }
11 
12  li:nth-child(2){
13  background-color: red;
14       }
15 
16  </style> 17 </head> 18 <body> 19  <ul> 20  <li>1</li> 21  <li>2</li> 22  <li>3</li> 23  <li>4</li> 24  <li>5</li> 25  <li>6</li> 26  <li>7</li> 27  <li>8</li> 28  <li>9</li> 29         
30  </ul> 31 </body> 32 </html>

直接選中第二個li變成紅色

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7  .box div{
 8  background-color: gold;
 9  margin-bottom: 10px;
10      }
11 
12  .box div:nth-child(5){
13  background-color: red;
14      }
15 
16  </style> 17 </head> 18 <body> 19  <div class="box"> 20  <div>1</div> 21  <div>2</div> 22  <div>3</div> 23  <div>4</div> 24  <div>5</div> 25  <div>6</div> 26  <div>7</div> 27  <div>8</div> 28  <div>9</div> 29  </div> 30 </body> 31 </html>

直接換成9個div選中其中的1個

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7  .box div{
 8  background-color: gold;
 9  margin-bottom: 10px;
10      }
11 
12  .box div:nth-child(2n){
13  background-color: red;
14      }
15 
16  </style> 17 </head> 18 <body> 19  <div class="box"> 20  <div>1</div> 21  <div>2</div> 22  <div>3</div> 23  <div>4</div> 24  <div>5</div> 25  <div>6</div> 26  <div>7</div> 27  <div>8</div> 28  <div>9</div> 29  </div> 30 </body> 31 </html>

偶數行隔行變色

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7  .box div{
 8  background-color: gold;
 9  margin-bottom: 10px;
10      }
11 
12  .box div:nth-child(2n+1){
13  background-color: red;
14      }
15 
16  </style> 17 </head> 18 <body> 19  <div class="box"> 20  <div>1</div> 21  <div>2</div> 22  <div>3</div> 23  <div>4</div> 24  <div>5</div> 25  <div>6</div> 26  <div>7</div> 27  <div>8</div> 28  <div>9</div> 29  </div> 30 </body> 31 </html>

奇數行隔行變色

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7  .box div{
 8  background-color: gold;
 9  margin-bottom: 10px;
10      }
11 
12  .box div:nth-child(5){
13  background-color: red;
14      }
15 
16  </style> 17 </head> 18 <body> 19  <div class="box"> 20  <div>1</div> 21  <div>2</div> 22  <div>3</div> 23  <div>4</div> 24  <p>寶寶今天很開心</p> 25  <div>5</div> 26  <div>6</div> 27  <div>7</div> 28  <div>8</div> 29  <div>9</div> 30  </div> 31 </body> 32 </html>

第五行代碼增長p標籤後匹配失敗

匹配原則：

E:nth-child(n)會先尋找選擇範圍內的第n個孩子，找到後再比較是否是元素E，若是是，則匹配成功增長樣式；若不是，則匹配失敗效果沒法顯示。

（與E:nth-of-type(n)對比學習）

二、E:nth-last-child(n)：匹配元素類型爲E且是父元素的倒數第n個子元素（與上一項順序相反）

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7  .box div{
 8  background-color: gold;
 9  margin-bottom: 10px;
10      }
11 
12  .box div:nth-last-child(3){
13  background-color: red;
14      }
15 
16  </style> 17 </head> 18 <body> 19  <div class="box"> 20  <div>1</div> 21  <div>2</div> 22  <div>3</div> 23  <div>4</div> 24  <div>5</div> 25  <div>6</div> 26  <div>7</div> 27  <div>8</div> 28  <div>9</div> 29  </div> 30 </body> 31 </html>

倒着數第3個子元素

三、E:first-child：匹配元素類型爲E且是父元素的第一個子元素
四、E:last-child：匹配元素類型爲E且是父元素的最後一個子元素

五、E:nth-of-type(n)：匹配父元素的第n個類型爲E的子元素

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7  .box div{
 8  background-color: gold;
 9  margin-bottom: 10px;
10      }
11 
12  .box div:nth-of-type(5){
13  background-color: red;
14      }
15 
16  </style> 17 </head> 18 <body> 19  <div class="box"> 20  <div>1</div> 21  <div>2</div> 22  <div>3</div> 23  <div>4</div> 24  <p>寶寶今天很開心</p> 25  <p>寶寶今天很開心</p> 26  <p>寶寶今天很開心</p> 27  <div>5</div> 28  <div>6</div> 29  <div>7</div> 30  <div>8</div> 31  <div>9</div> 32  </div> 33 </body> 34 </html>

永遠只認第5個div,前面如有其餘非div標籤，則直接跳過

匹配原則：

E:nth-of-type(n)會直接尋找第n個E標籤，若是前面有其餘非E標籤，則直接跳過,繼續尋找。

注意：

若是子元素的標籤都相同，則E:nth-child(n)與 E:nth-of-type(n)效果相同，如子元素內摻雜了其它多餘元素，則會體現不一樣種效果。

六、E:nth-last-of-type(n)：匹配父元素的倒數第n個類型爲E的子元素（與上一項順序相反）
七、E:first-of-type：匹配父元素的第一個類型爲E的子元素
八、E:last-of-type：匹配父元素的最後一個類型爲E的子元素

CSS3圓角、陰影、rgba

CSS3圓角

設置某一個角的圓角，好比設置左上角的圓角：

border-top-left-radius:30px 60px;

設置左上角的圓角

同時分別設置四個角：

 border-radius:30px 60px 120px 150px;

分別同時設置四個圓角

設置四個圓角相同：

border-radius:50%;

設置四個圓角相同

陰影

box-shadow：h-shadow v-shadow blur spread color inset;
分別設置陰影：水平偏移垂直偏移羽化大小陰影大小顏色是否內陰影

 1 <style type="text/css">  2  .box{
 3  width:200px;
 4  height:50px;
 5  background-color:gold;
 6         /* box-shadow:10px 10px 5px 2px pink inset; */
 7  box-shadow:10px 10px 5px 2px pink;
 8     }
 9 </style> 10 ...... 11 
12 
13 <div class="box"></div>

內陰影與外陰影

rgba（新的顏色值表示法）

一、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7  div{
 8  width: 200px;
 9  height: 200px;
10  background-color: gold;
11  opacity:0.1;
12 
13       }
14 
15 
16  </style> 17 </head> 18 <body> 19  <div>你好</div> 20 </body> 21 </html>

背景透明並文字透明

二、rgba(0,0,0,0.1) 前三個數值表示顏色，第四個數值表示顏色的透明度

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7  div{
 8  width: 200px;
 9  height: 200px;
10  background-color: gold;
11  background-color: rgba(255,215,0,0.4);
12 
13       }
14 
15 
16  </style> 17 </head> 18 <body> 19  <div>你好</div> 20 </body> 21 </html>

背景透明並文字不透明

CSS3 transition動畫

一、transition-property 設置過渡的屬性，好比：width height background-color
二、transition-duration 設置過渡的時間，好比：1s 500ms
三、transition-timing-function 設置過渡的運動方式

linear 勻速
ease 開始和結束慢速
ease-in 開始是慢速
ease-out 結束時慢速
ease-in-out 開始和結束時慢速

四、transition-delay 設置動畫的延遲
五、transition: property duration timing-function delay 同時設置四個屬性

舉例：

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7  .box{
 8  width: 100px;
 9  height: 100px;
10  background-color: gold;
11  transition:width 10s ease-in;
12        }
13 
14  .box:hover{
15  width: 500px;
16        }
17 
18 
19 
20  </style> 21 </head> 22 <body> 23  <div class="box"></div> 24 </body> 25 </html>

正方形變長慢速

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7  .box{
 8  width: 100px;
 9  height: 100px;
10  background-color: gold;
11  transition:height 10s ease-in;
12        }
13 
14  .box:hover{
15  height: 500px;
16        }
17 
18 
19 
20  </style> 21 </head> 22 <body> 23  <div class="box"></div> 24 </body> 25 </html>

正方形變高慢速

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7  .box{
 8  width: 100px;
 9  height: 100px;
10  background-color: gold;
11  transition:width 10s ease-in,height 10s ease-in;
12        }
13 
14  .box:hover{
15  width: 500px;
16  height: 500px;
17        }
18 
19 
20 
21  </style> 22 </head> 23 <body> 24  <div class="box"></div> 25 </body> 26 </html>

正方形同時變長變高慢速

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7  .box{
 8  width: 100px;
 9  height: 100px;
10  background-color: gold;
11  transition:width 10s ease-in,height 10s ease-in,background-color 10s;
12        }
13 
14  .box:hover{
15  width: 500px;
16  height: 500px;
17  background-color: red;
18        }
19 
20 
21 
22  </style> 23 </head> 24 <body> 25  <div class="box"></div> 26 </body> 27 </html>

正方形同時變長變高慢速並顏色改變

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7  .box{
 8  width: 100px;
 9  height: 100px;
10  background-color: gold;
11  transition:width 10s ease-in,height 10s ease-in,background-color 10s ease-in ,border-radius 10s ease;
12        }
13 
14  .box:hover{
15  width: 500px;
16  height: 500px;
17  background-color: red;
18  border-radius: 50%;
19        }
20 
21 
22 
23  </style> 24 </head> 25 <body> 26  <div class="box"></div> 27 </body> 28 </html>

正方形同時變長變高慢速並顏色改變變圓角

HTML5新結構標籤

h5新增的主要語義化標籤以下：

一、header 頁面頭部、頁眉
二、nav 頁面導航
三、article 一篇文章
四、section 文章中的章節
五、aside 側邊欄
六、footer 頁面底部、頁腳

頁面使用標籤佈局示意圖：

PC端兼容h5的新標籤的方法，在頁面中引入如下js文件:

<script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

HTML5 新增表單控件

新增類型：網址郵箱日期時間星期數量範圍電話顏色搜索

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>Document</title>
 6  </head>
 7  <body>
 8   <form>
 9  <label>網址:</label><input type="url" name="" required><br><br> 
10  <label>郵箱:</label><input type="email" name="" required><br><br> 
11  <label>日期:</label><input type="date" name=""><br><br> 
12  <label>時間:</label><input type="time" name=""><br><br> 
13  <label>星期:</label><input type="week" name=""><br><br> 
14  <label>數量:</label><input type="number" name=""> <br><br>
15  <label>範圍:</label><input type="range" name=""><br><br> 
16  <label>電話:</label><input type="tel" name=""><br><br> 
17  <label>顏色:</label><input type="color" name=""><br><br> 
18  <label>搜索:</label><input type="search" name=""><br><br>
19  <input type="submit" value="提交">
20  </form>
21  </body>
22  </htm

input新增的屬性類型

新增經常使用表單控件屬性：
一、placeholder 設置文本框默認提示文字

1 <input type="text" placeholder="請輸入用戶名">

placeholder屬性案例

二、autofocus 自動得到焦點

1 <input type="text" placeholder="請輸入用戶名" autofocus="">

自動得到焦點

三、autocomplete 聯想關鍵詞

案例查看百度搜索框

HTML5 音頻和視頻

html5增長了audio和video標籤，提供了在頁面上插入音頻和視頻的標準方法。

audio標籤

支持格式：ogg、wav、mp3

對應屬性：
一、autoplay 自動播放
二、controls 顯示播放器
三、loop 循環播放
四、preload 預加載
五、muted 靜音

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6 </head>  7 <body>  8  <audio src="beishui.mp3" controls autoplay loop preload muted></audio>  9 </body> 10 </html>

audio標籤案例

video標籤

支持格式：ogg、mp四、webM

屬性：
一、width
二、height
三、Poster

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <title>Document</title>  6  <style>  7 
 8  video{
 9  width: 800px;
10  height: 800px;
11          }
12 
13 
14  </style> 15 </head> 16 <body> 17  <video src="lunhui.mp4" controls loop preload poster="lunhui.jpg"></video> 18 </body> 19 </html>

video標籤案例

移動端頁面佈局

移動端app分類

一、Native App 原生app手機應用程序
使用原生的語言開發的手機應用，Android系統用的是java，iOS系統用的是object-C

二、Hybrid App 混合型app手機應用程序
混合使用原生的程序和html5頁面開發的手機應用

三、Web App 基於Web的app手機應用程序
徹底使用html5頁面加前端js框架開發的手機應用

Viewport 視口

視口是移動設備上用來顯示網頁的區域，通常會比移動設備可視區域大，寬度多是980px或者1024px，目的是爲了顯示下整個爲PC端設計的網頁，這樣帶來的後果是移動端會出現橫向滾動條，爲了不這種狀況，移動端會將視口縮放到移動端窗口的大小。這樣會讓網頁不容易觀看，能夠用 meta 標籤，name=「viewport 」來設置視口的大小，將視口的大小設置爲和移動設備可視區同樣的大小。

pc端與移動端渲染網頁過程：

設置方法以下：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 快捷鍵爲：meta:vp

手機視口代碼

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  6  <title>Document</title>  7  <style>  8  *{
 9  padding: 0;
10  margin: 0;
11       }
12  div{
13       
14  height: 30px;
15  background-color: pink;
16  font-size: 20px;
17  text-align: center;
18  line-height: 30px;
19 
20       }
21       
22  </style> 23 </head> 24 <body> 25  <div>你們好</div> 26     
27 </body> 28 </html>

手機端有視口和無視口對比

視網膜屏幕（retina屏幕）清晰度解決方案

視網膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素能夠理解爲屏幕上的一個發光點，無數發光的點組成的屏幕，視網膜屏幕比通常屏幕的物理像素點更小，常見有2倍的視網膜屏幕和3倍的視網膜屏幕，2倍的視網膜屏幕，它的物理像素點大小是通常屏幕的1/4,3倍的視網膜屏幕，它的物理像素點大小是通常屏幕的1/9。

圖像在視網膜屏幕上顯示的大小和在通常屏幕上顯示的大小同樣，可是因爲視網膜屏幕的物理像素點比通常的屏幕小，圖像在上面好像是被放大了，圖像會變得模糊，爲了解決這個問題，可使用比原來大一倍的圖像，而後用css樣式強制把圖像的尺寸設爲原來圖像尺寸的大小，就能夠解決模糊的問題。

清晰度解決過程示意圖：

背景圖強制改變大小，可使用background新屬性

background新屬性

background-size:

length：用長度值指定背景圖像大小。不容許負值。(:value value;第一個值爲背景圖片的寬，第二個值爲背景圖片的高，單位px)
percentage：用百分比指定背景圖像大小。不容許負值。(:value value;第一個值爲背景圖片的寬，第二個值爲背景圖片的高，單位%)
auto：背景圖像的真實大小。
cover：將背景圖像等比縮放到徹底覆蓋容器，背景圖像有可能超出容器。
contain：將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。

PC及移動端頁面適配方法

設備屏幕有多種不一樣的分辨率，頁面適配方案有以下幾種：

一、全適配：流體佈局+響應式佈局
二、移動端適配：

流體佈局+少許響應式
基於rem的佈局
彈性盒模型

流體佈局

流體佈局，就是使用百分比來設置元素的寬度，元素的高度按實際高度寫固定值，流體佈局中，元素的邊線沒法用百分比，使用 box-sizing 屬性將盒子設置爲從邊線計算盒子尺寸。

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  6  <title>Document</title>  7 
 8  <style>  9  *{
10  padding: 0;
11  margin: 0;
12     }
13  ul{
14  height: 50px;
15  background-color: gold;
16        }
17 
18  li{
19  width: 25%;
20  height: 50px;
21  float: left;
22  text-align: center;
23  line-height: 50px;
24  list-style: none;
25        }
26 
27  </style> 28 </head> 29 <body> 30  <ul> 31  <li>新聞</li> 32  <li>新聞</li> 33  <li>新聞</li> 34  <li>新聞</li> 35  </ul> 36 </body> 37 </html>

流體佈局

box-sizing
一、content-box 默認的盒子尺寸計算方式
二、border-box 置盒子的尺寸計算方式爲從邊框開始，盒子的尺寸，邊框和內填充算在盒子尺寸內

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  6  <title>Document</title>  7 
 8  <style>  9  *{
10  padding: 0;
11  margin: 0;
12     }
13  ul{
14  height: 50px;
15  background-color: gold;
16        }
17 
18  li{
19  width: 25%;
20  height: 50px;
21  float: left;
22  text-align: center;
23  line-height: 50px;
24  list-style: none;
25  border: 2px solid red;
26        }
27 
28  </style> 29 </head> 30 <body> 31  <ul> 32  <li>新聞</li> 33  <li>新聞</li> 34  <li>新聞</li> 35  <li>新聞</li> 36  </ul> 37 </body> 38 </html>

流體佈局加邊框有問題

 1 <!DOCTYPE html>  2 <html lang="en">  3 <head>  4  <meta charset="UTF-8">  5  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  6  <title>Document</title>  7 
 8  <style>  9  *{
10  padding: 0;
11  margin: 0;
12     }
13  ul{
14  height: 50px;
15  background-color: gold;
16        }
17 
18  li{
19  width:25%;
20  height: 50px;
21  float: left;
22  text-align: center;
23  line-height: 50px;
24  list-style: none;
25  border: 2px solid red;
26  box-sizing:border-box;/*盒子的邊框從邊框開始算起 */     }
27 
28  </style> 29 </head> 30 <body> 31  <ul> 32  <li>新聞</li> 33  <li>新聞</li> 34  <li>新聞</li> 35  <li>新聞</li> 36  </ul> 37 </body> 38 </html>

流體佈局解決加邊框的問題

響應式佈局

響應式佈局就是使用媒體查詢的方式，經過查詢瀏覽器寬度，不一樣的寬度應用不一樣的樣式塊，每一個樣式塊對應的是該寬度下的佈局方式，從而實現響應式佈局。響應式佈局的頁面能夠適配多種終端屏幕（pc、平板、手機）。

相應佈局的僞代碼以下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0;
       } li{ width: 23%; height: 209px; background-color: gold; float: left; margin-left: 2%; list-style: none;
       } @media(max-width: 800px){ li{ width: 46%; height: 209px; margin-bottom: 20px;
              } } @media(max-width: 400px){ li{ width: 96%; height: 209px; margin-bottom: 20px;
              } } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </body> </html>