HTML5 混合APP开发学习笔记（三）——CSS样式设计
生活随笔
收集整理的這篇文章主要介紹了
HTML5 混合APP开发学习笔记（三）——CSS样式设计
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS樣式設計
CSS高級特性
- 繼承性
書寫CSS樣式時，子標簽會自動繼承父標簽的某些樣式，恰當地使用繼承這個特性可以簡化代碼，降低CSS樣式的復雜性
以下CSS樣式不能被繼承： - 邊框屬性
- 邊距和填充屬性
- 背景屬性
- 定位屬性
- 尺寸屬性
- 層疊性和優先級
所謂層疊性是指對于同一個標簽元素是可以設計多個CSS樣式的，而HTML標簽在頁面上的最終顯示效果是多種CSS樣式的疊加結果
選擇器疊加，權重相加，僅顯示最高權重的樣式
p span{…} /權重為1+1=2/
P.blue{…} /權重為1+10=11/
.blue div{…} /權重為10+1=11/
p.parent span{…} /權重為1+10+1=12/
p.parent .child{…} /權重為1+10+10=21/
#header span{…} /權重為100+1=101/
#header span.blue{…} /權重為100+1+10/
一些特殊情況- 繼承樣式的權重為0，如果子標簽有樣式，則會覆蓋繼承來的樣式
- 內聯樣式優先，即 style 屬性的權重很高
- 權重相同時，CSS遵循就近原則，即后應用的樣式優先級較高
- ! important 語法擁有最大優先級，比如
#mydiv {color:red! important}：無論其他樣式如何設置，該標簽的樣式最終一定為紅色
背景屬性
設置背景顏色
background-color：顏色
其中 a/A 為透明度屬性，0.0（完全透明）~1.0（完全覆蓋）
opacity屬性也可設置透明度：例 opacity: 0.5;
設置背景圖片
background: url(網絡URL或文件路徑); //水平垂直兩個方向均平鋪
background: url(imgs/bk.jpg) no-repeat; //不允許平鋪
background: url(imgs/bk.jpg) repeat-x; //水平平鋪
background: url(imgs/bk.jpg) repeat-y; //垂直平鋪
background-position: right bottom; //右下角（默認為左上角）
控制水平方向的值：left、center、right
控制垂直方向的值：top、center、bottom
1
所有零碎的圖標都作到了一張圖片上，然后將圖片進行分割展示，提高圖片的加載效率
background-size: 100% 100%;占據背景的比例，自適應
background-size:80px 60px;背景圖片大小為確定值
background-size:cover; 保持比例，覆蓋背景區域，完全覆蓋，可能丟失部分圖片信息
background-size:contain;保持比例，覆蓋背景區域，圖片信息完整，可能出現留白
如果文檔比較長，那么當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。
可以通過 background-attachment 屬性防止這種滾動。通過這個屬性，可以聲明圖像相對于可視區是固定的（fixed），不會受到滾動的影響
background-attachment:fixed;
邊框屬性
- border: 1px solid black;
矩形邊框：粗細 線條 顏色 - border-radius: 5px;
border-radius: 50%;
圓角邊框，值為圓角的半徑
CSS盒子模型
- 內填充 padding
padding：上填充距離 右填充距離 下填充距離 左填充距離
也可以用padding-top、padding-bottom、padding-left、padding-right這4個屬性進行分別單獨設置。 - 外邊距margin
margin：上外邊距 右外邊距 下外邊距 左外邊距
同樣可以用margin-top、margin-bottom、margin-left、margin-right這4個屬性進行分別單獨設置。
margin: 0 auto; 常用于居中，表示上下間距為0，左右自適應 - box-sizing
box-sizing：content-box｜border-box;
content-box表示內填充和邊框不包括在寬度和高度之內
border-box則表示內填充和邊框包括在寬度和高度之內
一點技巧
APP開發中常用 html,body{margin:0;padding:0} 去除邊距與填充
http://www.w3school.com.cn/css/pr_background-position.asp ??
總結
以上是生活随笔為你收集整理的HTML5 混合APP开发学习笔记（三）——CSS样式设计的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 花卉商城APP开发详细方案
- 下一篇： 2020-2021前端面试题合集，面试题