10.29

一、頁面布局

1.div盒子

盒子模型，定義頁面某一塊區域範圍

<div></div>,塊級标簽

與table表格布局：整齊，規則，需要行和列組成，布局死闆

2.css内部樣式

樣式設定方式：

1)内聯樣式，行式樣式

寫在标簽内，通過style來定義樣式

<div style="width: 1000px;height: 500px;background: mediumturquoise;">

</div>

2)内部樣式

寫在<style></style>标簽中，<style>标簽定義樣式

需要樣式選擇器 選擇body中的标簽

樣式選擇器類型：

A.通配符選擇器：定義頁面中的所有标簽

*表示所有标簽

*{ 樣式屬性：屬性值.....}

Eg：/*通配符:一般清楚margin和padding的值*/

*{color: #FB00AB;margin: 0;padding: 0; font-family: 宋體;}

B.标簽選擇器：通過标簽來定義所有此标簽樣式

标簽：{屬性:值}

ul{width: 600px; height: 100px; background-color:snow;}

li{font-family: 微軟雅黑;}

C.類選擇器：通過class定義類名，通過類名定義樣式

<标簽 class=”類名”></标簽>

.類名{屬性：值；}

字首：.點

Eg：

<li class="c1">類選擇器</li>

/*類*/

.c1{color: #086FF9;}

<li class="c2">先定義類名，通過類名來定義樣式</li>

<li class="c1 c2">類選擇器組合使用</li>

/*标簽中必須滿足有兩個類選擇器，才有樣式效果*/

D.id 選擇器;通過id屬性定義id名，通過id名定義樣式

Id 字首是#

<标簽 id=”名字”>

#id 名字{屬性，值}

Id選擇器的名字是唯一的，不能重複

<li id="d1" class="c1 c2">

/*id*/

#d1{color: #807e05;}

E.分組選擇器：同時定義多個選擇器

選擇器1，選擇器2，選擇器

#id1,id2,.c1{樣式}

.c2,#d1{border: #308003 dashed 1px;}

F.派生選擇器：指派标簽中，需要定義的标簽的樣式

父級标簽 标簽{屬性：值}

Div li{屬性：值}

div p{

width: 100px;

height: 100px;

border: #0e8020 1px solid;

}

G.僞類選擇器：定義樣式的效果

樣式效果：hover 滑鼠懸停 ,focus 點選擷取焦點等...

選擇器：效果{樣式}

比如：hover

#d1:hover{ }--當滑鼠懸停到#d1标簽上，定義#d1的樣式

#d1:hover{

font-size: 50px;

3）優先級

樣式重複，需要考慮優先級問題

注意：樣式重複，優先級：通配符<标簽<類<id<内聯樣式

派生選擇器：

父級選擇器 子級選擇器{樣式}

父級選擇器 選擇器{樣式}

#d1 a{

font-size: 30px;

/*使用派生選擇器，優先級 要注意添加父級選擇器，不然沒有優先級效果*/

#d1 .ca{

<div id="d1">

<a id="da" class="ca" href="javascript:;">超連結</a>

3.外部樣式

寫css樣式檔案中，在html檔案中通過link标簽引入

建立css檔案

通過link引入css

<link href="css02.css" rel="stylesheet" type="text/css">

Href：引入檔案的路徑

Type：引入檔案的類型

Rel：引入檔案與檔案的關系

Stylesheet：級聯樣式表

text/css：文本樣式類型

3.在css樣式檔案中通過選擇器定義樣式

<link href="../image.png" rel="icon">

Icon：關系是标題小圖檔

二、盒子模型設定距離

1.padding

在标簽中，設定内容與标簽邊框的距離

距離邊框的方向：top,bottom,left,right;

Padding-方向：距離；設定距離方向的距離

Padding:值1;内邊距距離四個方向是值1的距離

Padding:值1 值2；上下方向是值1，左右方向是值2

Padding:值1 值2 值3；上方向是值1，左右方向是值2，下方向是值3

Padding:值1 值2 值3 值4；四個方向分别對應：上右下左

注意：使用内邊距padding，标簽範圍會變大，注意頁面布局

2.margin

外邊距的外邊距離，本标簽與其他标簽的距離

可設定邊框的方向：top,bottom,left,right;

三、定位

Position:标簽的位置屬性

屬性值：static(預設),relative,absolute,fixed

1.static(預設)：預設定位，靜态定位；系統自動生成

2.relative;相對定位:相對于标簽的原位置的左上角(0,0)進行定位

與定位的方向:top,bottom,left,right 結合使用.

(1)相當于标簽原位置的左上角進行定位

(2)保留标簽原位置

3.absolute;絕對定位

(1)以頁面body标簽的左上角來定位

(2)當父标簽的position不是static，以父标簽進行定位

(3)不保留原位置

4.fixed 固定定位，确定定位

(1)以整個頁面整體進行定位

(2)不會随着滾動條滾動發生位置變化，固定在頁面上

(3)不保留位置

隐藏,溢出 屬性

隐藏:display(不保留位置的隐藏) 和 visibility（保留位置的隐藏）display：none隐藏/block 顯現

Visibility:hidden 隐藏/visible 顯現

溢出:overflow；标簽中的内容超出了标簽範圍預設是可見

overflow:

Hidden溢出内容隐藏/visibility溢出内容顯示/scroll滾動方式檢視

層級：z-index

處理标簽顯示，覆寫優先級

z-index的值越大，層級越高

z-index:正整數

其他常用屬性設定

1.邊框

Border:顔色 大小 樣式；

邊框占用 px位置空間

Border:red 1px solid;

Solid:實線

Dashed:虛線

Boder-radius:大小值；設定标簽中邊框四個角的弧度，圓角

Border-top-left-radius:設定左上角的弧度

Border-bottom-right-radius:設定右下角的弧度

2.輪廓

Outline:顔色 大小 樣式；與邊框設定是一緻

與邊框是一緻，差別:輪廓不占空間，邊框占空間