浮动布局：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="style.css"> 7 </head> 8 <body> 9 <header>header</header> 10 <aside>aside</aside> 11 <section>section</section> 12 <footer>footer</footer> 13 </body> 14 </html>
*{
margin:0;
padding: 0;
}
header{
height: 100px;
background:rgba(10,180,10,0.5);
}
aside{
width: 30%;
height:450px;
background:rgba(180,10,10,0.5);
float: left;
border:1px solid blue;/*aside的width加上section的width等于100%，此句会多出2px宽，影响正常布局。*/
box-sizing: border-box;/*content-box总宽不包括外边框。border-box总宽包括外边框，可以解决上面那个问题。*/
}
section{
width: 70%;
height: 450px;
background:rgba(10,10,180,0.5);
float: left;
}
footer{
height: 100px;
background:pink;
clear: left;
}
时间： 2024-08-14 09:52:51