第10章 盒模型与布局相关属性


10.1 布局相关属性
 (1) float属性(float:left|right)
 (2) 通过float属性实现多栏布局(style元素放在head元素内)
 (3) 使用clear属性实现换行(clear:both>)
 (4) 使用clip属性控制裁剪()
 (5) 控制组件的滚动条("...")
10.2 盒模型和display属性
 (1) 两种最基本的盒模型()
 (2) display:block | inline
 (3) 隐藏元素:display:none
 (4) 设置display: inline-block行内显示块div
 (5) 横向导航菜单,设置body>div, div>div以display:nline-block的盒模型显示
 (6) 设置table{display: inline-table}表内联显示
 (7) 表格盒模型 display: table,table-caption,table-rowtable-cell
 (8) 设置div以list-item的盒模型显示
 (9) 设置body>div, div>div以display:list-item的盒模型显示
 (10) 多栏布局div>div{display: inline-block;}
 (10) display:run-in[好多浏览器不支持]
10.3 对盒添加阴影
 (1) div阴影 div{box-shadow: -10px -8px 6px #444}
 (2) table阴影 table{box-shadow: 10px 10px 6px #444;}
10.4 CSS3的多栏布局
 (1) CSS3分栏(column-count:2)
 (2) CSS3分栏
 (3) CSS3分栏
 (4) 通过box盒模型实现了多栏布局
 (5) 垂直排列的box盒模型
 (6) 水平排列的box盒模型
 (7) 使用box-flex属性

返回目录