一. 盒模型
概念: Css盒模型本質(zhì)是一個盒子 它包括了外邊距 內(nèi)邊距 邊框 實際內(nèi)容
1. 外邊距 margin
有4個值: top? bottom? left? right
注意: 外邊距塌陷問題
解決:
? ? ? ? 1). 給父級元素設(shè)置邊框或內(nèi)邊距
? ? ? ? ? 2). 給父元素添加溢出隱藏 overflow : hidden; 屬性
2. 內(nèi)邊距 padding
有4個值: top? bottom? left? right
3. 邊框? border
屬性:
? ? ? ? 1). border - width? 邊框?qū)挾?/b>
? ? ? ? 2). border - style? 邊框樣式
? ? ? ? ? ? 值:?
? ? ? ? ? ? ? ? Ⅰ. 實線? solid
? ? ? ? ? ? ? ? Ⅱ. 虛線? dashed
? ? ? ? ? ? ? ? Ⅲ. 點線? dotted
? ? ? ? ? ? ? ? Ⅳ. 雙線? double
? ? ? ? 3). border - color? 邊框顏色
簡寫方式 :? border : 1px? solid? red;
4. 內(nèi)容? content
二. Css背景屬性
1. 背景顏色? background - color
2. 背景圖片? background - image :? url (圖片路徑)
3. 背景平鋪? background - repeat
屬性值:
? ? ? ? ? ? Ⅰ.repeat? (默認(rèn)值) 在垂直和水平方向平鋪
? ? ? ? ? ? Ⅱ. repeat - x 水平方向平鋪
? ? ? ? ? ? Ⅲ. repeat - y 垂直方向平鋪
? ? ? ? ? ? Ⅳ. no - repeat 不平鋪
4. 背景圖片大小? background - size
5. 背景位置? background - position
取值:
? ? ? ? Ⅰ. top? bottom? left? right? (一個值對應(yīng)水平方向? 一個值對應(yīng)垂直方向)
? ? ? ? Ⅱ. 百分比%
? ? ? ? Ⅲ. 像素值 px
三. HTML表單域
1. form 表單標(biāo)簽
表單是一個包含表單元素的區(qū)域 用form標(biāo)簽設(shè)置
2. 常用表單元素
1). input? 標(biāo)簽
input標(biāo)簽是最重要的表單元素
輸入類型是由類型屬性type定義? 根據(jù)不同的type屬性顯示不同的形式
2). text? 文本框
3). password? 密碼框
4). radio? 單選框
5). checkbox? 復(fù)選框
6). button? 普通按鈕
7). submit? 提交按鈕
8). reset? 重置按鈕
9). file? 文件上傳
10). image? 圖像形式提交
3. select 下拉列表
和子標(biāo)簽option搭配使用
4. textarea? 文本域
使用resize : none; 屬性可以防止調(diào)節(jié)大小
5.常用的表單屬性
?. action? 定義提交表單時執(zhí)行動作 (如省略action? 則會被設(shè)置為當(dāng)前頁面)
?. method? 定義提交表單方式
有2種方式:?
? ? ? ? ? ? ? ? Ⅰ. GET? (不安全 數(shù)據(jù)量小)
? ? ? ? ? ? ? ? Ⅱ. POST? (傳遞數(shù)據(jù)時 安全 數(shù)據(jù)量大)
?. value? 輸入字段初始值
?. maxlength? 規(guī)定輸入字段最大長度
四. Css復(fù)合選擇器
1. 并集選擇器 (用逗號分隔)
可以選擇多個選擇器為一組
2. 交集選擇器
由兩個以上單一選擇器組成
3. 子代選擇器 (用 > 號連接)
只選擇作為某元素的子元素? ( 也可以看成親兒子選擇器 )
4. 后代選擇器 (用空格 連接)
可以選擇某元素的所有后代元素 ( 只要是后代? 不管是兒子? 還是孫子都可以)
5. 偽類鏈接選擇器
語法:? 選擇器 : 偽類 { 樣式; }
屬性:
? ? ? ? Ⅰ. a:link 未被訪問過
? ? ? ? Ⅱ. a:visited? 已經(jīng)訪問過
? ? ? ? Ⅲ. a:hover? 鼠標(biāo)懸停
? ? ? ? Ⅳ. a:active? 鼠標(biāo)按下不放
