標籤：ref styles ext html tle sheet border padding div
浮動布局：
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;}
【CSS3】布局
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
