整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
嘍大家好，我是作者“未來”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個階段，堅持學(xué)習(xí)3個月蛻變?yōu)閃eb前端高手哦！
志同道合的小伙伴跟我一起學(xué)習(xí)交流哦！
1 文檔流介紹
浮動（ float）
普通流（ normal flow）也叫標準流、文檔流
前面我們說過，網(wǎng)頁布局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？
CSS的定位機制有3種：普通流（標準流）、浮動和定位
htmi語言當中另外一個相當重要的概念——標準流！或者普通流，或者文檔流。普通流實際上就是一個網(wǎng)頁內(nèi)標簽元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨占一行，行內(nèi)元素會按順序依次前后排列；按照這種大前提的布局排列之下絕對不會出現(xiàn)例外的情況叫做普通流布局。
2 浮動是用來做文字環(huán)繞效果的
浮動最早是用來控制圖片，以便達到其他元素（特別是文字）實現(xiàn)“環(huán)繞圖片的效果。
后來，我們發(fā)現(xiàn)浮動有個很有意思的事情：就是讓任何盒子可以一行排列因此我們就慢慢的偏離主題，用浮動的特性來布局了。（CSS3已經(jīng)是我們真正意義上的網(wǎng)頁布局，具體CSS3我們會詳細解釋）
3 體會浮動
元素的浮動是指設(shè)置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
在CSS中，通過float屬性來定義浮動，其基本語法格式如下：
選擇器{ float：屬性值；}
4 浮動就是漂浮的意思
浮動脫離標準流，不占位置，會影響標準流。可以蓋住標準流。浮動只有左右浮動。
5 浮動首先需要添加標準流父級
浮動首先創(chuàng)建包含塊的概念（包裹）。就是說，浮動的元素總是找離它最近的父級元素對齊。但是不會超出內(nèi)邊距的范圍。
6 浮動特性對齊父盒子
7 浮動特性盒子排列
浮動的元素排列位置，跟上一個元素（塊級）有關(guān)系。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。
一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。
8 浮動影響盒子顯示模式
元素添加浮動后，元素會具有行內(nèi)塊元素的特性。元素的大小完全取決于定義的大小或者默認的內(nèi)容多少。
浮動根據(jù)元素書寫的位置來顯示相應(yīng)的浮動。
9 浮動總結(jié)
浮動的目的就是為了讓多個塊級元素同一行上顯示。
float浮漏特（形象的表示）
浮：加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。
漏：加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏給了標準流的盒子。
特：特別注意，首先浮動的盒子需要和標準流的父級搭配使用，其次特別的注意浮動可以使元素顯示模式體現(xiàn)為行內(nèi)塊特性。
10 版心和布局流程
閱讀報紙時容易發(fā)現(xiàn)，雖然報紙中的內(nèi)容很多，但是經(jīng)過合理地排版，版面依然清晰、易讀。同樣，在制作網(wǎng)頁時，要想使頁面結(jié)構(gòu)清晰、有條理，也需要對網(wǎng)頁進行“排版”。
“版心”是指網(wǎng)頁中主體內(nèi)容所在的區(qū)域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值為960pX、980px、1000px、1200px等。
布局流程
為了提高網(wǎng)頁制作的效率，布局時通常需要遵守一定的布局流程，具體如下：
1、確定頁面的版心（可視區(qū)）。
2、分析頁面中的行模塊，以及每個行模塊中的列模塊。
3、制作HTML頁面，CSS文件。
4、CSS初始化，然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網(wǎng)頁的各個模塊。
11 一列固定寬度且居中
12 兩列左套右寬型
快捷生成框架：
按tab鍵即可生成如下框架：
13 通欄平均分布型
看不懂的小伙伴不要氣餒，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學(xué)習(xí)，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。
本章已結(jié)束，下篇文章將分享《12 清除浮動》小伙伴們不要錯過喲！
者：hh_phoebe
轉(zhuǎn)發(fā)鏈接：https://juejin.im/post/5ee0cf335188254ec9505381
上一篇：php基礎(chǔ)知識
主要參考：https://www.w3school.com.cn
思維導(dǎo)圖
思維導(dǎo)圖第一版
web網(wǎng)站可以說是互聯(lián)網(wǎng)的基礎(chǔ)。每個網(wǎng)站，可以比喻為一座座房子。寬帶網(wǎng)絡(luò)，就是房子門前的路。url地址，就是房子的門牌標志。HTML代碼，就是建造房子的建筑材料（磚頭、水泥、鋼筋）；CSS代碼，就是裝修房子的裝修材料；那么Javascript代碼就是這房子的水電了？ JS代碼則更像是未來世界可以讓房子成為變形金剛的智能機器。因此，一些展示“老房子”的瀏覽器，可能并不支持Javascript。
定義：
HTML（Hyper Text Markup Language），是使用標記標簽來描述網(wǎng)頁的一種超文本標記語言。
Web 瀏覽器的作用是讀取 HTML 文檔，并以網(wǎng)頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽，而是使用標簽來解釋頁面的內(nèi)容。HTML定義網(wǎng)頁的內(nèi)容。
CSS（Cascading Style Sheets），指層疊樣式表。樣式定義如何顯示HTML元素，規(guī)定網(wǎng)頁的布局。
Javascript 則是屬于HTML和Web的編程語言，對網(wǎng)頁進行編程。
Jquery 是一個Javascript函數(shù)庫
參考上一篇：php基礎(chǔ)知識，安裝-集成環(huán)境與編輯器
推薦使用 phpstudy + phpstorm
操作步驟：1、在phpstudy 安裝目錄下，把代碼文件放大到根目錄www/ 下。
2、瀏覽器直接訪問 localhost/index.html即可看到效果。
HTML元素：是從開始標簽（start tag）到結(jié)束標簽（end tag）的所有代碼。
例如：<p>前面這個是開始標簽，中間文字是元素內(nèi)容，后面這個是結(jié)束標簽</p>
HTML 標簽可以擁有屬性。屬性提供了有關(guān) HTML 元素的更多的信息。
屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。
屬性總是在 HTML 元素的開始標簽中規(guī)定。
常用HTML元素屬性：
class ：規(guī)定元素的類名（classname），一個html文件里面多個標簽可以擁有相同的類名。
id ：規(guī)定元素的唯一 id，一個html文件里面id不能相同。
style ：規(guī)定元素的行內(nèi)樣式（inline style）
1、標題：標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。<h1> 定義最大的標題。<h6> 定義最小的標題。
2、段落：通過 <p> 標簽定義。
3、注釋標簽 <!-- 與 --> 用于在 HTML 插入注釋。
4、鏈接：<a href="http://www.yummuu.com/">www.yummuu.com</a> 。href 屬性規(guī)定鏈接的目標。開始標簽和結(jié)束標簽之間的文字被作為超級鏈接來顯示。
5、圖像：<img src="yummuu.png" alt="Yummuu" /> 。src 圖像源屬性，alt替換文本屬性。
6、表格標簽：
7、列表標簽
8、塊級元素和內(nèi)聯(lián)元素
<div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器。
<div> 元素沒有特定的含義。除此之外，由于它屬于塊級元素，瀏覽器會在其前后顯示折行。如果與 CSS 一同使用，<div> 元素可用于對大的內(nèi)容塊設(shè)置樣式屬性。
<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法。使用 <table> 元素進行文檔布局不是表格的正確用法。<table> 元素的作用是顯示表格化的數(shù)據(jù)。
<span> 元素是內(nèi)聯(lián)元素，可用作文本的容器。
<span> 元素也沒有特定的含義。
當與 CSS 一同使用時，<span> 元素可用于為部分文本設(shè)置樣式屬性。
兩者的區(qū)別：就是在顯示時是否起新行。塊級元素會起新行，而內(nèi)聯(lián)元素則不會。
9、框架與內(nèi)聯(lián)框架：frame，<iframe src=" " name=" "></iframe>
10、腳本：<script> 定義客戶端腳本，如Javascript；<noscript> 為不支持客戶端腳本的瀏覽器定義替代內(nèi)容。
11、頭部元素：
<head> 元素是所有頭部元素的容器。<head> 內(nèi)的元素可包含腳本，指示瀏覽器在何處可以找到樣式表，提供元信息，等等。
以下標簽都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
<title>：在所有 HTML/XHTML 文檔中都是必需的。它能夠定義瀏覽器工具欄中的標題，提供頁面被添加到收藏夾時顯示的標題，顯示在搜索引擎結(jié)果中的頁面標題。
<base>：為頁面上的所有鏈接規(guī)定默認地址或默認目標（target）
<link> ：定義文檔與外部資源之間的關(guān)系。最常用于連接樣式表。
<style>：用于為 HTML 文檔定義樣式信息。
<meta> 標簽提供關(guān)于 HTML 文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在頁面上，但是對于機器是可讀的。典型的情況是，meta 元素被用于規(guī)定頁面的描述、關(guān)鍵詞、文檔的作者、最后修改時間以及其他元數(shù)據(jù)。
<meta> 標簽始終位于 head 元素中。元數(shù)據(jù)可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。
<script> 標簽用于定義客戶端腳本，比如 JavaScript。
12、HTML實體
在 HTML 中不能使用小于號（<）和大于號（>），這是因為瀏覽器會誤認為它們是標簽。如果希望正確地顯示預(yù)留字符，我們必須在 HTML 源代碼中使用字符實體（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> 元素定義待選擇的選項。列表通常會把首個選項顯示為被選選項。您能夠通過添加 selected 屬性來定義預(yù)定義選項。
<textarea>：定義多行輸入字段（文本域）
<button>：定義可點擊的按鈕
樣式表允許以多種方式規(guī)定樣式信息。樣式可以規(guī)定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內(nèi)部引用多個外部樣式表。
層疊次序
當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。
1、瀏覽器缺省設(shè)置
2、外部樣式表
3、內(nèi)部樣式表（位于 <head> 標簽內(nèi)部）
4、內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）
因此，內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權(quán)，這意味著它將優(yōu)先于以下的樣式聲明：<head> 標簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。
CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
每條聲明由一個屬性和一個值組成。
屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。
selector {property: value}
1、派生選擇器：
通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式，例如: h1 span{color:red;}
2、id選擇器：
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來定義。
3、類選擇器：
以一個點號顯示，例如： .className{text-align: center;}
4、屬性選擇器：
對帶有指定屬性的 HTML 元素設(shè)置樣式。例如： div[rel=’mm’]{ color:’#000’;}
可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。
注釋：只有在規(guī)定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。
5、后代選擇器（包含選擇器）：可以選擇作為某元素后代的元素
6、子元素選擇器：選擇作為某元素子元素的元素。例如：h1>span{font-size:16px;}
7、相鄰兄弟選擇器：可選擇緊接在另一元素后的元素，且二者有相同父元素。
例如：h1 + p {margin-top:50px;}
8、偽類：用于向某些選擇器添加特殊的效果。
:active 向被激活的元素添加樣式
:focus 向擁有鍵盤輸入焦點的元素添加樣式
:hover 當鼠標懸浮在元素上方時，向元素添加樣式
:link 向未被訪問的鏈接添加樣式
:visited 向已被訪問的鏈接添加樣式
:first-child 向元素的第一個子元素添加樣式（不建議使用）
:lang 向帶有指定lang屬性的元素添加樣式
9、偽元素：用于向某些選擇器設(shè)置特殊效果。
:first-letter 向文本的第一個字母添加樣式
:first-line 向文本的首行添加樣式
:before 在元素之前添加內(nèi)容
:after 在元素之后添加內(nèi)容
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
