HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第5章CSS盒子模型

阿新 • • 發佈：2020-07-29

本教程案例線上演示

有路網PC端
 有路網移動端

教程配套原始碼資源

div

div 可定義文件中的分割槽（division）。

div 標籤可以把網頁分割為獨立的、不同的部分。

可以看成以下結構：

div不像 h1，p標籤，沒有任何預設樣式，其主要作用是標識網頁上的某塊區域。常見做法是通過給div元素加上id或class，然後通過css選中某個div，對其進行樣式美化。

<div class="demo">我是一個div</div>

<style>
        .demo{
            color:red;
            font-size: 20px;
        }   
</style>

每個div可以看成一個盒子

一個盒子中主要的屬性有5個：width、height、padding、border、margin。如下：

width：內容的寬度。CSS中 width 指的是內容的寬度，而不是盒子的寬度。盒子的寬度=內容寬度+padding+border

height：內容的高度。CSS中 height 指的是內容的高度，而不是盒子的高度。盒子的高度=內容高度+padding+border

padding：內邊距。

border：邊框。

margin：外邊距。

元素寬高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>        div {
        width: 200px;
        height: 200px;
        background-color: gray;
    }    </style>
</head>
<body>
<div>我是一隻小小鳥</div>
</body>
</html>

邊框

屬性說明示例

border-top-color 上邊框顏色

border-top-color:#369;

border-right-color 右邊框顏色

border-right-color:#369;

border-bottom-color 下邊框顏色

border-bottom-color:#fae45b;

border-left-color 左邊框顏色

border-left-color:#efcd56;

border-color 四個邊框為同一顏色

border-color:#eeff34;

上、下邊框顏色：#369

左、右邊框顏色：#000

border-color:#369 #000;

上邊框顏色：#369

左、右邊框顏色：#000

下邊框顏色：#f00

border-color:#369 #000 #f00;

上、右、下、左邊框顏色：

#369、#000、#f00、#00f

border-color:#369 #000 #f00 #00f;

邊框粗細

border-width:畫素值

        order-top-width:5px;
        border-right-width:10px;
        border-bottom-width:8px;
        border-left-width:22px;
        border-width:5px ;
        border-width:20px 2px;
        border-width:5px 1px 6px;
        border-width:1px 3px 5px 2px;

邊框樣式

none
hidden
dotted
dashed
solid
double

        border-top-style:solid;
        border-right-style:solid;
        border-bottom-style:solid;
        border-left-style:solid;
        border-style:solid ;
        border-style:solid dotted;
        border-style:solid dotted dashed;
        border-style:solid dotted dashed double;

border簡寫

同時設定邊框的顏色、粗細和樣式

       border-bottom: 9px #F00 dashed ;
        border: 9px #F00 dashed ;

外邊距

  margin-top
    margin-right
    margin-bottom
    margin-left
    margin

          margin-top: 1px 
            margin-right : 2 px 
            margin-bottom : 2 px 
            margin-left : 1 px 
            margin : 3 px 5 px 7 px 4 px;
            margin: 3px 5px;
            margin: 3px 5px 7px;
            margin: 8px;

外邊距的妙用

網頁居中對齊
前提，居中對齊的網頁元素必須設定寬度。

margin:0px  auto;

內邊距

padding

    padding-left
			
    padding-right
			
    padding-top
			
    padding-bottom
			
    padding

padding-left:10px;
padding-right: 5px;
padding-top: 20px;
padding-bottom:8px;
padding:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding:10px;

盒子型模的尺寸

盒子模型總尺寸=border-width+padding+內容寬度

box-sizing

box-sizing 是用於告訴瀏覽器如何計算一個元素是總寬度和總高度

box-sizing: content-box

width = content width;

height = content height

box-sizing: border-box

width = border + padding + content width

heigth = border + padding + content heigth

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

<style>
div {
  width: 160px;
  height: 80px;
  padding: 20px;
 border: 8px solid orange;
  background: pink;
}

 /**元素的總寬度 = 160 + 20*2 + 8*2; 總高度 = 80 + 20*2 + 8*2 ; */ 
.content-box { 
  box-sizing: content-box; 
}

 /** 元素的總寬度 = 160; 總高度 = 80px; */  
.border-box { 
  box-sizing: border-box;
}
</style>

content box:

border box:

總結一下：

1.對於給定width和height的元素，設定box-sizing屬性會影響盒子content width和 content height。

2.瀏覽器預設使用標準盒子模型，即box-sizing: content-box, 就是我們所寫的寬度和高度就是對content 進行設定的。

3.在一些響應式佈局中，我們修改了瀏覽器計算元素寬度、高度的方式，認為元素的寬度和高度是包括內邊距padding和邊框border

元素預設樣式

很多標籤都有自己的預設樣式

我們在chrome瀏覽器中執行時，可以通過開發者工具(快捷鍵Ctrl+Shift+I)來一個個審查元素，來看看它們的預設樣式

body標籤的margin為8px

p標籤的上下外邊距為16px

h1標籤的上下外邊距為21.440px

ul標籤的上下外邊距也為16px，左內邊距也為40px

重置預設樣式

為了相容性，凡是瀏覽預設的樣式，都不要使用。
重置預設樣式 (css reset)

/*預設樣式重置(css reset)*/
body,p,h1,h2,h3,h4,h5,h6,dl,dd{
    margin: 0;
    font-size: 12px; /* 中文字型大小的最小值 */
    /* font-family: xx; 也可以設定字型 */
}
ol,ul {
    list-style: none; /* 去除列表樣式 */
    padding: 0;
    margin: 0;
}

a {
    color: #464646;
    text-decoration: none;
}

a:hover {
    color: #f60;
    text-decoration: underline;
}

取色器工具

用來拾取演示，和測量長度的輕量級工具。
雙擊執行

彈出取色器，點選按鈕

測量寬高

選擇螢幕標尺

測量

拾取顏色

選擇螢幕取色器

隨意選取顏色

練習有路網右側黑板報

我們書寫css的步驟應該按照由外及內，由上至下，由左到右的順序。

black-board.css

.black-board{
  width: 220px;
  background-color: #f9f9f9;
}
.book-con{
  padding: 10px;
  border:1px solid #eaeaea
}
.black-board h2{
  font-size: 16px;
}

.black-board ul{
  padding-top: 14px;
  padding-left: 20px;
}

.black-board li{
  line-height: 22px;
}

youlu-blackboard.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="black-board.css">
</head>
<body>
  <div class="black-board">
    <div class="book-con">
      <h2>黑板報</h2>
      <ul>
        <li><a href="#">2020秋季延遲發貨開啟</a></li>
        <li><a href="#">分享領佣金</a></li>
        <li><a href="#">助力2020開學季！包郵政策再</a></li>
        <li><a href="#">邀請有禮</a></li>
      </ul>
    </div>
    <div class="book-con">
      <h2>購物指南</h2>
      <ul>
        <li><a href="#">支付寶擔保交易，安全快捷</a></li>
        <li><a href="#">保證24小時之內發貨</a></li>
        <li><a href="#">贈送積分，積分可用於支付</a></li>
        <li><a href="#">收貨後7天內可以無理由退貨</a></li>
        <li><a href="#">提供電子商務小包、EMS、快遞</a></li>
        <li><a href="#">配送造成的所有損失由我們承擔</a></li>
        <li><a href="#">提供免費簡訊提醒服務</a></li>
      </ul>
    </div>
    <div class="book-ad-con">
      <img src="img/zhinan.jpg" alt="">
    </div>
  </div>
</body>
</html>

元素分類

行級（內聯）元素

塊級元素

內聯塊元素

行級元素

a
strong
em

內嵌元素的特性：

1.默認同行可以繼續跟同類型標籤

2.內容撐開寬度

3.不支援寬高

4.不支援上下的margin

span

span是一個特殊的行級標籤，和div（塊級標籤）一樣，沒有任何語義（樣式）。

通常用來著重顯示某行文字中的某個單詞

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p{font-size:14px;}
        p .show,.rd span{font-size:36px; font-weight:bold; color:blue;}
        p #dream{font-size:24px; font-weight:bold; color:red;}
    </style>
</head>
<body>
<p>積極推進<span class="show">“科學融入教育”</span>提供優質教育服務</p>
<p>在東部資料，有一群人默默支援你成就<span id="dream">IT夢想</span></p>
<p class="rd">選擇<span>東部資料</span>，成就你的夢想</p>
</body>
</html>

塊級元素

p
div
h1~h6
ol-li
ul-li
dl-dt-dd

塊元素的特性

1.預設獨佔一行顯示

2.沒有寬度時，預設撐滿一排

3.支援所有css命令

練習有路網左側圖書分類

left-category.css

.index-sort{
  width: 208px;
  border: 1px solid #dcdcdc;
  border-top: 0;
  background-color: #FFFFFF;
}

.index-sort li{
  border-bottom: 1px dotted #dcdcdc;
  padding: 0 10px 12px 26px;
}
.index-sort li h2{
  font-size: 14px;
  line-height: 28px;
  padding-left: 8px;
}
.index-sort a{
  line-height: 20px;
  margin: 0 3px;
}

.index-sort .yl-all-index{
  font-size: 14px;
  line-height: 20px;
  padding: 10px;
}

youlu-left-category.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="left-category.css">
</head>
<body>
  <div class="index-sort">
    <ul class="cat-menu">
      <li>
        <h2>
          經濟管理
        </h2>
        <div class="min-sort">
          <a href="#">市場營銷</a>
          <a href="#">經濟學理論</a>
          <a href="#">國際貿易</a>
          <a href="#">物流管理</a>
          <a href="#">管理學原理</a>
          <a href="#">財務管理</a>
        </div>
      </li>
      <li>
        <h2>
          文學藝術
        </h2>
        <div class="min-sort">
          <a href="#">設計</a>
          <a href="#">音樂</a>
          <a href="#">青春文學</a>
          <a href="#">繪畫</a>
          <a href="#">人物傳記</a>
          <a href="#">外國文學</a>
        </div>
      </li>
      <li>
        <h2>
          人文社科
        </h2>
        <div class="min-sort">
          <a href="#">數學</a>
          <a href="#">英語教材</a>
          <a href="#">化學</a>
          <a href="#">日語</a>
          <a href="#">生物科學</a>
          <a href="#">專業英語</a>
        </div>
      </li>
      <li>
        <h2>
          科學技術
        </h2>
        <div class="min-sort">
          <a href="#">語言與程式設計</a>
          <a href="#">電子通訊</a>
          <a href="#">電工電子</a>
          <a href="#">資料庫</a>
          <a href="#">建築工程</a>
          <a href="#">土木工程</a>
        </div>
      </li>
      <li>
        <h2>
          生活休閒
        </h2>
        <div class="min-sort">
          <a href="#">家庭保健</a>
          <a href="#">美食烹飪</a>
          <a href="#">導遊必備</a>
          <a href="#">地理學理論</a>
          <a href="#">動漫卡通</a>
          <a href="#">球類</a>
        </div>
      </li>
      <li>
        <h2>
          教育考試
        </h2>
        <div class="min-sort">
          <a href="#">教學理論</a>
          <a href="#">自考</a>
          <a href="#">研究生考試</a>
          <a href="#">考研英語</a>
          <a href="#">公務員考試</a>
          <a href="#">初高中用書</a>
        </div>
      </li>
    </ul>

    <h2 class="yl-all-index">
      <a href="#">瀏覽所有圖書分類</a>
    </h2>

    <div class="book-ad-first">
      <a href="#">
        <img src="img/haoshu.jpg" alt="新書推薦"/>
      </a>
    </div>
  </div>
</body>
</html>

內聯塊元素—代表元素img

inline-block的特點：

元素在一行顯示

支援寬高

沒有寬度的時候內容撐開寬度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>        
        img {
        width: 300px;
        height: 200px;
        }    
    </style>
</head>
<body>
<img src="img/1.jpg">
<img src="img/2.jpg">
</body>
</html>

display屬性

控制元素的顯示和隱藏

塊級元素與行級元素的轉變

block 塊級元素的預設值，元素會被顯示為塊級元素，該元素前後會帶有換行符

inline 內聯元素的預設值。元素會被顯示為內聯元素，該元素前後沒有換行符

inline-block 內聯塊元素

none 設定元素不會被顯示

練習有路網help導航

help-nav.css

.help{
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
}
.help a{
  border-right: 1px solid gray;
  padding-right: 4px;
  padding-left: 2px;
}
.help .last{
  border-right: 0
}

youlu-help-nav.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="help-nav.css">
</head>
<body>
  <div class="help">
    <a href="#">如何購買</a>
    <a href="#">如何支付</a>
    <a href="#">舊書缺貨怎麼辦</a>
    <a href="#">配送方式與配送費</a>
    <a href="#">普通會員與VIP會員</a>
    <a href="#">有路積分說明</a>
    <a href="#">有路禮券說明</a>
    <a href="#">賬戶餘額說明</a>
    <a href="#">退款退貨說明</a>
    <a href="#" class="last">電子書購買說明</a>
  </div>
</body>
</html>

練習有路網頂部導航

top-nav.css

.topBar{
  height: 30px;
  line-height: 30px;
  width: 1200px;
  margin: 0 auto;
  background-color: #f4f4f4;
}

.topBar .topBarL{
  display: inline-block;
  margin-right: 536px;
}

.topBar .topBarR{
  display: inline-block;
}

.topBar .topBarR li{
  display: inline-block;
}

.topBar .topBarR li a{
  border-right: 1px solid gray;
  padding-left:4px;
  padding-right: 6px;
}

.topBar .login{
  color: red;
}

.topBar .topBarR .last a{
  border-right: 0;
}

youlu-top-nav.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="top-nav.css">
</head>
<body>
  <div class="topBar">
    <div class="topBarL">
      <img src="img/welcome.jpg" alt="">
      <span>您好，歡迎光臨有路網！</span>
    </div>
    <ul class="topBarR">
      <li>
        <a href="#" class="login">請登陸</a>
        <a href="#" class="regist-link">免費註冊</a>
      </li>
      <li><a href="#">我的有路</a></li>
      <li>
        <a href="#">我要開店</a>
      </li>
      <li>
        <a href="#">團購批發</a>
      </li>
      <li><a href="#">客服服務</a></li>
      <li>
        <a href="#" class="menu-btn">
          <img src="img/ico_phone.gif" />手機有路</a
        >
      </li>
      <li class="last">
        <a href="#" class="menu-btn">微信公眾號</a>
      </li>
    </ul>
  </div>
</body>
</html>

背景影象

background-image屬性
background-image:url(圖片路徑);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 800px;
            height: 600px;
            background-image: url("images/book.jpg");

        }
    </style>
</head>
<body>
<div>
    擺渡人擺渡人擺渡人擺渡人
</div>
</body>
</html>

背景重複方式

background-repeat屬性

repeat：沿水平和垂直兩個方向平鋪

no-repeat：不平鋪，即只顯示一次

repeat-x：只沿水平方向平鋪

repeat-y：只沿垂直方向平鋪

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 800px;
            height: 600px;
            background-image: url("images/book.jpg");
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div>
    擺渡人擺渡人擺渡人擺渡人 擺渡人擺渡人擺渡人擺渡人
</div>
</body>
</html>

背景定位

background-position屬性

Xpos Ypos
單位：px
Xpos表示水平位置，Ypos表示垂直位置

X% Y%
使用百分比表示背景的位置

X、Y方向關鍵詞
水平方向的關鍵詞：left、center、right
垂直方向的關鍵詞：top、center、bottom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 800px;
            height: 600px;
            border: 1px solid red;
            background-image: url("images/book.jpg");
            background-repeat: no-repeat;
            background-position: bottom right;
            /* background-position: 50% 50%; */
        }
    </style>
</head>
<body>
<div>
    擺渡人擺渡人擺渡人擺渡人 擺渡人擺渡人擺渡人擺渡人
</div>
</body>
</html>