CSS盒子模型各屬性層級及基礎知識
經測試box-shadow應該位於background-image之上並且位於content之下,因此對<img>標籤設定內陰影會被其內容(圖片)覆蓋;
1.設定浮動屬性後,會對相鄰的元素產生影響,相鄰元素特指僅鄰後面的元素。
2.受到影響的元素清除flow影響的方法:clear:both;只適用於緊鄰後面的元素的清楚浮動,而當父包含塊縮成一條時就不起作用了。
或者同時設定width:100%;+overflow:hidden;例p受到影響,p{clear:both;或者p{width:100%;overflow:hidden;}
3.三種定位形式:static(靜態)relative(相對)absolute(絕對)
相對定位:相對於自身原有位置進行偏移;仍處於文件流中;隨即擁有偏移屬性和Z-index屬性;
絕對定位:建立以包含塊為基準的定位;完全脫離了標準文件流;隨即擁有偏移屬性和Z-index屬性;
未設定偏移量,無定位祖先元素,以為參考基準
使用absolute實現橫向兩列布局:relative-父元素相對定位;absolute-自適應寬度元素絕對定位
css:
1.id選擇器( # myid)
2.類選擇器(.myclassname)
3.標籤選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul < li)
6.後代選擇器(li a)
7.萬用字元選擇器( * )
8.屬性選擇器(a[rel = “external”])
9.偽類選擇器(a: hover, li: nth - child)
- 可繼承的樣式: font-size font-family color, UL LI DL DD DT;
- 不可繼承的樣式:border padding margin width height ;
- 優先順序就近原則,同權重情況下樣式定義最近者為準;
- 載入樣式以最後載入的定位為準;
優先順序為:
!important > id > class > tag
important 比 內聯優先順序高
css新增的偽類:
p:first-of-type 選擇屬於其父元素的首個
元素的每個
元素。
p:last-of-type 選擇屬於其父元素的最後
元素的每個
元素。
p:only-of-type 選擇屬於其父元素唯一的
元素的每個
元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個
元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個
元素。
:enabled :disabled 控制表單控制元件的禁用狀態。
:checked 單選框或複選框被選中。
如何居中div?如何居中一個浮動元素?
給div設定一個寬度,然後新增margin:0 auto屬性
div{
width:200px;
margin:0 auto;
}
居中一個浮動元素
確定容器的寬高 寬500 高 300 的層
設定層的外邊距
.div {
Width:500px ; height:300px;//高度可以不設
Margin: -150px 0 0 -250px;
position:relative;相對定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
列出display的值,說明他們的作用。position的值, relative和absolute定位原點是?
1.
block 象塊型別元素一樣顯示。
none 預設值。象行內元素型別一樣顯示。
inline-block 象行內元素一樣顯示,但其內容象塊型別元素一樣顯示。
list-item 象塊型別元素一樣顯示,並新增樣式列表標記。
2.
*absolute
生成絕對定位的元素,相對於 static 定位以外的第一個父元素進行定位。
*fixed (老IE不支援)
生成絕對定位的元素,相對於瀏覽器視窗進行定位。
*relative
生成相對定位的元素,相對於其正常位置進行定位。
* static 預設值。沒有定位,元素出現在正常的流中
*(忽略 top, bottom, left, right z-index 宣告)。
* inherit 規定從父元素繼承 position 屬性的值。
CSS3有哪些新特性?
CSS3實現圓角(border-radius:8px),陰影(box-shadow:10px),
對文字加特效(text-shadow、),線性漸變(gradient),旋轉(transform)
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器 多背景 rgba