CSS属性引申
hover伪类
当鼠标移入执行选中的代码,将鼠标移出忽略此代码。
选择器:hover{ }
**伪类也有权重值的,它的权重值和class一样是10点**
伪类当然不止hover一个,还有很多其他的伪类,我就不一一介绍了,暂时hover用的最多。
标签分类
行级元素 / 内联元素 / 行内元素 ( inline )
特点:
1.不可以通过css改变他的宽高。
2.内容决定了元素所占大小
块级元素 (block)
特点:
1.可以通过css改变他的宽高。
2.独占一行,没满足一行就占用一行,没满足两行就占用两行
~~~~行级块元素 (inline-block)
特点:
1.可以通过css改变他的宽高。
2.不独占一行
自定义行级元素 display:inline;
自定义块级元素 display:block;
自定义行级块元素 display :inline-block;
css企业开发经验
先定义功能,再用功能修饰结构
将css相同的属性提取出来,为特定的功能封装好css属性,再赋给html。
自定义标签
弥补一些标签天生的不足
利用一些废弃标签创造我们需要的新标签
通配符选择器初始化
一般不给标签加id选择器
一般通过添加class类名来选择的,因为id代表唯一标示,我们一般用id来做标记,后台的php会提取出来id,然后换成他们的标记,因此可能会导致我们的选择器选择不出来我们想要的标签。
盒模型问题
盒模型的四个部分
外边距 margin值可以为负数
边框 border
内边距 padding
内容区 content【我们设置的width,height】
盒子的三部分
盒子 = 边框 + 内边距 + 内容区
内边距
包含4个值:padding-top padding-right padding-bottom padding-left;
当只设置三个值时:上 (左右) 下
当只设置两个值时:(上下)(左右)
【margin与padding相同】
注意:网页自带8px的margin
盒模型的计算问题
我们现在一个盒子有10px的margin、5px的border、10px 20px 30px 40px的padding和100px的content,那么这个盒子的宽高分别是多少呢?
答案:
width = 5 + 40+ 100 + 20+ 5 = 170px;
height = 5 + 10 + 100 + 30 + 5 = 150px;
宽度的计算是:5px的border+40px的padding-left+100px的content+20px的padding-right+5px的border=170px;
高度的计算是: 5px的border+10px的padding-top+100px的content+30px的padding-bottom+5px的border=150px;
层模型
css中元素的层次模型主要是由 position 这个属性来决定的。
position属性:
position的意思是定位,同样这个属性的作用就是给元素施加定位。它一共有四个值,分别是 static、absolute、relative、fixed
默认值:
static是默认的属性,当我们没有写position属性的时候,元素默认的定位就是static定位。
相对于可视区视口进行定位
【IE6 不支持】
position:fixed;
绝对定位
position:absolute;
特点
【1】脱离原来位置进行定位(已经在其他层面上了)。
【2】相对于,最近的有定位的父级进行定位,如果没有,相对于document(文档)进行定位。
当我们改变定位之后,这个元素就有四个属性可以使用
left:100px;左边线距离浏览器左边框
top:100px;上边线距离浏览器上边框
right:100px;右边线距离浏览器上边框
bottom:100px;下边线距离浏览器上边框
这四个属性分别可以设置当前元素距离左边、右边、上边和下边的距离为多少,但是四个属性很少一起出现,一般都是两两一对出现,其中left和top是一对,right和bottom是一对。
相对定位
position:relative;
特点:
【1】保留原来的位置进行定位,实现定位后,也在另一个层面上。
【2】相对于自己原来位置进行定位
当我们仅仅给元素设置position:relative;并没有设置left、right、top、bottom属性的时候,元素的定位是没有发生任何改变的,因为这个特性,一般在开发中,relative都是用作设置参照物的,一个absolute元素要相对于那个元素进行移动,就给那个元素设置relative的定位就可以了。
absolute和relative的区别
看一个例子
.wrapper {
width: 200px;
height: 200px;
background-color: orange;
margin-top: 100px;
margin-left: 100px;
}
.box{
width:100px;
height: 100px;
background-color: black;
margin-left:100px;
}
.content{
width: 50px;
height: 50px;
background-color: yellow;
}
此时我们在浏览器中看到的样式是这个样子的:
现在我们给content加上定位的样式。
.content{
position:absolute;
left: 50px;
width: 50px;
height: 50px;
background-color: yellow;
}
这个时候浏览器中的样式就会发生改变,content那个黄色的小方块会跑到橘黄色的方块外面:
这是因为,当我们给 content设置position:absolute;之后,浏览器在渲染的时候,会先向上找到box这个div,看看这个div有没有定位,因为没有,所以继续向上找wrapper,依然没有,再向上找body,还是没有,所以最后就是相对于浏览器边框定位,这个时候content的left属性就是相对于浏览器边框左边有50px的距离的意思。
现在我们把content的定位换成relative,浏览器中的结果变成了这个样子:
本来content黄色小方块在黑色方块的左上角,然后relative相对与自身的位置进行定位,这个时候的left属性的意思就是相对于本来在黑色左上角的那个位置向右移动了50px的距离,也就是现在这个黄色小方块所在的位置。
元素水平垂直居中
div {
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
background-color: red;
}
这个div就会在有定位的父级里面水平垂直居中了