02_HTML5+CSS详解第四天

Posted 2020-10-16

依旧是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 -