Css中代碼的示例分析

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

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

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

header 頁頭部分

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

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

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

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

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

當(dāng)給元素絕對定位，常規(guī)套路是：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);

字體大小和字體粗細(xì)的相對性。當(dāng)字體變大，就要相應(yīng)降低font-weight的值。

字母間距 letter-spacing

單詞間距 word-spacing

鏈接a的幾個狀態(tài)：.classname:link, .classname:visited, .classname:hover, .classname:active

transition，給元素狀態(tài)變化的過渡效果

nav導(dǎo)航條

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

:after，在元素后面追加內(nèi)容

display: block，另起一行，默認(rèn)寬度100%

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

設(shè)置不透明度，opacity: 0.7;注意：這個背景顏色相關(guān)

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

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

blockquote配合cite標(biāo)簽一同使用

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