嘍大家好，我是作者“未來(lái)”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個(gè)階段，堅(jiān)持學(xué)習(xí)3個(gè)月蛻變?yōu)閃eb前端高手哦！

志同道合的小伙伴跟我一起學(xué)習(xí)交流哦！

第二階段 CSS3

11 浮動(dòng)及應(yīng)用

1 文檔流介紹

浮動(dòng)（ float）

普通流（ normal flow）也叫標(biāo)準(zhǔn)流、文檔流

前面我們說(shuō)過(guò)，網(wǎng)頁(yè)布局的核心，就是用CSS來(lái)擺放盒子位置。如何把盒子擺放到合適的位置？

CSS的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）、浮動(dòng)和定位

htmi語(yǔ)言當(dāng)中另外一個(gè)相當(dāng)重要的概念——標(biāo)準(zhǔn)流！或者普通流，或者文檔流。普通流實(shí)際上就是一個(gè)網(wǎng)頁(yè)內(nèi)標(biāo)簽元素正常從上到下，從左到右排列順序的意思，比如塊級(jí)元素會(huì)獨(dú)占一行，行內(nèi)元素會(huì)按順序依次前后排列；按照這種大前提的布局排列之下絕對(duì)不會(huì)出現(xiàn)例外的情況叫做普通流布局。

2 浮動(dòng)是用來(lái)做文字環(huán)繞效果的

浮動(dòng)最早是用來(lái)控制圖片，以便達(dá)到其他元素（特別是文字）實(shí)現(xiàn)“環(huán)繞圖片的效果。

后來(lái)，我們發(fā)現(xiàn)浮動(dòng)有個(gè)很有意思的事情：就是讓任何盒子可以一行排列因此我們就慢慢的偏離主題，用浮動(dòng)的特性來(lái)布局了。（CSS3已經(jīng)是我們真正意義上的網(wǎng)頁(yè)布局，具體CSS3我們會(huì)詳細(xì)解釋）

3 體會(huì)浮動(dòng)

元素的浮動(dòng)是指設(shè)置了浮動(dòng)屬性的元素會(huì)脫離標(biāo)準(zhǔn)普通流的控制，移動(dòng)到其父元素中指定位置的過(guò)程。

在CSS中，通過(guò)float屬性來(lái)定義浮動(dòng)，其基本語(yǔ)法格式如下：

選擇器{ float：屬性值；}

4 浮動(dòng)就是漂浮的意思

浮動(dòng)脫離標(biāo)準(zhǔn)流，不占位置，會(huì)影響標(biāo)準(zhǔn)流?？梢陨w住標(biāo)準(zhǔn)流。浮動(dòng)只有左右浮動(dòng)。

5 浮動(dòng)首先需要添加標(biāo)準(zhǔn)流父級(jí)

浮動(dòng)首先創(chuàng)建包含塊的概念（包裹）。就是說(shuō)，浮動(dòng)的元素總是找離它最近的父級(jí)元素對(duì)齊。但是不會(huì)超出內(nèi)邊距的范圍。

6 浮動(dòng)特性對(duì)齊父盒子

7 浮動(dòng)特性盒子排列

浮動(dòng)的元素排列位置，跟上一個(gè)元素（塊級(jí)）有關(guān)系。如果上一個(gè)元素有浮動(dòng)，則A元素頂部會(huì)和上一個(gè)元素的頂部對(duì)齊；如果上一個(gè)元素是標(biāo)準(zhǔn)流，則A元素的頂部會(huì)和上一個(gè)元素的底部對(duì)齊。

一個(gè)父盒子里面的子盒子，如果其中一個(gè)子級(jí)有浮動(dòng)的，則其他子級(jí)都需要浮動(dòng)。這樣才能一行對(duì)齊顯示。

8 浮動(dòng)影響盒子顯示模式

元素添加浮動(dòng)后，元素會(huì)具有行內(nèi)塊元素的特性。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少。

浮動(dòng)根據(jù)元素書(shū)寫(xiě)的位置來(lái)顯示相應(yīng)的浮動(dòng)。

9 浮動(dòng)總結(jié)

浮動(dòng)的目的就是為了讓多個(gè)塊級(jí)元素同一行上顯示。

float浮漏特（形象的表示）

?。杭恿烁?dòng)的元素盒子是浮起來(lái)的，漂浮在其他的標(biāo)準(zhǔn)流盒子上面。

漏：加了浮動(dòng)的盒子，不占位置的，它浮起來(lái)了，它原來(lái)的位置漏給了標(biāo)準(zhǔn)流的盒子。

特：特別注意，首先浮動(dòng)的盒子需要和標(biāo)準(zhǔn)流的父級(jí)搭配使用，其次特別的注意浮動(dòng)可以使元素顯示模式體現(xiàn)為行內(nèi)塊特性。

10 版心和布局流程

閱讀報(bào)紙時(shí)容易發(fā)現(xiàn)，雖然報(bào)紙中的內(nèi)容很多，但是經(jīng)過(guò)合理地排版，版面依然清晰、易讀。同樣，在制作網(wǎng)頁(yè)時(shí)，要想使頁(yè)面結(jié)構(gòu)清晰、有條理，也需要對(duì)網(wǎng)頁(yè)進(jìn)行“排版”。

“版心”是指網(wǎng)頁(yè)中主體內(nèi)容所在的區(qū)域。一般在瀏覽器窗口中水平居中顯示，常見(jiàn)的寬度值為960pX、980px、1000px、1200px等。

布局流程

為了提高網(wǎng)頁(yè)制作的效率，布局時(shí)通常需要遵守一定的布局流程，具體如下：

1、確定頁(yè)面的版心（可視區(qū)）。

2、分析頁(yè)面中的行模塊，以及每個(gè)行模塊中的列模塊。

3、制作HTML頁(yè)面，CSS文件。

4、CSS初始化，然后開(kāi)始運(yùn)用盒子模型的原理，通過(guò)DIV+CSS布局來(lái)控制網(wǎng)頁(yè)的各個(gè)模塊。

11 一列固定寬度且居中

12 兩列左套右寬型

快捷生成框架：

按tab鍵即可生成如下框架：

13 通欄平均分布型

看不懂的小伙伴不要?dú)怵H，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學(xué)習(xí)，每篇文章看三遍，一個(gè)月后，回過(guò)頭來(lái)看之前的文章就會(huì)感覺(jué)簡(jiǎn)單極了。

本章已結(jié)束，下篇文章將分享《12 清除浮動(dòng)》小伙伴們不要錯(cuò)過(guò)喲！

者：hh_phoebe

轉(zhuǎn)發(fā)鏈接：https://juejin.im/post/5ee0cf335188254ec9505381

上一篇：php基礎(chǔ)知識(shí)

主要參考：https://www.w3school.com.cn

思維導(dǎo)圖

思維導(dǎo)圖第一版

1、web編程基礎(chǔ)-什么是HTML、CSS、Javascript

web網(wǎng)站可以說(shuō)是互聯(lián)網(wǎng)的基礎(chǔ)。每個(gè)網(wǎng)站，可以比喻為一座座房子。寬帶網(wǎng)絡(luò)，就是房子門(mén)前的路。url地址，就是房子的門(mén)牌標(biāo)志。HTML代碼，就是建造房子的建筑材料（磚頭、水泥、鋼筋）；CSS代碼，就是裝修房子的裝修材料；那么Javascript代碼就是這房子的水電了？ JS代碼則更像是未來(lái)世界可以讓房子成為變形金剛的智能機(jī)器。因此，一些展示“老房子”的瀏覽器，可能并不支持Javascript。

定義：

HTML（Hyper Text Markup Language），是使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)的一種超文本標(biāo)記語(yǔ)言。

Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁(yè)的形式顯示出它們。瀏覽器不會(huì)顯示 HTML 標(biāo)簽，而是使用標(biāo)簽來(lái)解釋頁(yè)面的內(nèi)容。HTML定義網(wǎng)頁(yè)的內(nèi)容。

CSS（Cascading Style Sheets），指層疊樣式表。樣式定義如何顯示HTML元素，規(guī)定網(wǎng)頁(yè)的布局。

Javascript 則是屬于HTML和Web的編程語(yǔ)言，對(duì)網(wǎng)頁(yè)進(jìn)行編程。

Jquery 是一個(gè)Javascript函數(shù)庫(kù)

2、環(huán)境配置

參考上一篇：php基礎(chǔ)知識(shí)，安裝-集成環(huán)境與編輯器

推薦使用 phpstudy + phpstorm

操作步驟：1、在phpstudy 安裝目錄下，把代碼文件放大到根目錄www/ 下。

2、瀏覽器直接訪問(wèn) localhost/index.html即可看到效果。

3、HTML

HTML元素：是從開(kāi)始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼。

例如：<p>前面這個(gè)是開(kāi)始標(biāo)簽，中間文字是元素內(nèi)容，后面這個(gè)是結(jié)束標(biāo)簽</p>

HTML 標(biāo)簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。

屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如：name="value"。

屬性總是在 HTML 元素的開(kāi)始標(biāo)簽中規(guī)定。

常用HTML元素屬性：

class ：規(guī)定元素的類名（classname），一個(gè)html文件里面多個(gè)標(biāo)簽可以擁有相同的類名。

id ：規(guī)定元素的唯一 id，一個(gè)html文件里面id不能相同。

style ：規(guī)定元素的行內(nèi)樣式（inline style）

3.1、常用HTML標(biāo)簽：

1、標(biāo)題：標(biāo)題（Heading）是通過(guò) <h1> - <h6> 等標(biāo)簽進(jìn)行定義的。<h1> 定義最大的標(biāo)題。<h6> 定義最小的標(biāo)題。

2、段落：通過(guò) <p> 標(biāo)簽定義。

3、注釋標(biāo)簽 <!-- 與 --> 用于在 HTML 插入注釋。

4、鏈接：<a href="http://www.yummuu.com/">www.yummuu.com</a> 。href 屬性規(guī)定鏈接的目標(biāo)。開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超級(jí)鏈接來(lái)顯示。

5、圖像：<img src="yummuu.png" alt="Yummuu" /> 。src 圖像源屬性，alt替換文本屬性。

6、表格標(biāo)簽：

7、列表標(biāo)簽

8、塊級(jí)元素和內(nèi)聯(lián)元素

<div> 元素是塊級(jí)元素，它是可用于組合其他 HTML 元素的容器。

<div> 元素沒(méi)有特定的含義。除此之外，由于它屬于塊級(jí)元素，瀏覽器會(huì)在其前后顯示折行。如果與 CSS 一同使用，<div> 元素可用于對(duì)大的內(nèi)容塊設(shè)置樣式屬性。

<div> 元素的另一個(gè)常見(jiàn)的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進(jìn)行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。

<span> 元素是內(nèi)聯(lián)元素，可用作文本的容器。

<span> 元素也沒(méi)有特定的含義。

當(dāng)與 CSS 一同使用時(shí)，<span> 元素可用于為部分文本設(shè)置樣式屬性。

兩者的區(qū)別：就是在顯示時(shí)是否起新行。塊級(jí)元素會(huì)起新行，而內(nèi)聯(lián)元素則不會(huì)。

9、框架與內(nèi)聯(lián)框架：frame，<iframe src=" " name=" "></iframe>

10、腳本：<script> 定義客戶端腳本，如Javascript；<noscript> 為不支持客戶端腳本的瀏覽器定義替代內(nèi)容。

11、頭部元素：

<head> 元素是所有頭部元素的容器。<head> 內(nèi)的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。

以下標(biāo)簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

<title>：在所有 HTML/XHTML 文檔中都是必需的。它能夠定義瀏覽器工具欄中的標(biāo)題，提供頁(yè)面被添加到收藏夾時(shí)顯示的標(biāo)題，顯示在搜索引擎結(jié)果中的頁(yè)面標(biāo)題。

<base>：為頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)（target）

<link> ：定義文檔與外部資源之間的關(guān)系。最常用于連接樣式表。

<style>：用于為 HTML 文檔定義樣式信息。

<meta> 標(biāo)簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會(huì)顯示在頁(yè)面上，但是對(duì)于機(jī)器是可讀的。典型的情況是，meta 元素被用于規(guī)定頁(yè)面的描述、關(guān)鍵詞、文檔的作者、最后修改時(shí)間以及其他元數(shù)據(jù)。

<meta> 標(biāo)簽始終位于 head 元素中。元數(shù)據(jù)可用于瀏覽器（如何顯示內(nèi)容或重新加載頁(yè)面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。

<script> 標(biāo)簽用于定義客戶端腳本，比如 JavaScript。

12、HTML實(shí)體

在 HTML 中不能使用小于號(hào)（<）和大于號(hào)（>），這是因?yàn)闉g覽器會(huì)誤認(rèn)為它們是標(biāo)簽。如果希望正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實(shí)體（character entities）。

13、表單元素：

<form> ：定義 HTML 表單。

<input> ：是最重要的表單元素。<input> 元素有很多形態(tài)，根據(jù)不同的 type 屬性。

input的輸入類型type有text、password、submit、radio、checkbox、button；（HTML5新增）number、date、color、range、month、week、time、datetime、datetime-local、email、search、tel、url。

input的常用屬性：value、readonly、disabled、size、maxlength；（HTML5新增）required、multiple、pattern、min和max、list、height和width、autocomplete

<select> ：定義下拉列表 <option> 元素定義待選擇的選項(xiàng)。列表通常會(huì)把首個(gè)選項(xiàng)顯示為被選選項(xiàng)。您能夠通過(guò)添加 selected 屬性來(lái)定義預(yù)定義選項(xiàng)。

<textarea>：定義多行輸入字段（文本域）

<button>：定義可點(diǎn)擊的按鈕

4、CSS

樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個(gè)的 HTML 元素中，在 HTML 頁(yè)的頭元素中，或在一個(gè)外部的 CSS 文件中。甚至可以在同一個(gè) HTML 文檔內(nèi)部引用多個(gè)外部樣式表。

層疊次序

當(dāng)同一個(gè) HTML 元素被不止一個(gè)樣式定義時(shí)，會(huì)使用哪個(gè)樣式呢？

一般而言，所有的樣式會(huì)根據(jù)下面的規(guī)則層疊于一個(gè)新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。

1、瀏覽器缺省設(shè)置

2、外部樣式表

3、內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部）

4、內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）

因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：<head> 標(biāo)簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。

4.1、CSS語(yǔ)法

CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。

selector {declaration1; declaration2; ... declarationN }

每條聲明由一個(gè)屬性和一個(gè)值組成。

屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個(gè)屬性有一個(gè)值。屬性和值被冒號(hào)分開(kāi)。

selector {property: value}

4.2、CSS選擇器

1、派生選擇器：

通過(guò)依據(jù)元素在其位置的上下文關(guān)系來(lái)定義樣式，例如: h1 span{color:red;}

2、id選擇器：

id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來(lái)定義。

3、類選擇器：

以一個(gè)點(diǎn)號(hào)顯示，例如： .className{text-align: center;}

4、屬性選擇器：

對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式。例如： div[rel=’mm’]{ color:’#000’;}

可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。

注釋：只有在規(guī)定了 !DOCTYPE 時(shí)，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。

5、后代選擇器（包含選擇器）：可以選擇作為某元素后代的元素

6、子元素選擇器：選擇作為某元素子元素的元素。例如：h1>span{font-size:16px;}

7、相鄰兄弟選擇器：可選擇緊接在另一元素后的元素，且二者有相同父元素。

例如：h1 + p {margin-top:50px;}

8、偽類：用于向某些選擇器添加特殊的效果。

:active 向被激活的元素添加樣式

:focus 向擁有鍵盤(pán)輸入焦點(diǎn)的元素添加樣式

:hover 當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式

:link 向未被訪問(wèn)的鏈接添加樣式

:visited 向已被訪問(wèn)的鏈接添加樣式

:first-child 向元素的第一個(gè)子元素添加樣式（不建議使用）

:lang 向帶有指定lang屬性的元素添加樣式

9、偽元素：用于向某些選擇器設(shè)置特殊效果。

:first-letter 向文本的第一個(gè)字母添加樣式

:first-line 向文本的首行添加樣式

:before 在元素之前添加內(nèi)容

:after 在元素之后添加內(nèi)容

4.3、常用CSS屬性