CSS盒模型及應用（重點）

嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！

志同道合的小伙伴跟我一起學習交流哦！

第二階段 CSS3

10 CSS盒模型及應用（重點）

其實，CSS就三個大模塊：盒子模型、浮動、定位，其余的都是細節。要求這三部分，無論如何也要學的非常精通。

所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距（ padding）、邊框（ border）和外邊距（ margin）組成。

1 看透網頁布局本質

網頁布局中，我們是如何把里面的文字，圖片，按照美工給我們的效果圖排列的整齊有序呢？

我們說過，行內元素比如文字類似牛奶，也需要一個盒子把他們裝起來，我們前面學過的雙標簽都是一個盒子。有了盒子，我們就可以隨意的，自由的，擺放位置了。

網頁布局的本質：把網頁元素比如文字圖片等等，放入盒子里面，然后利用CSS擺放盒子的過程，就是網頁布局。

CSS其實沒有太多邏輯可言，類似我們小時候玩的積木我們可以自由的，隨意的擺放出我們想要的效果。

2 認識盒子模型組成

盒子模型（ Box Model）

首先，我們來看一張圖，來體會下什么是盒子模型

所有的文檔元素（標簽）都會生成一個矩形框，我們稱為元素框（ element box），它描述了一個文檔元素在網頁布局匯總所占的位置大小。因此，每個盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。

3 盒子邊框（border）

語法：

邊框屬性——設置邊框樣式（ border-stye）

邊框樣式用于定義頁面中邊框的風格，常用屬性值如下：

none：沒有邊框即忽略所有邊框的寬度（默認值）

solid：邊框為單實線（最為常用的）

dashed：邊框為虛線

dotted：邊框為點線

double：邊框為雙實線

4 邊框綜合寫法（一）

5 邊框綜合寫法（二）

6 合并細線表格

以前學過的html表格邊框很粗，這里只需要CSS一句話就可以美觀起來。讓我們真的相信，CSS就是我們的白馬王子（白雪公主）。

Table{ border- collapse:collapse；} collapse單詞是合并的意思border-collapse:collapse：表示邊框合并在一起。

7 圓角矩形

從此以后，我們的世界不只有矩形。 radius半徑（距離）

語法格式：

8 盒子內邊距

padding屬性用于設置內邊距。是指邊框與內容之間的距離。

padding-top：上內邊距

padding-right：右內邊距

padding-bottom：下內邊距

padding-left：左內邊距

注意：后面跟幾個數值表示的意思是不一樣的。

9 fireworks測量工具

類似ps

滴管用來拾取顏色，切片工具用來測量距離。

10 新浪導航欄（一）

案例：要求做出下面的效果

11 新浪導航欄（二）

12 外邊距以及盒子居中對齊

margin屬性用于設置外邊距。設置外邊距會在元素之間創建“空白”，這段空白通常不能放置其他內容。

margin-top：上外邊距

margin-right：右外邊距

margin-bottom：下外邊距

margin-left：上外邊距

margin：上外邊距右外邊距下外邊距左外邊距。取值順序跟內邊距相同。

外邊距實現盒子居中

可以讓一個盒子實現水平居中，需要滿足以下兩個條件：

1 必須是塊級元素。

2 盒子必須指定了寬度（width）

然后就給左右的外邊距都設置為auto，就可使塊級元素水平居中。

實際工作中常用這種方式進行網頁布局，示例代碼如下：

13 文字、盒子、圖片和背景水平居中的區別

14 清除內外邊距

為了更方便地控制網頁中的元素，制作網頁時，可使用如下代碼清除元素的默認內外邊距：

15 行內元素上下內外邊距的問題

注意：行內元素是只有左右外邊距的，是沒有上下外邊距的。內邊距，在ie6等低版本瀏覽器也會有問題。

我們盡量不要給行內元素指定上下的內外邊距就好了。

16 外邊距合并（一）

使用 margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并。

相鄰塊元素垂直外邊距的合并當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距 margin-bottom，下面的元素有上外邊距 margin-top，則他們之間的垂直間距不是margin-bottom與 margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷）。

解決方案：避免就好了。

17 外邊距合并（二）

嵌套塊元素垂直外邊距的合并

對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合并。

解決方案：

1.可以為父元素定義1像素的上邊框或上內邊距。

2.可以為父元素添加 overflow:hidden

18 盒子的計算尺寸

content寬度和高度

使用寬度屬性width和高度屬性 height可以對盒子的大小進行控制。

width和 height的屬性值可以為不同單位的數值或相對于父元素的百分比%，實際工作中最常用的是像素值。

大多數瀏覽器，如 Firefox、lE6及以上版本都采用了W3C規范，符合CSS規范的盒子模型的總寬度和總高度的計算原則是：

注意：

1、寬度屬性width和高度屬性 height僅適用于塊級元素，對行內元素無效（img標簽和 input除外）。

2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合并的情況。

19 學會計算盒子尺寸（重點）

Padding-left:15px 會讓盒子向右拉長15像素，所以，寬度weidth要減去15px。

20 padding不影響盒子大小的情況

如果一個盒子沒有給定寬度高度或者繼承父親的寬度高度，則 padding不會影響本盒子大小

21 搜索趣圖（一）案例分析

22 搜索趣圖（二）大盒子

23 搜索趣圖（三）標題

24 搜索趣圖（四）

25 搜索趣圖（五）

26 盒子模型布局穩定性

開始學習盒子模型，同學們最大的困惑就是，分不清內外邊距的使用，什么情況下使用內邊距，什么情況下使用外邊距？

答案是：其實他們大部分情況下是可以混用的。就是說，你用內邊距也可以，用外邊距也可以。你覺得哪個方便，就用哪個。

但是，總有一個最好用的吧，我們根據穩定性來分，建議如下：

按照優先使用寬度（width）其次使用內邊距（ padding）再次外邊距（ margin）。

原因：

1. margin會有外邊距合并還有ie6下面 margin加倍的bug（討厭）所以最后使用。

2. padding會影響盒子大小，需要進行加減計算（麻煩）其次使用。

3. width沒有問題（嗨皮）我們經常使用寬度剩余法、高度剩余法來做。

第一個盒子不是寬度剩余法，后面就是寬度剩余法，解決間距問題。

27 CSS3盒模型

CS53中可以通過box- sazing來指定盒模型，即可指定為 content-box、 border-box，這樣我們計算盒子大小的方式就發生了改變。

可以分成兩種情況：

1、box-sizing:content-box盒子大小為width+ padding+ border content-box:此值為其默認值，其讓元素維持W3C的標準 Box Mode

2、 box-sizing:border-box盒子大小為width就是說 padding和 border是包含到width里面的。

注：上面的標注的width指的是CSS屬性里設置的width:length, content的值是會自動調整的。

28 盒子陰影

語法格式：

box- shadow：水平陰影垂直陰影模糊距離陰影尺寸陰影顏色內/外影；

29 水晶圖片案例?

看不懂的小伙伴不要氣餒，后續的分享中將持續解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。

本章已結束，下篇文章將分享《11 浮動及應用》小伙伴們不要錯過喲！

、html概述

1、html標簽是用來給文本添加語義的，而不是用來修飾文本的；

2、<meta charset="GBK">指定字符集（GB2312、UTF-8），html保存和指定字符一樣，才不會亂碼；

3、<!DOCTYPE html> DTD文檔申明告訴瀏覽器我用的什么協議來寫的，不是html標簽；

4、webstorm快捷鍵大全：https://www.cnblogs.com/yeminglong/p/5995421.html

二、基礎標簽

1、h、p 和 hr 標簽

三個標簽都是占一行

2、注釋：

3、圖片：<img src=" ">

不會獨占一行；
保證不變形，指定寬或者高即可；
title 和 alt 屬性；
src 可以是相對路徑（../ 上一級）和絕對路徑，路徑中盡量不含中文，相對路徑不可跨盤符，路徑分隔統一寫 / ，絕對路徑的可移植性不好；

4、換行： 用于內容未完的換行

5、跳轉：<a href=" "></a>

支持文字和圖片的跳轉；
地址必須加 http 或者 https；
href 可以指定本地的地址；
target（_self 和 _blank）屬性控制跳轉是否打開新的選項卡；
title 提示作用；

6、base 標簽：<base target="_self ">

統一指定 a 標簽怎么打開，寫在 head 中

7、假鏈接：點擊不會跳轉

a 標簽的 href 屬性值為 # 或者 javascript
# 會跳轉到頁面的頂部，而 js 不會

8、錨點：<a href="#id值"><\a>

可以跳轉到頁面的指定位置
可以跳轉到其他頁面的指定位置，只需在 # 前面加上頁面的路徑即可
跳轉無過度動畫

三、列表標簽

1、無序列表（!）

<ul><li><\li><\ul>；
整體不可分割；
ul 除了 li 不建議再加其他的標簽，li 標簽中可以放其他標簽來豐富內容；
li 中還可嵌套列表；
ws快捷生成 ul>li*3>h2+p；

2、有序列表（*）

<ol><li><\li><\ol>；

3、定義列表

dt 是標題，dd 是具體的描述；
推薦一個 dt 一個 dd ，也可以一個 dt 對多個 dd 或者沒有 dd；
dl 中不建議加其他標簽，二 dt 和 dd 可以加；
應用：網站尾部，圖文混排（仿京東做個網站的尾部）；

四、表格標簽

1、格式

表格的邊框默認不顯示（border）

2、屬性

（1）寬高

table 和 td 可用；
默認高寬根據內容調整；
td 設置高寬只會改變當前單元格的狀態，而不會改變 table 的高寬；

（2）水平和垂直對齊（align 和 valign）

水平對齊三個都可以用，而垂直對齊針對 tr 和 td；
table 設置 align 控制表格在水平方向的對齊，給 tr 和 td 設置都是控制單元格里的內容的對齊方式，不過 tr 影響一行，td 影響一個，tr 和 td 都設置 td 會覆蓋 tr 的效果；
tr 和 td 設置 valign 都是控制單元格內容的垂直方向的對齊，不過 tr 影響一行，td 影響一個，tr 和 td 都設置 td 會覆蓋 tr 的效果；

（3）內邊距和外邊距（cellpadding 和 cellspacing）

兩個屬性都是 table 的；
外邊距是指格子與格子之間的空隙，而內邊距是指格子與文字之間的間隙；

（4）細線表格

先給 table 設置 bgcolor；
再給 tr 設置 bgcolor；
最后 table 設置 cellspacing；

3、表格的其他標簽

（1）caption：表格的標題標簽，必須寫在 table 內而且需緊跟 table

（2）th：th 和 td 同級，th 有加粗的效果

4、表格的結構

（1）組成：caption 標題、thead 表頭、tbody 主體、tfoot 尾部

（2）說明：

瀏覽器自動添加 tbody；
table 設置高度后，tfoot 和 thead 的高度是不會變化的；

5、單元格的合并

（1）水平方向：td 屬性 colspan = "2"；

（2）垂直方向：td 屬性 rowspan = "2"；

五、表單標簽

1、格式

2、input 標簽

（1）type = text：

（2）password：

（3）radio：互斥要設置 name 相同；默認選中 checked

（4）checkbox：選中 checked

（5）button：

（6）image：

（7）reset：value 修改標題

（8）submit：

form 的 action 確定提交的地址
提交數據加 name 屬性

（9）hidden：

-----------------------------------------------------------------------------------------------------------------------

*相關標簽：

label 標簽：讓文字與 input 標簽綁定；兩種綁定的方式：

datalist 標簽：給輸入框綁定輸入的提示：<datalist><option>haha</option></datalist>
h5 中新增的 input 標簽：email 、url 、number 、color、date（瀏覽器的支持不好）

3、非 input 標簽

（1）select

（2）textarea

cols 和 rows 指定輸入的行列，但是還是可以無限輸入
默認可拉伸，也可通過 css 固定大小

4、練習

（1）表單標簽除了 button 外都可以用 value 來指定提交的值

（2）表單添加邊框可以在 form 中添加 fieldset 來實現

六、多媒體標簽

1、video 標簽

（1）格式：<video src=" " autoplay="autoplay"></video>；

（2）屬性：controls（控制條）poster（海報）loop（循環）preload（預加載，與autoplay沖突）muted（靜音）width/height；

（3）另一種 video 格式：解決瀏覽器的兼容

（4）讓所有的瀏覽器支持 video 標簽：通過 js 框架來實現

2、audio 標簽

（1）使用基本和 video 一樣，屬性只有寬高和 poster 不能用，也是兩種格式

3、details 和 summary 標簽

（1）格式：

4、marquee標簽（跑馬燈效果）

（1）w3c 不推薦，但是瀏覽器的支持好

（2）屬性：direction（方向）scrollamount（滾動的速度）loop（滾動次數，默認-1）behavior（滾動類型 slide）

（3）廢棄的標簽： <hr>加粗下劃線斜體<s>刪除線（無語義）

替代的標簽：<ins><del>（加入了語義）

5、字符實體

（1）&nbsp；空格 &lt；&gt； &copy；版權符號

（2）理解：html 占用了的不顯示的特殊字符用另外的代替符號表示，使他們正常在 html 頁面上顯示

eta介紹
icon網頁圖標
表格
表單

meta介紹

設置編碼

<meta charset="utf-8">

設置關鍵字

<meta name="keywords" content="html, java, 前端" />

設置網頁描述

<meta name="description" content="這是一個簡單的html頁面" />

網頁重定向

<meta http-equiv="refresh" content="3; http://www.baidu.com">

作者

<meta name="author" content="小火柴" />

設置蜘蛛爬取狀態

<meta name="robots" content="all|none|index|follow|noindex|nofollow">all 文件將被檢索，且頁面上的連接可以被查詢

icon網頁圖標

<link rel="icon" href="test.ico"/>

表格

<table border="1" width="500" height="300" cellspacing="0" cellpadding="10" bgcolor="#cfcfcf" align="centers">

表格的標準結構

<table border="1" width="500" height="300">

表頭

<table border="1" width="500" height="300">

合并

<table border="1" width="500" height="300">

表格的標題直接在td的地方換成th 邊框的顏色

<table border="1" width="500" height="300" bordercolor="red">

內容的垂直對其方式在td中添加屬性 valign="top" top 頂部 middle 居中 bottom 靠下細線的表格

<table bgcolor="green" width="500" height="300" cellspacing="1">

表格小案例 -- 課程表

<table width="300" height="250" bgcolor="green" cellspacing="1" align="center">

表單

表單的作用的就是用來收集信息

表單域

<form action="" method="get">

輸入框屬性簡介

<input type="text" name="userName" maxlength="8" readonly="readonly" value="admin" disabled="disabled">

單選框

<input type="radio" name="sex" value="男" checked="checked" />男

下拉列表

<select multiple="multiple">

多選框

<input type="checkbox" name="play" value="籃球" checked="checked">籃球

多行文本框文本域

<textarea cols="30" rows="10"></textarea>cols 輸入字符寬

文件上傳組件

<input type="file" name="myfile">

文件的提交

<input type="submit" value="提交">

按鈕

<input type="button" value="我的第一個按鈕"/>

圖片提交按鈕

<input type="image" src="submit.jpg" />

重置按鈕

<input type="reset" value="重置" />

信息分組

<fieldset>

h5表單控件

<!-- 網址控件 --><input type="url"/><!-- 日期控件 --><input type="date" /><!-- 時間控件 --><input type="time" /><!-- 郵件控件 --><input type="email" /><!-- 數字控件 --><input type="number" step="5"/><!-- 滑塊控件 --><input type="range" step="5" value="10"/>

在線咨詢

上一篇：HTML 顏色
下一篇：HTML網頁制作常用標簽及說明-前端開發入門