您的位置：首页 > Web前端 > CSS

css3 布局

2015-12-15 16:10 561 查看

---恢复内容开始---

display:css 布局 display，设置或检索对象是否及如何显示。

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | compact | run-in | ruby | ruby-base | ruby-text | ruby-base-group | ruby-text-group | box | inline-box

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline：指定对象为内联元素。

block：指定对象为块元素。

list-item：指定对象为列表项目。

inline-block：指定对象为内联块元素。（CSS2）

table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）

inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）

table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）

table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）

table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）

table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）

table-column：指定对象作为表格列。类同于html标签<col>（CSS2）

table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）

table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）

table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）

compact：分配对象为块对象或基于内容之上的内联对象（CSS3）

run-in：分配对象为块对象或基于内容之上的内联对象（CSS3）

ruby：将对象作为表格脚注组显示（CSS3）

ruby-base：将对象作为表格脚注组显示（CSS3）

ruby-text：将对象作为表格脚注组显示（CSS3）

ruby-base-group：将对象作为表格脚注组显示（CSS3）

ruby-text-group：将对象作为表格脚注组显示（CSS3）

box：将对象作为弹性盒模型显示（CSS3）

inline-box：将对象作为内联块级弹性盒模型显示（CSS3）

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>display_CSS参考手册_web前端开发参考手册系列</title>
<style>
body{font:14px/1.5 georgia,simsun,arial;}
h1{margin:10px 0;font-size:20px;}
ul{margin:0;padding:0;list-style:none;}
.table{display:table;border-collapse:collapse;border:1px solid #ccc;}
.table-caption{display:table-caption;margin:0;padding:0;font-size:16px;}
.table-column-group{display:table-column-group;}
.table-column{display:table-column;width:100px;}
.table-row-group{display:table-row-group;}
.table-row{display:table-row;}
.table-row-group .table-row:hover,.table-footer-group .table-row:hover{background:#f6f6f6;}
.table-cell{display:table-cell;padding:0 5px;border:1px solid #ccc;}
.table-header-group{display:table-header-group;background:#eee;font-weight:bold;}
.table-footer-group{display:table-footer-group;}
</style>
</head>
<body>
<h1>display构造的table小例子，IE7及以下浏览器不支持本示例</h1>
<div class="table">
<h2 class="table-caption">花名册：</h2>
<div class="table-column-group">
<div class="table-column"></div>
<div class="table-column"></div>
<div class="table-column"></div>
</div>
<div class="table-header-group">
<ul class="table-row">
<li class="table-cell">序号</li>
<li class="table-cell">姓名</li>
<li class="table-cell">年龄</li>
</ul>
</div>
<div class="table-footer-group">
<ul class="table-row">
<li class="table-cell">footer</li>
<li class="table-cell">footer</li>
<li class="table-cell">footer</li>
</ul>
</div>
<div class="table-row-group">
<ul class="table-row">
<li class="table-cell">1</li>
<li class="table-cell">John</li>
<li class="table-cell">19</li>
</ul>
<ul class="table-row">
<li class="table-cell">2</li>
<li class="table-cell">Mark</li>
<li class="table-cell">21</li>
</ul>
<ul class="table-row">
<li class="table-cell">3</li>
<li class="table-cell">Kate</li>
<li class="table-cell">26</li>
</ul>
</div>
</div>
</body>
</html>

float: 指出对象是否以及如何浮动

float:none|left|right
none:设置对象不浮动
left:设置对象浮在左边
right：设置对象浮在右边

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>float_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test{float:right;background:#eee;}
</style>
</head>
<body>

clear：none | left | right | both 不允许有浮动对象

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>clear_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test{float:right;background:#eee;}
.test2{clear:right;background:#ddd;}
</style>
</head>
<body>
<div class="test">我将出现在屏幕右方</div>
<div class="test2">注意我出现的位置</div>
</body>
</html>

visibility：visible | hidden | collapse 设置或检索是否显示对象
visible:设置对象可视
hidden：设置对象隐藏
collapse:主要用于隐藏表格的行或者列

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>visibility_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test{visibility:hidden;}
</style>
</head>
<body>
<div class="test">我不会出现在屏幕上</div>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>clip_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test{position:absolute;height:50px;line-height:50px;clip:rect(0 auto 35px 10px);background:#eee;}
</style>
</head>
<body>
<div class="test">看看被剪切后的效果</div>
</body>
</html>

overflow:visible|hidden|scroll|auto
visible:不剪切内容
hidden:将超出对象尺寸的内容进行剪裁，将不会出现滚动条
scroll:将超出对象尺寸的内容进行裁剪，并以滚动条的方式显示超出的内容
auto:在需要裁剪内容并添加滚动条，此为body对象和textarea的默认值

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>overflow_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test{overflow:auto;width:200px;height:100px;background:#eee;}
</style>
</head>
<body>

overflow-x ,overflow-y检索或者设置当对象的内容超出其指定宽度时如何管理内容
visible:不剪切内容
hidden:将超出对象宽度的内容进行裁剪，将不出现滚动条的方式显示超出的内容
scroll:将超出对象宽度的内容进行裁剪，将超出的内容以滚动条的方式显示
auto:在需要时剪切内容并添加滚动条，此为Body,对象和textarea的默认值

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>overflow-x_CSS参考手册_web前端开发参考手册系列</title>
<style>
.test{overflow-x:auto;width:200px;white-space:nowrap;}
</style>
</head>
<body>

box-orient：horizontal | vertical
horizontal:设置弹性盒模型对象的子元素为水平排列
vertical:设置弹性盒模型对象的子元素为纵向排列

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>box-orient_CSS参考手册_web前端开发参考手册系列</title>
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
.box{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;width:600px;height:180px;margin:0;padding:0;list-style:none;}
#box{-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-o-box-orient:horizontal;-ms-box-orient:horizontal;box-orient:horizontal;}
#box2{-webkit-box-orient:vertical;-moz-box-orient:vertical;-o-box-orient:vertical;-ms-box-orient:vertical;box-orient:vertical;}
.box li:nth-child(1){-webkit-box-flex:1;-moz-box-flex:1;-o-box-flex:1;-ms-box-flex:1;box-flex:1;background:#666;}
.box li:nth-child(2){-webkit-box-flex:2;-moz-box-flex:2;-o-box-flex:2;-ms-box-flex:2;box-flex:2;background:#999;}
.box li:nth-child(3){-webkit-box-flex:3;-moz-box-flex:3;-o-box-flex:3;-ms-box-flex:3;box-flex:3;background:#ccc;}
</style>
</head>
<body>
<h1>子元素横向排列 box-orient:horizontal;</h1>
<ul id="box" class="box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>子元素纵向排列 box-orient:horizontal;</h1>
<ul id="box2" class="box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>

box-pack：start | center | end | justify　　

start：设置弹性盒模型对象的子元素从开始位置对齐（大部分情况等同于左对齐）

center：设置弹性盒模型对象的子元素居中对齐

end：设置弹性盒模型对象的子元素从结束位置对齐（大部分情况等同于右对齐）

justify：设置或弹性盒模型对象的子元素两端对齐

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>box-pack_CSS参考手册_web前端开发参考手册系列</title>
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
.box,.box2{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;margin:0;padding:10px;background:#000;list-style:none;}
.box{-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-o-box-orient:horizontal;-ms-box-orient:horizontal;box-orient:horizontal;width:260px;height:100px;}
.box2{-webkit-box-orient:vertical;-moz-box-orient:vertical;-o-box-orient:vertical;-ms-box-orient:vertical;box-orient:vertical;width:100px;height:260px;}
#box,#box5{-webkit-box-pack:start;-moz-box-pack:start;-o-box-pack:start;-ms-box-pack:start;box-pack:start;}
#box2,#box6{-webkit-box-pack:center;-moz-box-pack:center;-o-box-pack:center;-ms-box-pack:center;box-pack:center;}
#box3,#box7{-webkit-box-pack:end;-moz-box-pack:end;-o-box-pack:end;-ms-box-pack:end;box-pack:end;}
#box4,#box8{-webkit-box-pack:justify;-moz-box-pack:justify;-o-box-pack:justify;-ms-box-pack:justify;box-pack:justify;}
.box li{width:50px;}
.box2 li{height:50px;}
.box li:nth-child(1),.box2 li:nth-child(1){background:#666;}
.box li:nth-child(2),.box2 li:nth-child(2){background:#999;}
.box li:nth-child(3),.box2 li:nth-child(3){background:#ccc;}
</style>
</head>
<body>
<h1>横向排列时子元素从起始位置对齐 box-pack:start;</h1>
<ul id="box" class="box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>横向排列时子元素居中对齐 box-pack:center;</h1>
<ul id="box2" class="box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>横向排列时子元素从结束位置对齐 box-pack:end;</h1>
<ul id="box3" class="box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>横向排列时子元素两端对齐 box-pack:justify;</h1>
<ul id="box4" class="box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>纵向排列时子元素从起始位置对齐 box-pack:start;</h1>
<ul id="box5" class="box2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>纵向排列时子元素居中对齐 box-pack:center;</h1>
<ul id="box6" class="box2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>纵向排列时子元素从结束位置对齐 box-pack:end;</h1>
<ul id="box7" class="box2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>纵向排列时子元素两端对齐 box-pack:justify;</h1>
<ul id="box8" class="box2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>

box-align：start | end | center | baseline | stretch
start：设置弹性盒模型对象的子元素从开始位置对齐

center：设置弹性盒模型对象的子元素居中对齐

end：设置弹性盒模型对象的子元素从结束位置对齐

baseline：设置弹性盒模型对象的子元素基线对齐

stretch：设置弹性盒模型对象的子元素自适应父元素尺寸

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>box-align_CSS参考手册_web前端开发参考手册系列</title>
<style>
h1{font:bold 20px/1.5 georgia,simsun,sans-serif;}
.box,.box2{display:-webkit-box;display:-moz-box;display:-o-box;display:-ms-box;display:box;margin:0;padding:10px;background:#000;list-style:none;}
.box{-webkit-box-orient:horizontal;-moz-box-orient:horizontal;-o-box-orient:horizontal;-ms-box-orient:horizontal;box-orient:horizontal;width:260px;height:100px;}
.box2{-webkit-box-orient:vertical;-moz-box-orient:vertical;-o-box-orient:vertical;-ms-box-orient:vertical;box-orient:vertical;width:100px;height:260px;}
#box,#box6{-webkit-box-align:start;-moz-box-align:start;-o-box-align:start;-ms-box-align:start;box-align:start;}
#box2,#box7{-webkit-box-align:center;-moz-box-align:center;-o-box-align:center;-ms-box-align:center;box-align:center;}
#box3,#box8{-webkit-box-align:end;-moz-box-align:end;-o-box-align:end;-ms-box-align:end;box-align:end;}
#box4,#box9{-webkit-box-align:baseline;-moz-box-align:baseline;-o-box-align:baseline;-ms-box-align:baseline;box-align:baseline;}
#box5,#box10{-webkit-box-align:stretch;-moz-box-align:stretch;-o-box-align:stretch;-ms-box-align:stretch;box-align:stretch;}
.box li,.box2 li{padding:10px;}
.box li:nth-child(1),.box2 li:nth-child(1){background:#666;}
.box li:nth-child(2),.box2 li:nth-child(2){background:#999;}
.box li:nth-child(3),.box2 li:nth-child(3){background:#ccc;}
</style>
</head>
<body>
<h1>横向排列时子元素从起始位置对齐 box-align:start;</h1>
<ul id="box" class="box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>横向排列时子元素居中对齐 box-align:center;</h1>
<ul id="box2" class="box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>横向排列时子元素从结束位置对齐 box-align:end;</h1>
<ul id="box3" class="box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>横向排列时子元素基线对齐 box-align:baseline;</h1>
<ul id="box4" class="box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>横向排列时子元素自适应父元素 box-align:stretch;</h1>
<ul id="box5" class="box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>纵向排列时子元素从起始位置对齐 box-align:start;</h1>
<ul id="box" class="box2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>纵向排列时子元素居中对齐 box-align:center;</h1>
<ul id="box2" class="box2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>纵向排列时子元素从结束位置对齐 box-align:end;</h1>
<ul id="box3" class="box2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>纵向排列时子元素基线对齐 box-align:baseline;</h1>
<ul id="box4" class="box2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h1>纵向排列时子元素自适应父元素 box-align:stretch;</h1>
<ul id="box5" class="box2">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>

　　

---恢复内容结束---

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航