css选择器，盒子模型，定位，动画

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/