1.盒模型包括哪些屬性
盒模型本質是一個盒子冯勉，封裝周圍的 HTML 元素萌壳，盒子內部包括了四部分：邊界（間隔）亦镶，邊框，填充（間隙）讶凉，內容染乌。
- 邊界（Margin）：清除邊框區(qū)域山孔。Margin 沒有背景顏色懂讯，它是完全透明的，也就是在邊距外面自動留出的一段空白
- 邊框（Border）：邊框周圍的填充和內容台颠，邊框是受到盒子的背景顏色影響
- 填充（Padding）：清楚內容周圍的區(qū)域褐望，會受到框中填充的背景顏色影響勒庄，也就是盒子內裝的東西和邊框的距離。padding 的順序是上瘫里、右实蔽、下、左（順時針記憶）
- 內容（Content）：盒子的內容谨读，顯示文本和圖像
盒模型總共有兩種模式：標準模式與怪異模式
我舉了一個例子來演示標準模式與怪異模式的差別局装，下面是演示代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.box {
width: 200px;
height: 200px;
border: 20px solid black;
padding: 50px;
margin: 50px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
- 標準模式下盒模型如下圖，總寬度和高度=width/height+padding+border+margin
標準模式.png
- 怪異模式下盒模型如下圖劳殖，盒子總寬度與高度包含了內邊距（padding）和邊框（border）在內铐尚，所以盒子總寬度/高度 = width/height+margin = 內容區(qū)寬度/高度+padding+border+margin
怪異模式.png
<strong>PS:更改模式就需用到 css3 屬性 box-sizing，它有兩個值哆姻，分別是 content-box（默認模式宣增，即標準模式）與 border-box（怪異模式）。
2. text-align: center 的作用是什么，作用在什么元素上箕昭？能讓什么元素水平居中
規(guī)定元素中的文本水平居中灵妨，作用在行內元素上，能讓元素中的副容器水平居中落竹，不針對元素本身
3.如果遇到一個屬性想知道兼容性闷串，在哪查看?
可以通過 can i use 中來查詢
4.IE 盒模型和 W3C 盒模型有什么區(qū)別?
- IE 盒模型就等于一個怪異模式的盒子模型，也就是說總寬度/高度 = width/height+margin = 內容區(qū)寬度/高度+padding+border+margin
- W3C 盒模型就是標準模式的盒子模型筋量，總寬度和高度=width/height+padding+border+margin
- ie678怪異模式（不添加 doctype）使用 ie 盒模型烹吵；chrome，ie9+, ie678(添加 doctype) 使用標準盒模型
5.以下代碼的作用桨武？兼容性肋拔？
*{
box-sizing: border-box;
}
- 作用：讓該 html 文件下的代碼盒子模型均使用怪異模式，即寬度= 內容寬度
兼容性.png
<strong>本文版權歸作者和饑人谷所有呀酸，轉載請注明出處
