第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属性
返回目录