css，為網頁設定樣式
認識css
css全稱層疊樣式表。主要用於定義htm在瀏覽器中的顯示樣式，比如文字大小顏色字型等。
< style>
p < /style>
< body>
< p>你好< /p>
< /body>
css的優勢
同時設定標籤型別相同的標籤樣式
標籤名**語法
選擇符（也就是標籤）
宣告有多條時用；號隔開（英文狀態下）
css注釋**
/注釋語句/
html 中用 < !-----注釋語句------->
css的插入按樣式
css的插入樣式可以分為內聯式、嵌入式和外部式三種。
1、css樣式檔名稱以有意義的英文本母命名，如 main.css。
2、rel=「stylesheet」 type=「text/css」 是固定寫法不可修改。
3、標籤位置一般寫在標籤之內。
三種方式顯示優先順序：內聯式》嵌入式》外部式
css選擇器
定義：選擇器
選擇器為網頁中的元素 內容
------定義該p標籤的類為pub 然後在中寫css** .pub 注意有個英文圓點
使用部分：
示範div
類選擇器和id選擇器的區別
類選擇器可以在乙個文件中使用多次，且可以合併使用，如
其中pub和pab為定義的兩個類
id選擇器只能使用一次 你好
定義時用這個 .first>span
如果是id和class同一樣式：
#id,.class
繼承器、優先順序和重要性
css字型樣式
css文字樣式
css盒模型
在css中，html中的標籤元素大體被分為三種不同的型別：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。
常用的塊狀元素有：
< div>、< p>、< h1>…< h6>、< ol>、< ul>、< dl>、< table>、< address>、< blockquote> 、< form>
常用的內聯元素有：
< a>、< span>、< br>、< i>、< em>、< strong>、< label>、< q>、< var>、< cite>、< code>
常用的內聯塊狀元素有：
< img>、< input>
1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，乙個塊級元素獨佔一行）
2、元素的高度、寬度、行高以及頂和底邊距都可設定。
3、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定乙個寬度。
2、元素的高度、寬度及頂部和底部邊距不可設定；
3、元素的寬度就是它包含的文字或的寬度，不可改變
1、和其他元素都在一行上；
2、元素的高度、寬度、行高以及頂和底邊距都可設定。
布局模型
布局模型是建立在盒模型基礎之上，又不同於我們常說的 css3 布局樣式或 css3 布局模板。 css3 布局模板是外在的表現形式。
css3包含3種基本的布局模型，用英文概括為：flow、layer 和 float。
在網頁中，元素有三種布局模型：
1、流動模型（flow）
流動（flow）是預設的網頁布局模式。也就是說網頁在預設狀態下的 html 網頁元素都是根據流動模型來分布網頁內容的。
流動布局模型具有2個比較典型的特徵：
第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以***行***的形式佔據位置。如右側**編輯器中三個塊狀元素標籤(div，h1，p)寬度顯示為100%。
第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。（內聯元素可不像塊狀元素這麼霸道獨佔一行）
2、浮動模型 (float)
任何元素在預設情況下是不能浮動的，但可以用 css 定義為浮動，如 div、p、table、img 等元素都可以被定義為浮動。
float:left-----左浮動
float:right------右浮動
3、層模型（layer）
如何讓html元素在網頁中精確定位，就像影象軟體photoshop中的圖層一樣可以對每個圖層能夠精確定位操作。css定義了一組定位（positioning）屬性來支援層布局模型。
層模型有三種形式：
1、絕對定位(position: absolute)
將元素從文件流中拖出來，然後使用left、right、top、bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗。
絕對定位其實就是相對於瀏覽器，你離右邊多少距離就是從瀏覽器視窗向左多少
2、相對定位(position: relative)
為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成乙個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
3、固定定位(position: fixed)
fixed：表示固定定位，與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身。由於檢視本身是固定的，它不會隨瀏覽器視窗的滾動條滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小，因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響，這與background-attachment:fixed;屬性功能相同。
實現瀏覽器檢視右下角定位div層：
div
彈性盒模型
行內元素——水平居中設定
行內元素怎麼進行水平居中？如果被設定元素為文字、等行內元素時，水平居中是通過給父元素設定 text-align:center 來實現的。
水平居中設定-定寬塊狀元素
當被設定元素為 塊狀元素 時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。
(定寬塊狀元素：塊狀元素的寬度width為固定值。)
定寬和塊狀兩個條件的元素是可以通過設定「左右margin」值為「auto」來實現居中的
面試常考題之已知寬高實現盒子水平垂直居中
1、利用父元素設定相對定位,子元素設定絕對定位,那麼子元素就是相對于父元素定位的特性。
2、子元素設定上和左偏移的值都為50%，是元素的左上角在父元素中心點的位置。
3、然後再用margin給上和左都給負的自身寬高的一半,就能達到垂直水平居中的效果。
面試常考題之寬高不定實現盒子水平垂直居中
1、利用父元素設定相對定位,子元素設定絕對定位,那麼子元素就是相對于父元素定位的特性。
2、子元素設定上和左偏移的值都為50%。
3、然後再用css3屬性translate位移,給上和左都位移-50%距離，就能達到垂直水平居中的效果transform: translate(-50%, -50%);
CSS定位（慕課網學習筆記）
定位模型 static自然模型 relative相對定位模型 absolute絕對定位模型 fixed固定定位模型 sticky磁鐵定位模型 作用使元素定位於 常規 自然流 中 塊 行垂直排列下去，行內水平從左到右 特點1 忽略top,bottom,left,right或者z index宣告 2 兩...
CSS定位（慕課網學習筆記）
定位模型 static自然模型 relative相對定位模型 absolute絕對定位模型 fixed固定定位模型 sticky磁鐵定位模型 作用使元素定位於 常規 自然流 中 塊 行垂直排列下去，行內水平從左到右 特點1 忽略top,bottom,left,right或者z index宣告 2 兩...
慕課網的HTML和CSS學習。 一
1 如果top right bottom left的值相同，如下面 margin 10px 10px 10px 10px 可縮寫為 margin 10px 2 如果top和bottom值相同 left和 right的值相同，如下面 margin 10px 20px 10px 20px 可縮寫為 ma...