1.在写HTML文件前,先将原本丑陋的配置文件清了
*{
padding: 0;
margin: 0;
}
body{
font-size: 14px;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
input{
border: 0;
outline: 0;
}
2.如何让一个绝对定位的盒子居中
left:50%;
margin-left:- 宽度的一半
3.固定定位(position:fixed)
效果:脱标
参考点:浏览器的左上角
作用:
小广告:
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
300px;
height: 300px;
position: fixed;
top: 500px;
left:1226px;
}
</style>
</head>
<body>
<div class="box"></div>
固定导航栏
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
background-color: palevioletred;
100%;
height: 300px;
position: fixed;
top: 0;
}
body{
padding-top: 300px;
}
</style>
</head>
<body>
<div class="box"></div>
<p>qwertyu</p>
<p>as</p>
4.z-index的使用
1、z-index 值表示谁压着谁，数值大的压盖住数值小的，
2、只有定位了的元素，才能有z-index,也就是说，不管相对定位，
绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3、z-index值没有单位，就是一个正整数，默认的z-index值为0，
如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，
谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4、从父现象：父亲怂了，儿子再牛逼也没用
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father,.father1{
300px;
height: 300px;
background-color: palevioletred;
position: relative;
}
.child{
200px;
height: 200px;
background-color: indianred;
position: absolute;
left:300px;
top:250px;
z-index: 1;
}
.child1 {
200px;
height: 200px;
background-color: #cd9466;
position: absolute;
left: 300px;
}
</style>
</head>
<body>
<div class="father">
<div class="child">
aaa
</div>
</div>
<div class="father1">
<div class="child1">
aaa
</div>
</div>
5.小米页面小知识点
设置在父盒子中垂直方向上的位置
vertical-align:1px
清除form表单中原始的样式
box-shadow:5px 5px 5px #333