.inline-block布局
<style>
*{margin: 0;padding: 0;}
.nav{
text-align: center;
background-color: #ff416d;
height: 50px;
font-size: 0;
}
.nav a{
display:inline-block;
width: 100px;
line-height: 50px;
text-align: center;
color: white;
font-size: 14px;
text-decoration: none;
}
.nav a:hover{
background-color: pink;
}
</style>
浮动float
<style>
*{margin: 0;padding: 0}
.nav{
width:990px;
height: 400px;
background-color: slategray;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.nav div{
margin-top: 10px;
width: 240px;
height: 380px;
box-sizing: border-box;
border: 1px solid #fff;
float: left;
color:aqua;
font-size: 18px;
}
.nav div:not(:last-child){
margin-right: 10px;
}
.nav img{
margin-top: 10px;
margin-left: 14px;
}
.nav a{
text-align: left;
margin-left: 14px;
}
</style>
<body>
<div class="nav">
<div>
<img src="images/data_image.png" alt="">
<a href="">haha haha </a>
<a href="">bbbb bbbb</a>
<a href="">ccc ccc</a>
<a href="#">百度</a>
</div>
<div></div>
<div></div>
<div></div>
</div>
<div class="nav">
<div><img src="images/data_image.png" alt=""></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
float和父级元素
<style>
{margin: 0;padding: 0;}
/
父元素不设置高度，子元素float，父元素的高度会坍塌
1.使用overflow: hidden;属性可以重新获取子元素的高度。
2.使用clear：both清除浮动。
3.使用一个公用的样式row清除浮动。
*/
.parent{
width: 200px;
background-color: red;
border: 1px solid #000;
}
.child{
height:200px;
width: 100px;
float: left;
background-color: blue;
}
.row::after{
content: "";
display: table;
clear: both;
}
</style>
绝对定位和相对定位
1234567890.jpg
box2 {
postion:relative;
left:30px;
top:20px;
}
绝对定位后，不管元素之前的display是block还是inline都会变成inline-block
网友评论