1. 文字屬性
1. font-family
2. font-size
3. font-weight
4. color
1. rgb(255, 255, 255)
2. #f00
3. red
4. rgba()
2. 文字屬性
1. text-align
2. text-decoration
3. 背景屬性
1. background-color
2. background-image
4. 邊框屬性
1. border
2. border-radius --> 變圓
5. display屬性
1. inline
2. block
3. inline-block
4. none (隱藏)
6. css盒子模型(從外到內)
1. margin: 邊框之外的距離(多用來調整 標籤和標籤之間的距離)
2. border邊框
3. padding:內容區和邊框之間的距離(內填充/內邊距)
4. condent: 內容
7. 浮動:
div配合float 來做 頁面的布局
任何元素浮動之後都會變成塊元素
float:
1. left
2. right
3. none
8. 清除浮動(清除的是浮動帶來的負面效果-->父標籤塌陷(撐不起來))
1. clear
1. left
2. right
3. both
最常和偽元素結合起來應用:
.clearfix:after
9. 定位:
1. static --> 預設的
2. relative --> 相對定位(相對於原來的位置來說)
3. absolute --> 絕對定位(相對於最近的乙個被定位過的祖宗標籤) (完全脫離文件流)
4. fixed --> 固定在某個位置(返回頂部按鈕)
left right top bottom
10. overflow
1. 標籤的內容放不下(溢位)
2. 取值:
1. hidden --> 隱藏
2. scroll --> 出現滾動條
3. auto
4. scroll-x
5. scroll-y
例子:圓形頭像的例子
1. overflow: hidden
2. border-radius: 50% (圓角)
11. opacity (不透明度)
1. 取值0~1
2. 和rgba()的區別:
1. opacity改變元素\子元素的透明度效果
2. rgba()只改變背景顏色的透明度效果
12. z-index
1. 數值越大,越靠近你
2. 只能作用於定位過的元素
3. 自定義的模態框示例
前端之CSS篇
css本質就是乙個樣式表 主要由選擇器和宣告兩個部分組成,宣告部分又包括屬性跟屬性值 注釋 多行注釋 內部樣式 外部樣式 將css 寫在單獨的檔案中,再進行引用 行內樣式 hello world id選擇器 id名 類選擇器 類名 元素選擇器 元素名 通用選擇器 例子 id1 c1p 後代選擇器 作...
前端css屬性難點
text transform uppercase 有何用?margin 0.5em 0中的em與px有什麼區別?overflow hidden有什麼用?vertical align top 什麼意思?font inherit 什麼意思?cursor pointer 關於元素局中問題 如何使用css讓...
CSS屬性總結篇
滾動條 1 overflow內容溢位時的設定 設定被設定物件是否顯示滾動條 overflow x水平方向內容溢位時的設定 overflow y垂直方向內容溢位時的設定 以上三個屬性設定的值為visible 預設值 scroll hidden auto。2 scrollbar 3d light col...