css3盒模型

時間 2019-12-14

標籤 css3 css 模型欄目 CSS 简体版

原文原文鏈接

css2.1盒模型：css

當你定義盒子的寬高後；若是添加padding和border值後盒子的寬高會被撐大html

盒子的高度=定義的高度+(padding-top + padding-bottom)+(border-top + border-bottom);css3

盒子的寬度=定義的寬度+(padding-left+ padding-right)+(border-left+ border-right);web

css3.0盒模型：app

當你定義盒子高度後；若是添加padding和border值後盒子大小不會改變，他會向內容區收縮。ide

盒子的高度=你定義的高度；盒子的寬度度=你定義的寬度；佈局

用法：spa

box-sizing：用來控制元素的盒模型解析模式htm

box-sizing:content-box | border-box | inherit；blog

默認值是content-box:維持W3C的標準盒模型也就是css3.0之前的版本佈局

border-box：從新定義盒模型組成的模式。

inherit：使元素繼承父元素的盒模型模式。

寫法（考慮兼容）：

-moz-box-sizing: border-box;
--webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;

實例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3佈局</title>
</head>
<style>
*{margin:0;padding:0;}
.wrapper{
width:960px;
margin:0 auto;
color:#fff;
background:#cccccc;
text-align:center;
-moz-box-sizing: border-box;
--webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing:border-box;
box-sizing: border-box;
}
.header{
background:#38382e;
margin-bottom: 10px;
border:10px solid red;
padding:10px;
width:100%;height:100px;
box-sizing:inherit;
}
.sidebar{
float:left;
width:220px;
margin:0px 20px 10px 0px;
height:300px;
background:#5d33cf;
border:10px solid red;
padding:10px;
box-sizing:inherit;
}
.content{
float:left;
width:720px;
margin-bottom: 10px;
height:300px;
background:#c8ca30;
border:10px solid red;
padding:10px;
box-sizing:inherit;
}
.footer{
clear:both;
width:100%;
height:100px;
background:#cc4ad5;
border:10px solid red;
padding:10px;
box-sizing:inherit;
}
</style>
<body>
<div class="wrapper">
<div class="header">頁眉</div>
<div class="sidebar">左邊欄</div>
<div class="content">主內容</div>
<div class="footer">頁腳</div>
</div>
</body>
</html>