html5/css3常规布局
Posted 小曹ydj
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5/css3常规布局相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>会存</title>
<style>
* {
margin: 0;
padding: 0
}
.chuiZhiJuZhong1{ display: -webkit-box;-webkit-box-orient: vertical;-webkit-box-pack: center;width:200px;height:100px;border:1px solid red}
.outer {display:table; width:200px; overflow:hidden; background: #eee; height: 100px;margin:10px 0}
.middle {display:table-cell; vertical-align:middle;}
.hideText{font-size: 16px;color: #636363;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;}
</style>
</head>
<body>
<div>请使用webkit浏览器打开</div>
<!-- 多行文字垂直居中 -->
<div class="chuiZhiJuZhong1">
<div>我是第一行</div>
<div>我是第二行</div>
</div>
<!-- 如果是pc端，由于 ie不支持box-pack 所以要用以下布局-->
<div class="outer">
<div class="middle">
<div>我是第一行</div>
<div>我是第二行</div>
</div>
</div>
<!-- 当即有固定长度，又有不固定长定，但又要沾满整个一行 -->
<div style="display:-webkit-box;height:100px;margin:10px 0">
<div style="width:100px;background:red;height:100%"></div>
<div style="-webkit-box-flex:1;background:yellow;height:100%"></div>
</div>
<!-- box-sizing:border-box可以把边框计入div整个width内，如果不加入，黄色div会由于没有50%的空间而往下掉 -->
<div style="background:green;width:100%;height:100px;margin:10px 0">
<div style="-webkit-box-sizing:border-box;float:left;width:50%;border:10px solid red;height:100%"></div>
<div style="-webkit-box-sizing:border-box;float:left;width:50%;border:10px solid yellow;height:100%"></div>
</div>
<!-- 输入框右边加入图标，按钮或文字 -->
<div style="border:1px solid red;margin:10px;display:-webkit-box;">
<input type=‘text‘ placeHolder="输入" style="height:25px;border:none;outline:none;-webkit-box-flex:1;display:block">
<div style="width:25px;hight:25px;background:green"></div>
</div>
<!-- 文字溢出省略号 -->
<div class="hideText">我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb我是sb</div>
</body>
</html>
以上是关于html5/css3常规布局的主要内容，如果未能解决你的问题，请参考以下文章
疯狂HTML5+CSS3+JavaScript讲义(第2版)