DIV實現假線條：
如何使用DIV制作模似HR線呢？（） <div style="border: 2px dotted;height: 200px;width: 0px"></div> 如下圖：
1 盒字模型：margin（邊界） padding（填充） 2 padding（ 填料）的意思：如果A盒子包含B盒子，那么B盒相當於A盒子的填充 3 料，則當我們使用A盒子時如： 4 #divA { 5 padding-left:100px; （填充料B盒子距離自己左邊距100PX） 6 7 } 8 時，則B盒子原型保持不變，同時會在A盒子原左邊基礎撐大100PX 9 margin（邊緣）相對於A盒子來說，如果設置B盒子的距外界邊緣多少，在使B盒子跑外邊距增加多少（在保持A與B原理基礎調節距離） 10 一句話總結：如A盒子包含B盒子，那么B盒子相對於A盒子來說是A盒子的內容（填充料），則如果我們設置A盒子使用padding時，則相當於設置填充料B離自己A的距離是多少（使用PADDING設置多少相對應對撐大邊距自己多少） 11 但如果針對B盒子來說：使用margin則設置自己與外邊距的路離 12 屬 性 13 CSS名稱 14 說 明 15 邊界屬性margin 16 margin-top 17 設置對象的上邊距 18 margin-right 19 設置對象的右邊距 20 margin-bottom 21 設置對象的下邊距 22 margin-left 23 設置對象的左邊距 24 邊框屬性 25 border 26 border-style 27 設置邊框的樣式 28 border-width 29 設置邊框的寬度 30 border-color(border-bottom設置下邊框) 31 設置邊框的顏色 32 填充屬性 33 padding（會撐大自己） 34 padding-top 35 設置內容與上邊框之間的距離 36 padding-right 37 設置內容與右邊框之間的距離 38 padding-bottom 39 設置內容與下邊框之間的距離 40 padding-left 41 設置內容與左邊框之間的距離
關鍵詞：overflow:auto 為什么設置overflow:auto之后，外層就包含了內層，而不是將溢出的那部分使用滾動條顯示出來呢？ 這是因為沒有指定外層的高度，所以它就自適應了。如果指定了外層的高度，而內層的高度又大於外層的高度，那么就會顯示滾動條了。如以下代碼所示。 讓內層Div將外層Div撐開 博客分類： html 在CSS排版中，如果一個層中的層使用了float浮動的話，那么就有可能會出現外層沒有被內層撐開的情況，如以下代碼所示： <div style="width:300px; "> 測試 <div style="width:100px; height:100px; float:left; margin:10px;"> 左邊 </div> </div> 如果要解決這個問題，可以在外層的CSS中加上“overflow:auto”。 在CSS中overflow屬於用來說明當內容溢出元素框時要怎么處理，從上圖中可以看出，內層已經溢出了外層，所以需要使用overflow屬性來指如何顯示內層中。overflow屬性的默認值是visible，也就是不管它是怎么溢出的，溢出的內容不裁剪，任其顯示在元素框外面。 除了visible值之后，overflow屬性還有以下幾個值： hidden：內容會被裁剪，溢出的部分看不到。 scroll：使用滾動條來查看溢出的部分，始終顯示滾動條。 auto：如果內容需要裁剪，則等於scroll，顯示滾動條；否則不顯示滾動條。 inherit：從父元素中繼承overflow屬性值。不過以前的IE版本都不支持該屬性值，包括IE8，IE9還沒試過。 由於本例中，外層的CSS沒有指定overflow屬性，所以默認為visible，也就是不管它怎么個溢出法，所以，只要將外層的CSS中加上overflow:auto，如以下代碼所示： <div style="width:300px; overflow:auto;"> 外層 <div style="width:100px; height:100px; float:left; margin:10px;"> 內層 </div> </div> 也許有人會說，為什么設置overflow:auto之后，外層就包含了內層，而不是將溢出的那部分使用滾動條顯示出來呢？這是因為沒有指定外層的高度，所以它就自適應了。如果指定了外層的高度，而內層的高度又大於外層的高度，那么就會顯示滾動條了。如以下代碼所示。 <div style="width:300px; overflow:auto; height:80px;"> 外層 <div style="width:100px; height:100px; float:left; margin:10px;"> 內層 </div> </div>