css基礎知識總結
CSS 的使用
內聯(inline style attribute)
<head> 標簽內的 <style> 標簽
<link> 標簽中的外聯
三種主要的選擇器
元素選擇器
class 選擇器
id 選擇器
樣式優先級(從高到低)
!important
內聯樣式
按順序執行
選擇器優先級(從高到低)
!important
內聯樣式
id 選擇器
class 選擇器
元素選擇器
display 屬性
none
block
inline
inline-block
none 不顯示
block 占一行
默認 block 的標簽有
div p ul ol li h1 h2 h3 h4 h5 h6
inline 只占 content 的尺寸
inline-block 是 inline 布局 block 模式
inline-block 對外表現為 inline，所以可以和別的 inline 放在一行
對內表現為 block，所以可以設置自身的寬高
盒模型
內容
padding
border
margin
position 屬性用於元素定位
static
relative
absolute
fixed
非 static 元素可以用 top left bottom right 屬性來設置坐標
非 static 元素可以用 z-index 屬性來設置顯示層次
relative 是相對定位
absolute 完全絕對定位, 忽略其他所有東西, 往上浮動到 非 static 的元素
fixed 基於 window 的絕對定位, 不隨頁面滾動改變
overflow屬性
visible 默認
auto 需要的時候加滾動條
hidden 隱藏多余元素
scroll 就算用不著也會強制加滾動條
盒模型相關的 CSS
border
border-width
border-style
border-color
border-top
border-top-width
border-top-style
border-top-color
border-right
border-right-width
border-right-style
border-right-color
border-bottom
border-bottom-width
border-bottom-style
border-bottom-color
border-left
border-left-width
border-left-style
border-left-color
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
三種縮寫, 分別對應有 4 2 3 個值的時候的解釋, padding 同理
margin: top right bottom left
margin: (top/bottom) (right/left)
margin: top (right/left) bottom
border-radius 左上角為 top, 右下角為 bottom
background 相關屬性和縮寫
background-color: #233;
background-image: url(bg.png);
background-repeat: no-repeat;
background-attachment: fixed; /* 背景圖片隨滾動軸的移動方式 */
background: #233 url(bg.png) no-repeat;
居中寫法
block 元素居中
margin: 0 auto;
inline inline-block 元素居中
text-align: center;
偽類
:hover
偽元素
::after
::before
css基礎知識總結