Css中代碼的示例分析

小編給大家分享一下Css中代碼的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

text-rendering: optimizeLegibility告訴瀏覽器如何渲染文本，它并沒有作為CSS3的一個標準，而且不同的瀏覽器有不同的渲染默認設置，嚴格意義上來說，text-rendering并不能完全保證在用戶瀏覽器上按預想的方式渲染文本。

塊級元素才可以float, display:block,默認自動占100%的寬度

header 頁頭部分

height: 100vh; 意思是100% viewport height

background-size: cover; 背景圖片覆蓋整個區域，比如一個div， 一個section

background-position: center;背景圖片居中

大的背景圖片大概有多大？寬度在2700px-3000px之間，高度在1500px-2000px之間

transform,用來操控元素，傾斜skewing，旋轉rotating,移動translating,縮放scaling。比如transform: translate(-50%,-50%);向左移動元素自身寬度的50%，向上移動元素自身高度的50%

當給元素絕對定位，常規套路是：position:absolute;width:1000px;top:50%;left:50%;

在背景圖片上加上一層顏色，比如漸變色：background-image: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.7)), url(img/h.jpg);

字體大小和字體粗細的相對性。當字體變大，就要相應降低font-weight的值。

字母間距 letter-spacing

單詞間距 word-spacing

鏈接a的幾個狀態：.classname:link, .classname:visited, .classname:hover, .classname:active

transition，給元素狀態變化的過渡效果

nav導航條

圖片縮放：可以讓寬和高的某個值固定，另外一個值設置為auto，比如：height:100px;width:auto;

:after，在元素后面追加內容

display: block，另起一行，默認寬度100%

figure, html5元素標簽，代表一個內容單元，里面放圖表、圖片、展示、代碼段等，可以被移除而不影響整個頁面元素

設置不透明度，opacity: 0.7;注意：這個背景顏色相關

.someclassname:first-child 第一個someclass; .someclassname:last-child 最后一個someclass,也可以用.someclassname:last-of-type

background-attachment: fixed;背景圖像不會隨著頁面其余部分移動；默認值scroll，表示背景圖片會隨著頁面其余部分滾動而移動

blockquote配合cite標簽一同使用

以上是“Css中代碼的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！