绝对定位:
绝对定位是脱离了文档流,不会单独占满一行,它的方位只会受到top,left,bottom,right的影响。
一个块的top,left,bottom,right是相对于什么呢?
1)如果它父元素做了定位,就相对于的是最近的一个父元素。
2)父元素没有定位,就相对于Body
相对定位:
相对定位没有脱离文档流,会单独占满一行,它的方位只会受到top,left,right,bottom的影响。
相对定位的top,left,right,bottom是相对于块的最近的一个父元素
固定定位:
固定定位脱离了文档流,不会单独占满一行。
top,left,right,bottom始终相对于的是body
top,left,right,bottom只有设置了定位(绝对、相对、固定)的时候才有用。
1.box-shadow 边框阴影;
/*
X轴偏移量:必填,水平阴影的位置,允许负值;
Y轴偏移量:必填,垂直阴影的位置,允许负值;
阴影模糊半径:可选,模糊距离;
阴影扩展半径:可选,阴影的尺寸;
阴影颜色:可选,阴影的颜色,默认为黑色;
投影方式:可选(设置inset为内部阴影方式,不设置为外部阴影方式);
*/
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
box-shadow:0px 5px 5px #b64b41;
2.渐变色彩;
/*
to top:从下向上;
to right:从左到右;
to bottom:从上到下;
to left:从右到左;
to top left:右上角到左上角;
to top right:左上角到右上角;
*/
线性渐变
background-image:linear-gradient(to top left,red,orange,yellow,green,blue);
3.text-shadow 文本阴影;
/*
X-Offset:阴影的水平偏移距离,其值为正值时阴影向右偏移,反之向左偏移;
Y-Offset:阴影的垂直偏移距离,其值为正值时阴影向下偏移,反之向上偏移;
Blur:阴影的模糊程度,其值不能是负值,值越大,阴影越模糊。不需要阴影模糊,可设置其值为0;
Color:阴影的颜色,可以用rgba色;
*/
text-shadow: 2px 2px 0 red;
4.text-overflow 设置省略标记;
//text-overflow只是用来说明文字溢出时用什么方式显示,要实现省略号的效果,还必须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现省略号的效果;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
//word-wrap 设置文本行为,当前行超过指定容器的边界时是否断开转行;
//语法:
//表示控制连续文本换行
word-wrap:normal
//表示内容将在边界内换行
word-wrap:break-word
5.empty 结构性伪类选择器;
//:empty 选择器表示的就是空。用来选择没有任何内容的元素,没有内容指的是一点内容都没有,哪怕是一个空格。
p:empty{
background:orange;
}
6.not 结构性伪类选择器;
//:not 选择器称为否定选择器,和jQuery中的:not选择器一模一样,可以选择除某个元素之外的所有元素。如:设置表单中除submit按钮之外的input元素添加红色边框;
input:not([type="submit"]){
border:1px solid red;
}
7.target 选择器称为目标选择器,用来匹配文档(页面)的url的某个标识符的目标元素。
/*这里的:target就是指id="brand"的div对象*/
#brand:target p {
background: orange;
color: #fff;
}
8.first-child 选择父元素的第一个子元素
ul > li:first-child {
color: red;
}
9.last-child 选择器选择的元素的最后一个子元素
ul>li:last-child{background:blue;}
10.nth-child(n) 选择器用来定位某个父元素的一个或多个特定的子元素,其中n是参数,可以是整数值(1,2,3,4),也可以是表达式(2n+1、-n+5)和关键词(odd、even),但是参数n的起始值始终是1,而不是0.
ol > li:nth-child(2n+1){
background: green;
}
11.nth-last-child(n)从某父元素的最后一个子元素开始计算,来选择特定的元素
ol > li:nth-last-child(5){
background: orange;
}
12.first-of-type 定位一个父元素下的某个类型的第一个子元素
.wrapper > div:first-of-type {
background: orange;
}
13.nth-of-type(n)定位父元素中某个类型的子元素
.wrapper > div:nth-of-type(2n+1),
.wrapper > p:nth-of-type(2n){
background: orange;
}
.wrapper > div:nth-of-type(odd),
.wrapper > p:nth-of-type(even){
background: orange;
}
14.last-of-type 父元素下的某个类型的最后一个子元素
.wrapper > div:last-of-type{
background: orange;
}
15.nth-last-of-type(n) 选择父元素中指定的某种子元素类型,但它的起始方向是从最后一个子元素开始
.wrapper > div:nth-last-of-type(5){
background: orange;
}
16.only-child 匹配的元素是父元素中仅有一个子元素,而且是唯一的子元素
li:only-child {
background: orange;
}
17.only-of-type 选择一个元素是它的父元素的唯一一个相同类型的子元素,表示一个元素有很多个子元素,而其中只有一种类型的子元素是唯一的
.wrapper p:only-of-type{
background: orange;
}
18.animation自定义动画效果
#d1{
position: absolute;
top: 100px;
left: 200px;
width: 50px;
height: 50px;
background-image: url("Icon-40@2x.png");
animation: donghua 20s infinite ease;
}
@keyframes donghua {
0%{
transform: translateX(0);
/*transform: translateX(9);*/
}
50%{
transform: rotateX(180deg);
}
100%{
transform: rotateX(360deg);
}
}