css（cascading style sheets 層疊樣式表）。html只負責文件的結構和內容，表現形式完全交給css，使html文件變得簡潔。
定義方法： 選擇器
css頁面引入方法：
內聯式：< div style:」color：red;font-size:12px」>…
嵌入式：在標頭檔案中（首頁常用此法，速度快）
會自動為後面的div塊套入樣式
外鏈式
其中css/main.css裡為style裡的div內容。
css常用文字設定 ★
顏色表示法
顏色名表示，red，yellow等
rgb表示，rgb（255,0,0）
16進製制數表示，#ff0000
css選擇器
標籤選擇器
標籤選擇器，此種選擇器影響範圍大，建議盡量應用在層級選擇器中。
類選擇器（應用最多，可以自定義樣式組合，優先順序比id選擇器小）
通過類名來選擇元素，乙個類可應用於多個元素，乙個元素上也可以使用多個類，應用靈活，可復用，是css中應用最多的一種選擇器。
層級選擇器
主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減少命名，同時也可以通過層級，防止命名衝突。
.box span
.box .red
.red
class="box">
....span>
href="#"
class="red">....a>
div>
class="red">....h3>
多個選擇器，如果有同樣的樣式設定，可以使用組選擇器。
.box2:before
.box3:after
class="box1">....div>
class="box2">....div>
class="box3">....div>
塊元素、內聯元素、內聯塊元素
元素就是標籤，布局中常用的有三種標籤，塊元素、內聯元素、內聯塊元素，了解這三種元素的特性，才能熟練的進行頁面布局。
盒子模型
元素在頁面中顯示成乙個方塊，類似乙個盒子，css盒子模型就是使用現實中盒子來做比喻，幫助我們設定元素對應的樣式。
把元素叫做盒子，設定對應的樣式分別為：盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
浮動：文件流
文件流，是指盒子按照html標籤編寫的順序依次從上到下，從左到右排列，塊元素佔一行，行內元素在一行之內從左到右排列，先寫的先排列，後寫的排在後面，每個盒子都佔據自己的位置。
浮動特性
1、浮動元素有左浮動(float:left)和右浮動(float:right)兩種
2、浮動的元素會向左或向右浮動，碰到父元素邊界、浮動元素、未浮動的元素才停下來
3、相鄰浮動的塊元素可以並在一行，超出父級寬度就換行
4、浮動讓行內元素或塊元素自動轉化為行內塊元素
5、浮動元素後面沒有浮動的元素會佔據浮動元素的位置，沒有浮動的元素內的文字會避開浮動的元素，形成文字饒圖的效果
6、父元素內整體浮動的元素無法撐開父元素，需要清除浮動
7、浮動元素之間沒有垂直margin的合併
解決內聯元素間隙的方法 ★
1、去掉內聯元素之間的換行
2、將內聯元素的父級設定font-size為0，內聯元素自身再設定font-size
清除浮動
使用成熟的清浮動樣式類，clearfix
.clearfix
:after,.clearfix
:before
.clearfix
:after
.clearfix
清除浮動的使用方法：
.con2
或者"con2 clearfix">
定位 我們可以使用css的position屬性來設定元素的定位型別，postion的設定項如下：
relative 生成相對定位元素，元素所佔據的文件流的位置不變，元素本身相對文件流的位置進行偏移
absolute 生成絕對定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於上乙個設定了相對或者絕對或者固定定位的父級元素來進行定位，如果找不到，則相對於body元素進行定位。
fixed 生成固定定位元素，元素脫離文件流，不佔據文件流的位置，可以理解為漂浮在文件流的上方，相對於瀏覽器視窗進行定位。
static 預設值，沒有定位，元素出現在正常的文件流中，相當於取消定位屬性或者不設定定位屬性
inherit 從父元素繼承 position 屬性的值
定位元素特性
絕對定位和固定定位的塊元素和行內元素會自動轉化為行內塊元素
定位元素層級 ★（z-index）
定位元素是浮動的正常的文件流之上的，可以用z-index屬性來設定元素的層級
典型定位布局
1、固定在頂部的選單
2、水平垂直居中的彈框
3、固定的側邊的工具欄
4、固定在底部的按鈕
《學習日記》CSS
position 規定元素的定位型別，一般有relative 相對於當前位置的偏移 絕對定位 相對於父級元素或者html左上角的定位 fixed 相對於瀏覽器的固定定位,static,就是當前位置，預設值，沒有top等屬性控制。filter alpha opacity 30 opacity 0.3 ...
HTML和CSS學習日記之CSS布局模型
三種布局模型 1 流動模型 flow 2 浮動模型 float 3 層模型 layer 流動模型 流動 flow 是預設的網頁布局模式。也就是說網頁在預設狀態下的 html 網頁元素都是根據流動模型來分布網頁內容的。特徵 第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在預設狀...
5 2基礎標籤學習
其他html標籤 框架標籤 1 html文件中不能有 cols 橫向排列 rows 縱向排列 300，frameborder 框架的邊框 src 引入頁面的位址 frameset rows 300,frameborder 0 frame src xiaomi zhuye.html frame src...