你说你精通CSS，真的吗？
以前做項(xiàng)目的時(shí)候，學(xué)習(xí)了HTML和CSS，感覺這兩個(gè)比較簡單，在W3school 里學(xué)習(xí)了一下之后，就覺得自己已經(jīng)沒問題了?？墒?#xff0c;真正要做一個(gè)好看的頁面，我還是要寫好久。其實(shí)，對(duì)于CSS，我并沒有像我以為的那么熟悉與精通。近期做了一個(gè)系統(tǒng)的學(xué)習(xí)之后，感覺有必要做一個(gè)總結(jié)。
CSS基礎(chǔ)小知識(shí)：
- 相對(duì)單位：px,em；
- px：像素；
- em:當(dāng)前元素字體大小
- css特性：繼承性，層疊性；
- 繼承性：有一部分屬性是可以繼承的，比如：font-family,font-size,font-style,text-align,text-indent,color等；
- 層疊性：元素相同，屬性相同，權(quán)重相同采用“后來者居上”
- 優(yōu)先級(jí)
- 行內(nèi)樣式>（內(nèi)部樣式=外部樣式）
- 行內(nèi)樣式 >id選擇器> class選擇器 >元素選擇器
- !important ?可覆蓋其他所有樣式
書寫規(guī)范：對(duì)于CSS的命名，必須需要注意它的規(guī)范性，最好就是那種一看文件名就知道這個(gè)CSS文件寫的是哪的特效。
?
盒子模型：
CSS盒子模型的四個(gè)屬性：
- border：邊框，如圖中3
- margin：外邊距，如圖中2
- 外邊距疊加之后的外邊距高度等于發(fā)生疊加之前的兩個(gè)外邊距中的最大值
- padding：內(nèi)邊距，如圖中1
- 在背景圖片與內(nèi)容之間，可使用它進(jìn)行補(bǔ)白；
- content：內(nèi)容，如圖中4
?
overflow屬性：
- overflow:scroll ? 顯示滾動(dòng)條
- overflow:hidden ?隱藏超出部分，以免影響布局，清除浮動(dòng)；
?
display屬性：
- 塊元素(block):
- 獨(dú)占一行，排斥其他元素跟其位于同一行；
- 內(nèi)部可容納其他塊元素或者行元素；
- 可定義 高度和寬度 ；
- 可定義四個(gè)方向的margin屬性；
- 行內(nèi)元素(inline):
- 可以與其它行內(nèi)元素位于同一行；
- 可以容納行元素，不可容納塊元素；
- 無法定義高度和寬度；
- 可定義margin的左右，不可定義上下；
- 行內(nèi)塊元素(inline-block)
- table-cell(以表格單元格的形式呈現(xiàn)):
- 圖片垂直居中于元素；
- 等高布局；
- 自動(dòng)平均劃分元素，并在一行顯示；
display的屬性取值：常見的便是以上和none。
display：none ?和visibility：hidden之間的區(qū)別：
- display:none ?：元素被隱藏之后，不占據(jù)之前的位置，徹底地消失了。
- visibility:hidden ：元素被隱藏之后，依舊占據(jù)之前的位置，只是看不到了。
?
文本效果：
- text-indent:
- text-indent:2em ?表示內(nèi)容的縮進(jìn)；
- text-indent:-9999px ?隱藏logo中的文字；
- text-align:
- text-align:center; 文字，inline，inline-block元素的居中；在父元素中定義；
- margin:0 auto; 塊元素的水平居中；在當(dāng)前元素中定義；
- vertical-align:
- vertical-align:top ：頂部對(duì)齊；
- vertical-align:middle ：中部對(duì)齊；
- vertical-align:baseline ：基線對(duì)齊；
- vertical-align:bottom ：底部對(duì)齊；
- line-height:
- 一行文字的高度由line-height定義，一段文字的高度由height定義；
- height=line-height 可以實(shí)現(xiàn)單行文字的垂直居中；
?
浮動(dòng)布局：
當(dāng)一個(gè)元素定義了float：left或者float:right,這個(gè)元素都會(huì)變成block元素，可以按照block的方法處理。
浮動(dòng)的影響：
對(duì)自身的影響：轉(zhuǎn)化為塊元素；
對(duì)兄弟元素的影響：浮動(dòng)為同一方向，則緊挨著排序；浮動(dòng)為相反方向，則都往兩頭跑；
負(fù)作用：父元素高度塌陷，從而導(dǎo)致邊框不能撐開，背景顏色無法顯示；頁面布局錯(cuò)亂；
清除浮動(dòng)：
clear:both——
overflow:hidden——應(yīng)用于浮動(dòng)的父元素，而不是當(dāng)前的元素；
::after偽元素——結(jié)合clear:both一起實(shí)現(xiàn)；
.clearfix::after {clear:both;display:block; }定位布局：
- 固定定位(fixed)
- 相對(duì)定位(relative)：子元素相對(duì)于父元素來定位，父元素定義為relative，子元素則定義為absolute；
- 絕對(duì)定位(absolute)
- 靜態(tài)定位(static)
z-index屬性：用來設(shè)定層的先后順序的；
?
?CSS圖形：
不得不說，CSS的圖形讓我大跌眼鏡了，雖然我沒有近視。
三角形：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>html</title><style type="text/css">div{width: 0;height:0;/*中間的正方形*/border-width: 50px;border-style: solid;border-color: red transparent transparent transparent; /*讓其他三塊透明，從而體現(xiàn)三角形*/}</style></head><body><div></div></body> </html>梯形：
?
?點(diǎn)開firebug,
看到代碼注釋，其實(shí)就可以明白了。邊框三角形采用兩個(gè)三角形累加。
還有圓形，橢圓之類的，利用圓角屬性border-radius就好了。
?
寫了那么多，不得不感謝一下這個(gè)前端學(xué)習(xí)的大本營綠葉學(xué)習(xí)網(wǎng)看了作者寫的書，才知道這個(gè)網(wǎng)站的，網(wǎng)站特效做的很好，和軒楓閣很像，都值得學(xué)習(xí)！
加油~
?
轉(zhuǎn)載于:https://www.cnblogs.com/zxcjj/p/6690330.html
總結(jié)
以上是生活随笔為你收集整理的你说你精通CSS，真的吗？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 随机数的产生可用于的场景验证码 密码
- 下一篇： python之装饰器篇