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>