css 盒模型相关样式
话不多说，一切还是从最基础的说起。
盒的类型
1.盒的基本类型
在css中，用display定义盒的类型，一般分为block类型与inline类型。
例如div属于block类型，span属于inline类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ background-color: yellow; } span { background-color: #000099; } </style> </head> <body> <div>我是div</div> <span>我是span</span> <span>我也是span</span> </body> </html>
通过运行这段代码，我们可以清楚的可以看到block类型的宽度占满整个浏览器，而inline元素的宽度等于其内容的宽度
每一行只允许容纳一个block元素，但是可以容纳多个inline元素。
下来我们可以通过display属性把div改成block类型，把span改成inline属性，看下其运行效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ background-color: yellow; display: inline; } span { background-color: #000099; display: block; } </style> </head> <body> <div>我是div</div> <span>我是span</span> <span>我也是span</span> </body> </html>
2.inline-block类型
inline-block属于block盒的一种，把元素的display属性设置成inline-block,其显示和设置
成inline一样，但是元素的width、height属性只能作用于block元素上。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ background-color: yellow; display:inline-block; width: 100px; height: 100px; } </style> </head> <body> <div>我是div</div> <div>我是div2</div> </body> </html>
3.inline-table类型
先看下列子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> table { width: 200px; border: solid 1px red; display: inline-table; vertical-align: bottom; } td{ border: solid 1px red; } </style> </head> <body bo> 大家好 <table> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> </table> 大家好 </body> </html>
table属于block类型，要想文字和table同行显示，需要把table的display属性设置成inline-table，但是各个浏览器
对于文字和表格的对齐方式有所差别，一般情况下要设置其对齐方式。
4.list-item类型
可以将多个元素当做列表来显示，并在其前加上列表标记。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ display: list-item; list-style-type: decimal; margin-left: 30px; } </style> </head> <body bo> <div>list1</div> <div>list2</div> <div>list3</div> <div>list4</div> <div>list5</div> </body> </html>
5.none类型
把元素设置成none类型，该元素将不会被显示。
6.overflow属性
overflow属于用于对盒中内容显示不下时显示方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 100px; height: 100px; border: solid 1px red; overflow: hidden; } #div2{ margin-top: 10px; width: 100px; height: 100px; border: solid 1px green; overflow: scroll; } </style> </head> <body> <div id="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div> <div id="div2">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div> </body> </html>
同时还有overflow-x,overflow-y两个属性，可以单独给水平或者垂直方向超出盒范围的内容的显示
显示方式进行设置。
7.box-sizing属性
box-sizing属性是css3中新增的盒模型属性。
在css中使用width和height可以设置元素的宽度和高度，但是可以使用box-siziing属性，可以指定
用width与height属性设置的宽度与高度是否包含元素内部的补白区域，以及边框的宽度和高度。
box-sizing属性值为content-box,及border-box。content-box表示元素的宽度与高度不包括内部的补白区域
及边框的宽度高度，border-box表示元素的宽度与高度包括内部补白区域及边框的宽度及高度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; border: solid 30px red; padding:30px ; } div#div1{ box-sizing: content-box; -webkit-box-sizing: content-box; } div#div2{ box-sizing: border-box; -webkit-box-sizing: border-box; } </style> </head> <body> <div id="div1">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div> <div id="div2">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div> </body> </html>
