02_HTML5+CSS详解第四天

依旧是CSS部分

1. 盒布局
   基本的两种类型 - inline和block
   A - 使用inline-block属性可以直接将两个div元素进行并列显示，不需要使用float属性，也不需要用clear清除浮动了。
   

   div{width: 200px;height: 200px;}.div1{background: red;display: inline-block;height: 100px;}.div2{background: green;display: inline-block;}.div3{background: blue;display: inline-block;}.div4{background: yellow;display: inline-block;height: 30px;vertical-align: top;}.div5{background: green;display: inline-block;}

   要点：a - 使用inline-block并列显示的div之间的默认对齐方式与div元素是否为空有关，可用vertical-align进行设置（相关链接：http://bbs.csdn.net/topics/392094244）
              b - 使用inline-block并列显示的元素之间默认有空格，解决方法是在代码中令该元素之间紧邻，不要有空格，如：<div>……</div><div>……</div>
   B - 在css2.1之前，如果要实现水平菜单，需要用float属性，大多数菜单是利用ul列表和li列表项目来显示的，li元素隶属于block类型下的list-item类型，所以要并列显示就要用float属性
   

   ul{margin: 0;padding: 0;}li{display: inline-block;//传统方式是用float:left;padding: 10px 20px;background-color: #f60;width: 100px;text-align: center;list-style: none;border-right: 2px solid red;}a{text-decoration: none;color: #fff;}

   C - inline-table

   table{border: 2px solid black;display: inline-table; ??将表格以行内元素显示vertical-align: bottom;}td{border: 2px solid blue;}

   效果：

   
    D -

02_HTML5+CSS详解第四天

原文地址：http://www.cnblogs.com/yolo-bean/p/7953460.html