一.定位
1.1相对定位
div{
width:100px;
height:100px;
background: red;
position:relative;
left:200px;
top:200px;
其相对定位是指元素在页面上正常的位置
相对定位一般不使用right bottom
right：0px
bottom：10px
1.2,。绝对定位
.parent{
width:200px;
height: 200px;
background-color: red;
position:relative;
}
.child{
width:50px;
height: 50px;
background: green;
position: absolute;
right: 0;
bottom: 0px;
}
~~~
绝对定位的元素移动的位置，是离它最近的给了定位的父元素
left right top bottom
#二.元素居中
*{margin:0;padding:0}
.parent{
width:300px;
height: 300px;
background: red;
position:relative;
}
.child{
position: absolute;
width:50px;
height: 50px;
background: green;
left:50%;
top:50%;
margin-left: -25px;
margin-top: -25px;
}
元素的垂直水平居中可通过相对绝对定位实现，实现绝对定位的元素在相对定位的父元素上移动
通过调节left right的值可实现垂直水平居中
1.3.元素水平居中
*{margin:0;padding:0}
html,body{
width:100%;
height:100%;
}
img{
position: absolute;
left:50%;
top:50%;
width:618px;
height:128px;
margin-left: -307px;
margin-top: -64px;
}
body{
position:relative;
background: url("images/bg.png") no-repeat center center;
background-size: cover;
}
子元素left top值给百分比，是相当于父元素的width height而言
三.搜索栏的制作
1.1
*{margin:0;padding:0}
button{
width:23px;
height:22px;
background: url("images/icon4.png");
border:none;
position: absolute;
top:50%;
margin-top: -11px;
right: 5px;
}
.search{
margin:100px;
width:240px;
height:40px;
position:relative;
}
input{
padding-left:20px;
border:none;
border-radius: 30px;
outline:none;
width:220px;
height: 40px;
background: #eee;
}
</style>
</head>
<body>
<div class="search">
<input type="text">
<button></button>
</div>
可通过相对绝对定位实现按钮和输入框之间的位置变化
1.2.百度搜素栏
*{margin:0;padding:0}
button{
color:#fff;
width:100px;
height: 38px;
position: absolute;
border:1px solid #3385ff;
background: #3385ff;
right:0px;
}
.search{
width:640px;
height: 38px;
position:relative;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
}
input{
width:540px;
height: 36px;
position: absolute;
border:1px solid #b8b8b8;
}
