1. CSS 屬性
background-color
background-image background-repeat background-size
background-position
簡寫 :
background:color url() repeat position;
background-size
------------
font-size
font-style
font-weight
font-family
簡寫 :
font : (style weight) size family;
----------
color
line-height
text-align
text-decoration
------------
table:
border-collapse
border-spacing
2. 布局
1. 文檔流布局
按照元素類型和書寫順序,從左到右,從上到下依次顯示
2. 浮動布局
float : left/right/none;
特點 :
1. 元素浮動之后,會停靠其他元素的邊緣
2. 元素浮動之后都可以設置寬高
3. 文字環繞
4. 元素浮動會脫流,在文檔中不占位.影響布局
問題 :
浮動元素不占位,父元素高度為0
解決 :
1. 為父元素指定高度
2. 為父元素設置overflow:hidden;
3. 在父元素末尾添加空的子元素(塊元素)
設置子元素 clear:both;
-----------------------------------------------
day06
1. 定位布局
可以設置元素在網頁中的顯示位置
屬性 : position
取值 :
1. static (靜態布局,默認值)
2. relative (相對定位)
3. absolute (絕對定位)
4. fixed (固定定位)
注意 :
只有元素設置position為relative/absolute/fixed,
才稱元素為已定位元素
2. 定位詳解
1. 相對定位
position : relative;
特點 : 元素一旦相對定位,可以參照它在文檔中的原始位置
進行偏移.仍然在文檔中占位(保留它原始位置)
偏移屬性 :
top / right / bottom / left
取像素值,設置元素偏移距離
top : 設置元素距離頂部的偏移量,正值元素下移
left : 設置元素距左的偏移量,正值元素右移
bottom : 設置元素距底部的偏移量,正值元素上移
right : 設置元素距右的偏移量,正值元素左移
2. 絕對定位
屬性 position:absolute;
特點 :
1. 元素設置絕對定位,會參照一個離它最近的已經定位的祖先
元素進行偏移,如果沒有已定位的祖先元素,則參照瀏覽器
窗口的原點進行偏移
2. 元素設置絕對定位會脫離文檔流,父元素高度為0
使用 :
1. 一般采用父元素相對定位,子元素絕對定位,實現元素
偏移
2. 偏移屬性是根據元素的參照物進行偏移
3. 絕對定位的元素脫離文檔流,可以設置寬高
3. 元素的堆疊次序
元素出現相互重疊時的顯示次序
屬性 : z-index
取值 : 無單位的數值,默認為0,數值越大越靠上顯示
注意 :
只有當前元素設置定位布局,z-index才有效
4. 固定定位
position : fixed;
特點 :
元素設置固定定位,會參照瀏覽器窗口進行偏移
3. 元素顯示效果
1. 設置元素顯示與隱藏
屬性 : visibility
取值 :
1. visible (默認可見)
2. hidden (元素隱藏,仍然占位)
2. 轉換元素類型
屬性 : display
取值 :
1. inline 行內元素
2. block 塊元素
3. inline-block 行內塊元素
4. none 元素隱藏,在文檔中不占位
3. 元素透明度設置
1. rgba(r,g,b,a)
2. 屬性 : opacity
取值 : 0-1 (0為透明,1為不透明)
使用 :
1. opacity會使包含元素自身和其后代元素在內的所有
顯示效果都半透明;
rgba()只針對當前元素的指定屬性實現半透明,文本
的半透明效果會被子元素繼承;
2. 子元素與父元素同時設置opacity半透明,子元素
中的半透明效果是 兩個值相乘(在父元素半透明
的基礎上再次半透明)
4. 鼠標形狀改變
默認,鼠標懸停在普通文本上顯示為 'I',懸停在超鏈接
內容上,顯示為手指形狀,其他元素顯示為箭頭
屬性 : cursor
取值 :
1. default
2. pointer (手指形狀)
3. text ('I')
5. 行內塊元素的垂直對齊方式
行內塊元素默認按照文本的基線對齊,會出現元素排列
不齊的情況
屬性 : vertical-align
取值 : top/middle/bottom
使用 :
為行內塊元素設置vertical-align,調整左右元素跟它
的對齊方式
img,input{
vertical-align:
}
6. 列表相關屬性
1. list-style-type
設置項目符號的類型
取值 :
square
circle
disc
none
2. list-style-image
使用圖片自定義項目符號
取值 : url()
3. lisi-style-position
設置項目符號的位置
默認顯示在內容框的左側
取值 :
1. outside 在內容框外部
2. inside 顯示在內容框內部
4. 簡寫屬性
list-style: type/url position;
取消項目符號 :
list-style:none;
4. 元素的轉換效果
1. 元素的轉換效果主要指元素可以發生平移,縮放,旋轉變換
2. 屬性 : transform
取值 : 轉換函數
注意 : 多個轉換函數之間使用空格隔開
3. 元素的轉換基准點
默認情況下,元素以中心點作為轉換的基准點
調整基准點 :
屬性 transform-origin
取值 x y
可以使用像素值,百分比或方位值表示基准點的位置
et :
左上角 0px 0px
右下角 100% 100%
右上角 100% 0% / right top
方位值 :
left center right
top center bottom
4. 平移變換
1. 作用 : 改變元素在文檔中的位置
2. 使用 :
屬性 : transform
取值 :
1. translate(x,y)
x,y分別表示元素在X軸和Y軸上的平移距離,
取像素值,可正可負,區分平移方向
2. translate(x)
一個值表示沿X軸平移
3. translateX(value)
指定沿X軸平移
4. translateY(value)
指定沿Y軸平移
5. 縮放變換
改變元素的顯示尺寸(放大或縮小)
屬性 : transform
取值 : scale(value)
value為無單位的數值,表示縮放比例
1. value > 1 元素放大
2. 0 < value < 1 元素縮小
3. value < 0 數值仍然表示縮放比,負號表示元素
會被翻轉
其他取值 :
scaleX(v) 沿X軸縮放
scaleY(v) 沿Y軸縮放
6. 旋轉變換
可以設置元素旋轉一定角度顯示
屬性 : transform
取值 : rotate(deg)
取角度值, 以deg為單位
使用 :
1. rotate()表示平面旋轉
正值表示順時針旋轉,負值表示逆時針旋轉
2. 3D旋轉
rotateX(deg) 沿X軸旋轉
rotateY(deg) 沿Y軸旋轉
7. 轉換函數的組合使用
transform : translate() scale() rotate();
注意 :
元素旋轉會連帶坐標軸一起轉