DIV 編程總結

一 div加邊框

.divcss1{width:100px;height:50px;border:1px solid #F00}?
<div class="divcss1"></div>?

border:1px dashed #000
設置對象邊框寬度為1px黑色虛線邊框

border:1px solid #000
設置對象邊框寬度為1px黑色實線邊框

給div上邊加1px黑色邊框
div{border-top:1px solid #000}?

給div盒子底部加2px虛線紅色邊框
div{border-bottom:2px dashed #F00}?

二 div內容超出后自動顯示滾動條

? ? 用css的一個overflow:auto的屬性就可以實現。
? ? 先要給定要設置出現滾動條div的寬高，內容超出給定的寬高之后，即可出現滾動條效果。

? ? overflow:scroll.如果你想讓滾動條自始至終都存在，而不僅僅是內容超出后才出現，可以用
overflow:scroll屬性。

? ? 怎么只顯示橫向的滾動條？
? ? 可以設置：overflow-x:scroll,或者：overflow-y:hidden即可。
? ? 如果設置橫向滾動條的時候，一直不顯示橫向拉的那個條是因為內容還不足以讓它顯示出來，
如果是文字的話，它自動換行了，所以不顯示，當設置white-space:nowrap；（不換行）的時候，內
容超出就會出現。

? ? overflow 一共有5個屬性。
? ? 1、overflow:auto ?；內容會被修剪，超出設置的寬高后會出現滾動條
? ? 2、overflow:scroll;內容會被修剪，不管內容是否超出，都會出現滾動條的位置
? ? 3、overflow:visible;這個是默認值，內容不會被修剪，會出現在元素框外面。
? ? 4、overflow:hidden;內容被修剪，多余的內容被隱藏
? ? 5、overflow:inherit;從父元素那里繼承overflow的值。

三 DIV的內容換行

? ? word-break:break-all和word-wrap:break-word都是能使其容器如DIV的內容自動換行。

? ? word-break:break-all 例如div寬200px，它的內容就會到200px自動換行，如果該行末端有個英文單詞很長，它會把單詞截斷，變成該行末端為一部分，下一行為單詞的后端部分。
? ? word-wrap:break-word 與上面一樣，它會把整個長單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉的。

? ? word-break;break-all 支持版本：IE5以上 該行為與亞洲語言的 normal 相同。也允許非亞洲語言文本行的任意字內斷開。該值適合包含一些非亞洲文本的亞洲文本。?
? ? WORD-WRAP:break-word 支持版本：IE5.5以上 內容將在邊界內換行。如果需要，詞內換行( word-break )也將發生。

四 js獲取div內容

<div id="id1"></div>
<div id="id2"></div>

如果是要獲取id是id1的div的數據，獲取div里面的內容有兩種方式
1 純js獲取數據
var a=document.getElementById("id1").innerText;
?
2 jqeury獲取數據
var a=$("#id1").html()

五 DIV內容對齊

text-align的值與說明：設置或檢索對象中文本的左中右對齊方式。

text-align語法：
text-align : left | right | center | justify?

left : 左對齊
right : 右對齊
center : 居中
justify : 兩端對齊（不推薦使用，通常大部分瀏覽器不使用）

div{ text-align:left } div標簽對象內內容（圖片和文字等）將靠左對齊
div{ text-align:right} div標簽內內容（圖片和文字等）將靠右對齊
div{ text-align:center } div標簽內內容（圖片和文字等）將居中對齊
?

總結

以上是生活随笔為你收集整理的DIV相关编程总结的全部內容，希望文章能夠幫你解決所遇到的問題。

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