盒子理論學習：
[url]http://www.chinaui.com/school/schoolView.aspx?ARTICLE_ID=297[/url] 十步學DIV+CSS建站：
[url]http://jorux.com/archives/10steps-built-web-with-css/[/url] 技巧摘錄：
1、并排排列　　like this:[url]http://www.blueidea.com/articleimg/2007/03/4545/css1.html[/url]
<style type="text/css">
<!--
.mainBox {
?float: left;/*這個很重要哦！*/
/*還有很多其他標簽，省略*/
}
-->
</style>
<div class="mainBox">
<h3>前言</h3>
<p>正文內容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文內容 </p>
</div>
<div class="mainBox">
<h3>轉變思想</h3>
<p>正文內容 </p>
</div>
<div class="mainBox">
<h3>熟悉步驟</h3>
<p>正文內容 </p>
</div> 2、通配符使用：
* {
margin: 0px;
padding: 0px;
}
這是用了通配符初始化各標簽邊界和填充，（因為有部分標簽默認會有一定的邊界，如Form標簽）那么接下來就不用對每個標簽再加以這樣的控制，這可以在一定程度上簡化代碼。 3、當兩個并排內容需要其中一個靠右的話，需要使用到浮動向右：
#right {
float: right;
width: 280px;
background: darkgreen;
}
因為向右浮動，可以理解為浮動于整個盒子之上向右，它的下面還是可以讓#left_content 填東西的，所以需要：
#left_content {
margin-right: 280px;
background: green;
}
這樣就不會#right的內容和#left_content 的內容重疊了。 4、clear:both的使用:
若出現這種情況：
表現如下：


怎么讓Footer像這樣呢?


那就需要用到
#footer {
clear: both;
}

轉載于:https://blog.51cto.com/jenny0927/61228

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的div+css 技巧摘录的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。