1、絕對定位
創(chuàng)新互聯(lián)公司是一家專業(yè)提供岳塘企業(yè)網(wǎng)站建設(shè),專注與做網(wǎng)站、成都網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、小程序制作等業(yè)務(wù)。10年已為岳塘眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進行中。
在絕大過程中，想確定一個元素在網(wǎng)站當(dāng)中的固定位置，絕對定位是實現(xiàn)這個方式的解決辦法。在網(wǎng)頁當(dāng)中，絕對定位可精確的控制元素在網(wǎng)頁當(dāng)中的位置，我們可使用頂部、底部、左側(cè)和右側(cè)，附上一個像素值來控制元素所在的位置。
position:absolute;top:50px;right:50px
上面的CSS設(shè)置一個元素的位置從瀏覽器的頂部和右邊保持50px。你也可以在div內(nèi)使用絕對定位。
2、覆蓋所有樣式
寫CSS的時候都應(yīng)該知道，當(dāng)你想給一個元素添加一個新的CSS樣式，但這個樣式之前已經(jīng)被定義過了。此時我們可以采用！important來定義。
例如，如果我想在我的網(wǎng)站的特定部分的H3標(biāo)題是紅色而不是黃色，可以使用下面的CSS：
.section h3 {color:red !important; }
3、居中
居中分很多情況，一般會分成文本居中和DIV的內(nèi)容居中。
文本居中
文本居中使用text-align：center; 。如果想讓文本在左右兩側(cè)，可以使用左側(cè)或右側(cè)。
DIV內(nèi)容
DIV內(nèi)容居中跟文本居中不一樣。CSS可以這樣定義：
#div1 { display: block; margin: auto; width: anything under 100% }
把寬度設(shè)置為“100％以下”的原因是因為如果它是100％寬度，那么如果是全寬度，并且不需要居中。最好有一個固定的寬度，如60％或550像素等。
4、垂直對齊（對于一行文本）
要使菜單的高度和文本的行高一致，可以這么設(shè)置：
.nav li{line-height:50px; height:50px;}
5、懸停效果
這適用于按鈕，文本鏈接，網(wǎng)站的部分，圖標(biāo)等等。如果你想做一個懸停效果，可以試試：
.entry h2{font-size:36px; color:#000; font-weight:800;} .entry h2:hover{color:#ffeb3b;}
這個功能可以讓你的h2標(biāo)簽的顏色從黑色變成黃色。
6、懸停效果過渡
對于懸停效果，如使用菜單或網(wǎng)站上的圖像，我們肯定不希望顏色快速貼近結(jié)果，所以我們可以通過使用時間變化來達到過渡的效果。
.entry h2:hover{color:#ffeb3b; transition: all 0.5s ease;}
這就使得樣式上的改變，可以是從黑色變黃色的過渡時間是0.5秒，而不是立即變成黃色。這使得懸停效果更加和諧而不會顯得太突兀。
7、a標(biāo)簽的狀態(tài)
我們在遇到a標(biāo)簽的時候，一定要給a標(biāo)簽做樣式定義，否則特別容易造成用戶在使用上的困惑。通過樣式可以讓用戶知道這個鏈接是否被點擊過，更利于用戶體驗。
a:link {color: blue; } a:visited {color: red; }
8、輕松調(diào)整圖像大小以適應(yīng)
說到這個樣式，我之前不知道可以通過以下方式達到圖片的自適應(yīng)效果。作為一個新手，我相信這個效果肯定有很多人都想做，當(dāng)然，我提供的方法也只是其中的一種：
img {max-width:100%;height:auto;}
這個樣式意味著最大的圖像可能是100％，并根據(jù)圖像寬度自動計算高度。在某些情況下，您可能還必須指定寬度為100％。
9、父級元素和子元素
如果ni不希望選擇任意的后代元素，而是希望縮小范圍，只選擇某個元素的子元素，請使用子元素選擇器：
h1 strong {color:red;}
特殊情況下你可能會想定義第N個子元素的樣式，這樣就可以用到下面這個樣式：li:nth-child(n)
具體的使用方法可以去w3school上看。
10、將CSS應(yīng)用于多個類或選擇器
如果你想要在所有圖片，博客部分和側(cè)邊欄上添加相同的邊框。你不必寫出相同的CSS樣式重復(fù)3次。只需列出這些項目，用逗號分隔：
.blog,img,.sidebar {border: 1px solid #000;}
px像素。絕對單位，像素px是相對于顯示器屏幕分辨率而言的，是一個虛擬單位。是計算機系統(tǒng)的數(shù)字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI。
2、em是相對長度單位，相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，因此并不是一個固定的值。
rem是CSS3新增的一個相對單位(root em,根em),使用rem為元素設(shè)定字體大小事，仍然是相對大小但相對的只是HTML根元素。
4、區(qū)別：IE無法調(diào)用那些使用px作為單位的字體大小，而em和rem可以縮放，rem相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前，除了IE8及更早版本外，所有瀏覽器已支持rem。
1.定位
2.尺寸
3.浮動
4.最初的布局——table
5.兩欄布局（浮動和定位）
6.三欄布局（flex，圣杯和雙飛翼： ）
7.移動端的布局（媒體查詢，flex彈性盒子（ ），rem適配（ ））
8.grid布局
摘自：
1.flex方式（適用于居中元素元素寬高未知），但是這種方式僅限于body里面只有一個子元素，如果body里面有多個div不行
2.絕對定位和負邊距（適用于居中元素的寬高是固定的）
3.CSS3的transform屬性（適用于居中元素元素寬高未知）
4.margin:auto
1.transform
transform屬性是靜態(tài)屬性。它其實只是一個靜態(tài)屬性，需要配合transition和animation才能展現(xiàn)出動畫效果。你可以把它看成是跟left、top等屬性一樣，只是一個靜態(tài)樣式而已。它可以讓元素偏移、伸縮、變形、旋轉(zhuǎn)等。
2.transition,它屬性是一個簡單的動畫屬性，非常簡單非常容易用。可以說它是animation的簡化版本，是給普通做簡單網(wǎng)頁特效用的。
3.Animation
實現(xiàn)兩種css樣式，默認，選中
通過js監(jiān)聽點擊事件切換標(biāo)簽的css樣式
-webkit-box、-moz-box、-o-box、-ms-box、box這些都是指同一個屬性即box，前面帶有-號的是分別針對不同的瀏覽器的，其中
-webkit- 針對Chrome和Safari瀏覽器
-moz- 針對FireFox瀏覽器
-o- 針對Opera瀏覽器
-ms- 針對IE瀏覽器
也就是說凡是帶有這樣的前綴的都是這些瀏覽器的私有屬性，只有各自的瀏覽器內(nèi)部才有效。之所以這樣，是因為有些css屬性是帶有實驗性質(zhì)的（尤其是css3），各主流瀏覽器尚未對它完全支持，這樣就會使用私有屬性來進行試驗，而其他瀏覽器則會自動忽略該屬性。因此，網(wǎng)頁為了兼容各種不同的瀏覽器，就會把所有的私有屬性都放上去，也包括不帶前綴的標(biāo)準(zhǔn)屬性。而瀏覽器的版本眾多，很可能低版本的瀏覽器對某個屬性處于試驗性質(zhì)，而高版本則已經(jīng)完全支持了（也就是說可以不用前綴了），比如box屬性就是如此，因此你把其他帶有前綴的屬性去掉不影響效果。但是，既然是網(wǎng)頁，就不會是只有你一個人看的，要是其他用戶用的是低版本的瀏覽器呢？所以，從兼容性角度出發(fā)，你最好不要刪掉這些屬性，除非你能保證其他用戶用的瀏覽器與你的完全一樣。
1.如果想要設(shè)置字體樣式可以使用font-family
2.如果想要設(shè)置加粗可以使用font-weight
3.如果想要設(shè)置傾斜可以使用font-style
4.如果想要設(shè)置字體大小可以使用font-size
上述樣式如果想要在一個選擇器中使用的話，一下寫4個會顯得比較冗余，那么我們可以簡化綜合復(fù)合如下的樣式
選擇器 {font :font-style font-weight font-size/line-height font-family}順序不可顛倒 其中? font-size和font-family必須保留? 否則不會起作用
1.層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集)等文件樣式的計算機語言。 2.在12年這期間前端可是發(fā)生了天翻地覆的變化，現(xiàn)在的CSS3是最新的CSS標(biāo)準(zhǔn)，在網(wǎng)頁制作中，當(dāng)下最流行的組合就是h5+css3，CSS3的使用最直接的好處就是頁面展示上更加炫酷，表現(xiàn)形式更加多元化，但它的好處遠遠不止這些。使用CSS3不僅有利于開發(fā)與維護，還能提高網(wǎng)站的性能，與此同時還能增加網(wǎng)站的可訪問性、可用性，使網(wǎng)站能適配更多的設(shè)備，甚至還可以利于SEO優(yōu)化。
重慶分公司
重慶分公司
