1、css3的display属性:
inline:内联
inline-block:可以设置宽高的内联
block:设置为块:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css3盒子类型</title> <style> /*inline:内联，inline-block:可以设置宽高的内联,*/ p{ /*此处设置宽高无用*/ background: #999999; display: inline; width:200px; } span{ background: #fff000; display: inline-block; width:200px; } </style> </head> <body> <p>这是一段测试文字</p> <p>这是一段测试文字</p> <span>这是一段测试文字</span> <span>这是一段测试文字</span> </body> </html>
inline-table:内联表格:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>line-table属性</title> <style> /*inline-table:内联表格*/ table{ border: 2px solid #999; display: inline-table; } table td{ border: 2px solid rebeccapurple; } </style> </head> <body> 我是上面文字 <table> <tr> <td>单元1</td> <td>单元1</td> <td>单元1</td> </tr> <tr> <td>单元1</td> <td>单元1</td> <td>单元1</td> </tr> <tr> <td>单元1</td> <td>单元1</td> <td>单元1</td> </tr> </table> 我是下面文字 </body> </html>
list-item:把元素设置为列表项:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>list-item属性</title> <style> /*list-item:把元素设为列表项。可设置列表项样式*/ div{ display: list-item; list-style-type: circle; margin-left:50px; } </style> </head> <body> <div>我是一段测试文字</div> <div>我是一段测试文字</div> <div>我是一段测试文字</div> </body> </html>
2、盒子的大小计算方式:box-sizing属性：
border-box:此情况下设置的宽高为整个盒子(包含padding)的宽高;
content-box:此情况下设置的宽高为盒子内容(不包含padding)的宽高;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子的box-sizing属性</title> <style> /*下面两个div宽高此情况下是一样的，*/ #div1{ box-sizing: border-box; width:240px; height:240px; padding:20px; background: #fff000; } #div2{ box-sizing: content-box; width:200px; height:200px; padding:20px; background: #00ff00; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html>