盒子理論學(xué)習(xí)：
[url]http://www.chinaui.com/school/schoolView.aspx?ARTICLE_ID=297[/url] 十步學(xué)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;/*這個很重要哦！*/
/*還有很多其他標(biāo)簽，省略*/
}
-->
</style>
<div class="mainBox">
<h3>前言</h3>
<p>正文內(nèi)容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文內(nèi)容 </p>
</div>
<div class="mainBox">
<h3>轉(zhuǎn)變思想</h3>
<p>正文內(nèi)容 </p>
</div>
<div class="mainBox">
<h3>熟悉步驟</h3>
<p>正文內(nèi)容 </p>
</div> 2、通配符使用：
* {
margin: 0px;
padding: 0px;
}
這是用了通配符初始化各標(biāo)簽邊界和填充，（因?yàn)橛胁糠謽?biāo)簽?zāi)J(rèn)會有一定的邊界，如Form標(biāo)簽）那么接下來就不用對每個標(biāo)簽再加以這樣的控制，這可以在一定程度上簡化代碼。 3、當(dāng)兩個并排內(nèi)容需要其中一個靠右的話，需要使用到浮動向右：
#right {
float: right;
width: 280px;
background: darkgreen;
}
因?yàn)橄蛴腋?#xff0c;可以理解為浮動于整個盒子之上向右，它的下面還是可以讓#left_content 填東西的，所以需要：
#left_content {
margin-right: 280px;
background: green;
}
這樣就不會#right的內(nèi)容和#left_content 的內(nèi)容重疊了。 4、clear:both的使用:
若出現(xiàn)這種情況：
表現(xiàn)如下：


怎么讓Footer像這樣呢?


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

轉(zhuǎn)載于:https://blog.51cto.com/jenny0927/61228

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。