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

CSS

知识梳理——CSS篇

發布時間：2025/3/15 CSS 35 豆豆

生活随笔收集整理的這篇文章主要介紹了知识梳理——CSS篇小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

css引入方法

內嵌 <head><meta charset="UTF-8"><title>Document</title><style>....</style> </head>

行間? <body style="background:red;">

外聯? <link rel="stylesheet" href="./css/main.css" />

@import方法? @import url("css/mycss.css")

基礎選擇器

　　元素選擇器：h1...

　　類選擇器：.class

　　id選擇器：#id

　　通配符選擇器：*

　　子元素選擇器：>

　　后代元素選擇器：ul li

　　相鄰元素選擇器：+

　　屬性選擇器：[]

　　組合選擇器：h1,h2,h3,h4,h5{}

　　復合選擇器：div.test{} (注意：中間沒有空格，否則就會被識別為后代選擇器了)、

偽元素

　　:first-letter :first-line :before :after ::selection(css3中唯一引入的偽元素)

偽類

　　css2中只有:link、:visited、:hover、:active、:focus、:first-child、:lang等有限的幾種偽類選擇器；

　　css3中增加了大量的偽類選擇器：

　　結構化偽類：:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:last-child、:first-of-type、:last-of-type、

　　:only-child、:only-of-type、:root :empty

　　目標偽類：:target

　　狀態偽類：:enabled、:disabled、:checked、:indeterminate、:default

　　否定偽類：:not()

　　（css3中新增偽類的具體用法可參見《CSS高效開發實戰》一書）

盒子模型

　　標準盒子模型中：內容區域的寬度和高度就是width和height

　　IE盒子模型中：內容區域的寬度包含了內容、內邊距、邊框的總和。

　　CSS3中的box-sizing屬性可以定義要使用何種盒模型。

定位

　　static: 默認

　　absolute（絕對定位）：相對于與它最近的那個已經定位了的祖先元素進行定位，如果沒有已定位的祖先元素，則它的位置相對于初始包含塊。絕對定位使元素的位置與文檔無關，因此不占據空間。

　　relative：相對于它原來在的位置進行定位，使用相對定位時，無論是否移動，元素仍然占據原來的空間。

　　fixed：總是以視口的左上角進行定位

清除浮動

　　1、float父元素

　　2、添加空標簽clear

　　3、overflow:hidden或者auto;

　　4、after偽類{

　　　　　　　　content:".";

　　　　　　　　height:0;

　　　　　　　　visibility:hidden;

　　　　　　　　display:block;

　　　　　　　　clear:both;

　　　　　　}

CSS hack--使css代碼兼容不同的瀏覽器

　　常用的css hack方式：

　　①條件注釋

如：

　　②屬性前綴

　　如：-webkit?-o -moz -ms

　　③選擇器前綴

　　如：*html

CSS3常用屬性：

　　border-radius,box-shadow,text-shadow,transform(rotate,scale,skew,translate),transition,animation,@font-face,媒體查詢@media　　

轉載于:https://www.cnblogs.com/pwei/p/css-carding.html

總結

以上是生活随笔為你收集整理的知识梳理——CSS篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

css
知识

上一篇：移位运算
下一篇： CSS3基础03（3D②）求粉丝