當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

你说你精通CSS，真的吗？

發布時間：2025/7/14 CSS 46 豆豆

生活随笔收集整理的這篇文章主要介紹了你说你精通CSS，真的吗？小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

以前做項目的時候，學習了HTML和CSS，感覺這兩個比較簡單，在W3school 里學習了一下之后，就覺得自己已經沒問題了。可是，真正要做一個好看的頁面，我還是要寫好久。其實，對于CSS，我并沒有像我以為的那么熟悉與精通。近期做了一個系統的學習之后，感覺有必要做一個總結。

CSS基礎小知識：

相對單位：px,em；
- px：像素；
- em:當前元素字體大小
css特性：繼承性，層疊性；
- 繼承性：有一部分屬性是可以繼承的，比如：font-family,font-size,font-style,text-align,text-indent,color等；
- 層疊性：元素相同，屬性相同，權重相同采用“后來者居上”
優先級
- 行內樣式>（內部樣式=外部樣式）
- 行內樣式 >id選擇器> class選擇器 >元素選擇器
- !important ?可覆蓋其他所有樣式

li+li{ border-top:2px solid red; }

書寫規范：對于CSS的命名，必須需要注意它的規范性，最好就是那種一看文件名就知道這個CSS文件寫的是哪的特效。

盒子模型：

CSS盒子模型的四個屬性：

border：邊框，如圖中3
margin：外邊距，如圖中2
- 外邊距疊加之后的外邊距高度等于發生疊加之前的兩個外邊距中的最大值
padding：內邊距，如圖中1
- 在背景圖片與內容之間，可使用它進行補白；
content：內容，如圖中4

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>html</title><style type="text/css">div{background-image: url(img/1.png);width: 152px;height:66px;line-height: 60px;padding-left: 85px;/*讓漢字向右移*/font-size: 15px;color: blueviolet;}</style></head><body><div>學習狀況</div></body> </html>

overflow屬性：

overflow:scroll ? 顯示滾動條
overflow:hidden ?隱藏超出部分，以免影響布局，清除浮動；

display屬性：

塊元素(block):
- 獨占一行，排斥其他元素跟其位于同一行；
- 內部可容納其他塊元素或者行元素；
- 可定義高度和寬度；
- 可定義四個方向的margin屬性；
行內元素(inline):
- 可以與其它行內元素位于同一行；
- 可以容納行元素，不可容納塊元素；
- 無法定義高度和寬度；
- 可定義margin的左右，不可定義上下；

行內塊元素(inline-block)
table-cell(以表格單元格的形式呈現):
- 圖片垂直居中于元素；
- 等高布局；
- 自動平均劃分元素，并在一行顯示；

display的屬性取值：常見的便是以上和none。

display：none ?和visibility：hidden之間的區別：

display:none ?：元素被隱藏之后，不占據之前的位置，徹底地消失了。
visibility:hidden ：元素被隱藏之后，依舊占據之前的位置，只是看不到了。

文本效果：

text-indent:
- text-indent:2em ?表示內容的縮進；
- text-indent:-9999px ?隱藏logo中的文字；
text-align:
- text-align:center; 文字，inline，inline-block元素的居中；在父元素中定義；
- margin:0 auto; 塊元素的水平居中；在當前元素中定義；
vertical-align:
- vertical-align:top ：頂部對齊；
- vertical-align:middle ：中部對齊；
- vertical-align:baseline ：基線對齊；
- vertical-align:bottom ：底部對齊；
line-height:
- 一行文字的高度由line-height定義，一段文字的高度由height定義；
- height=line-height 可以實現單行文字的垂直居中；

浮動布局：

當一個元素定義了float：left或者float:right,這個元素都會變成block元素，可以按照block的方法處理。

浮動的影響：

　　對自身的影響：轉化為塊元素；

　　對兄弟元素的影響：浮動為同一方向，則緊挨著排序；浮動為相反方向，則都往兩頭跑；

　　負作用：父元素高度塌陷，從而導致邊框不能撐開，背景顏色無法顯示；頁面布局錯亂；

清除浮動：

clear:both——

overflow:hidden——應用于浮動的父元素，而不是當前的元素；

::after偽元素——結合clear:both一起實現；

.clearfix::after {clear:both;display:block; }

定位布局：

固定定位(fixed)
相對定位(relative)：子元素相對于父元素來定位，父元素定義為relative，子元素則定義為absolute；
絕對定位(absolute)
靜態定位(static)

z-index屬性：用來設定層的先后順序的；

?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; /*讓其他三塊透明，從而體現三角形*/}</style></head><body><div></div></body> </html>

梯形：

?點開firebug,

看到代碼注釋，其實就可以明白了。邊框三角形采用兩個三角形累加。

還有圓形，橢圓之類的，利用圓角屬性border-radius就好了。

寫了那么多，不得不感謝一下這個前端學習的大本營綠葉學習網看了作者寫的書，才知道這個網站的，網站特效做的很好，和軒楓閣很像，都值得學習！

加油~

轉載于:https://www.cnblogs.com/zxcjj/p/6690330.html