DIV相关编程总结

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标签内内容（图片和文字等）将居中对齐