box-sizing属性定义及用法box-sizing属性是css3中新增的属性，允许你以某种方式定义某些元素，以适应指定区域（假如您需要并排放置两个带边框的框，可通过将 box-sizing属性设置为"border-box"，这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中）；Internet Explorer、Opera和Chrome浏览器支持box-sizing属性，Firefox还不支持该属性，但支持-moz-box-sizing属性替代box-sizing属性；box-sizing属性语法格式box-sizing: content-box/border-box/inherit;参数说明content-box：这是由CSS2.1规定的宽度高度行为，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框；border-box：为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度;inherit：规定应从父元素继承box-sizing属性的值;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>网站服务条款</title>
<style type="text/css">
#policy {
font-family:Arial, 宋体;
margin:10px auto;
box-sizing:content-box;
width:400px;
padding:20px;
background-color:#e4e4e4;
box-shadow:inset 0 0 15px 5px #bbb;
}
#policy header {
font-size:24px;
font-weight:bold;
line-height:25px;
}
#policy section {
background-color:#fff;
font-size:12px;
line-height:25px;
box-sizing:border-box;
width:400px;
height:200px;
padding:10px;
border:1px solid #CCC;
overflow-x:hidden;
overflow-y:scroll;
}
#policy footer {
text-align:center;
padding-top:5px;
}
#policy footer input {
border:1px solid #666;
box-shadow:2px 2px 1px #BBB;
}
</style>
</head>
<body>
<div id="policy">
<header>网站服务条款</header>
<section>
<p> 用户必须单独承担发布内容的责任。用户对论坛服务的使用是根据所有适用于本论坛的国家法律、地方法律和国际法律标准的。</p>
<p> 用户不得在本站论坛发布含有下列内容之一的信息:</p>
<p> (1) 反对宪法所确定的基本原则; </p>
<p>(2) 危害国家安全,泄露国家秘密,颠覆国家政权,破坏国家统一; </p>
<p>(3) 损害国家荣誉和利益; </p>
<p>(4) 煽动民族仇恨、民族歧视,破坏民族团结; </p>
<p>(5) 破坏国家宗教政策,宣扬邪教和封建迷信; </p>
<p>(6) 散布谣言,扰乱社会秩序,破坏社会稳定;</p>
<p> (7) 散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪; </p>
<p>(8) 侮辱或者诽谤他人,侵害他人合法权益;</p>
<p> (9) 连锁信件,金字塔方案及蛊惑性文章;</p>
<p> (10) 任何涉及他人版权的资料的非法复制和传播; </p>
<p>(11) 任何未经本站许可的商业性质的广告; </p>
<p>(12) 含有法律、行政法规禁止的其他内容。 </p>
</section>
<footer>
<input type="button" value="同意" />
<input type="button" value="不同意" />
</footer>
</div>
</body>
</html>
Processed:
0.010, SQL:
9
