css
返回到 Java開發知識彙總 目錄
1.基本選擇器
標籤選擇器: 標籤名字
類選擇器：.classname
id選擇器：#
2.層次選擇器
後代選擇器 ： body p
子選擇器,1代，所有的p： body > p
兄弟相鄰選擇器： .classname + p 只選擇當前相鄰的下一個元素
通用兄弟選擇器: .classname ~p 選中當前元素的向下的所有兄弟元素
3.結構偽類選擇器：
ul li:first-child{background: red};
ul li: last-chilid{}
p:nth-child(2){} 定位p元素的父元素，順序選擇父元素下拉的第2個元素
p:nth-of-type(1){} 定位p元素的父元素，順序選擇父元素下拉的第21個p型別元素
4.屬性選擇器[]
.demo a{}
.demo a{}
a[id]{} 選擇存在id的元素
a[id=first]{}
a[class="links"]{}
a[class*="links"]{} class包含links的元素
a[href^=http] 選擇連線中有http並且以http開頭
=
*=
^=
$=
5.盒子模型
margin,padding,快元素block，行內元素inline
行內元素可以包含在快級元素內
6.浮動
display:clear both/left/right 不允許浮動
display:block,inline,inline-block
float:left,right
父級邊框塌陷的問題: 浮動不能超出父級元素內
在父元素後增加偽類
father:after{
context: '';
display: blcok;
clear: both;
}
7.定位
1.相對定位:相對原來的位置定位，還是在文件流裡
position:relative
top:20px;
left:20px;
bottom:-10px;
right:20px;
2.絕對定位
沒有父級元素定位的前提下， 相對瀏覽器定位，在原來的文件流內
有父級元素定位的前提下， 相對父級元素定位，在原來的文件流
position:absolute
3.固定定位：定位不動
position:filxed
4.z-index,圖層
.tipText{
color: white;
z-index: 999; 重疊時大的數表示在最上層，可以見不會被重疊
}
.tipBG{
background: #000;
opacity: 0.5 ; 設定背景透明度
filter: alpha(opacity=50); 設定透明度和上面一行是一樣的效果
}
8.動畫
變形
漸變
tranform
轉換
css動畫
canvas
https:cybermap.kaspersky.com/cn/