前端---CSS介绍二
块居中:margin
margin: 100px auto /*第一个参数表示上下,第二个参数表示左右,auto:浏览器会根据当前屏幕大小进行自动适配,然后居中*/
伪选择器(当鼠标移动到上面会展示该样式,离开会恢复):
<style>
span:hover{
font-size:50px;
color:Red;
}
</style>
<boby>
<span href = "#">伪选择器</span>
</boby>
标签转换:
display:inlin-block; 转换成行内标签
border-collapse:collapse; 合并表格里面的线
cellpacing="10px"; 文字和表格间的距离
cellspacing:0;表示间距,
<tr>声明一行数据,<th>表示表头,表头的数据一般是加粗的; <td>表格内容
相对定位:(position:relative;)
1:如果使用相对定位进行偏移,name会保留之前的位置
2:使用相对定位进行偏移,会参照之前的位置
绝对定位(position:absolute;)
1:不会占用位置
2:绝对定位的参照是boby,或者是屏幕的边框
3:如果使用绝对定位,可以任意设置标签的宽度和高度
固定定位(position:fixed;)
1:固定定位不会占据位置
2:参照物是参照可视化的界面
3:任何标签都可以设置宽度和高度
补充:在开发中相对定位一般情况下不会使用,但当在做定位参照,寻找起点才会使用,之所以不使用相对定位,是因为其一直占着位置
例如:
<head>
<meta charset="utf-8" />
<title></title>
<style>
div{
width: 590px;
height: 470px;
margin: 50px auto;
position: relative;
/* 在开发的时候,相对定位一般情况都不会使用
只有一种情况,在做位参照,寻找起点,才会用到
之所以不使用相对定位,是因为相对定位会一直占着位置*/
}
.left{
width: 30px;
height: 90px;
background: pink;
position: absolute;
left: 0px;
top: 50%;
margin-top: -45px;
}
.right{
width: 30px;
height: 90px;
background: pink;
position: absolute;
right: 0px;
top: 50%;
margin-top: -45px;
}
</style>
</head>
<boby>
<div>
<img src="../img/bb.jpg" />
<span class="left"></span>
<span class="right"></span>
</div>
</boby>
元素溢出:
overflow:auto;设置滚动条
overflow:hidden:隐藏溢出的部分
注意点:使用input标签,在使用的时候,系统默认给我们1px,所以需要设置为:padding:0px;
