一、盒模型包括哪些属性
**1、盒模型是css中元素大小的呈现方式，每个元素都有盒模型。它包括元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） **
Paste_Image.png
- margin是用来控制元素周围的间隔，它永远是透明的
- padding是元素的内容与边框的距离，它会受元素设置的颜色影响
- content就是元素的内容，设置width和height可以调整它在元素中空间中占用的大小
- border边框是围绕元素内容和内边距，可以设置大小颜色
说明：它们都可以设置上下左右的属性。
附加：
①对于行内元素设置宽和高是无效的，它的宽高是由它本身内容决定的
②行内元素可以设置margin和padding，但只有水平方向的margin和padding占据空间大小，垂直方向padding不占据空间大小但可以被撑开而margin没有效果，但可以设置背景颜色和边框，这样会出现覆盖的问题。
2.外边距叠加
①外边距叠加指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
②叠加后的外边距的高度等于两个发生叠加的外边距的高度中的较大者。
③但是注意只有普通文档流中块框的垂直外边距才会发生外边距叠加。行内框、浮动框或绝对定位框之间的外边距不会叠加。
一般来说， 垂直外边距叠加有三种情况：
①元素自身叠加。当元素没有内容、内边距、边框时， 它的上下边距就会相遇了， 即会产生叠加。 当为元素添加内容、 内边距、 边框任何一项， 就会取消叠加。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.test{
margin:1px;
}
.test1{
border:10px solid;
margin:20px;
}
.test2{
background-color: red;
padding: 20px;
margin:10px;
}
.test3{
margin:20px;
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test1"></div>
<div class="test2"></div>
<div class="test3">这里面有内容</div>
</body>
</html>
Paste_Image.png
通过调试，当.test的margin=1px的时候，它紧挨着.test1。当.test的margin值逐渐增大时，到达margin=20px时，此时.test和.test1的margin值相等，当margin=21px时，这时两个叠加外边距的高度是margin=21px，所以.test1向下移1px。还有元素中margin变化时，元素的位置会发生改变。
当.test1=30px时，如图：
Paste_Image.png
Paste_Image.png
②相邻元素叠加。 相邻的两个元素， 如果它们的上下边距相遇，即会产生叠加。
Paste_Image.png
③包含（父子）元素叠加。包含元素的外边距隔着 父元素的内边距和边框， 当这两项都不存在的时候， 父子元素垂直外边距相邻， 产生叠加。 添加任何一项即会取消叠加。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.test1{
border: 1px solid blue;
width: 100px;
height: 100px;
padding-top: 20px;
}
.test2{
border: 1px solid red;
width: 30px;
height: 30px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="test1">
<div class="test2"></div>
</div>
</body>
</html>
Paste_Image.png
二、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中
text-align:center;用于块级元素，能够使块级元素内部的行内元素水平居中。对块级元素里面的块级元素不起作用。而这里的居中是针对自己的父容器居中的。
设置 margin:0px auto;能够是块级元素居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.container{
border: 1px solid blue;
width:200px;
height: 200px;
text-align: center;
margin: 0px auto;
}
.content{
border:1px solid red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">hello</div>
</div>
</body>
</html>
Paste_Image.png
三、如果遇到一个属性想知道兼容性，在哪查看
四、IE 盒模型和W3C盒模型有什么区别?
ie盒模型设置的宽高包括内容的宽高，padding，边框。w3c盒模型设置的宽高就是内容的宽高。
ie678怪异模式（不添加 doctype）使用 ie 盒模型。chrome， ie9+, ie678(添加 doctype) 使用标准盒模型。
Paste_Image.png
五、以下代码的作用？兼容性？
*{
box-sizing:border-box;
}
① *是通配符，匹配页面中所有元素。设置box-sizing:border-box;作用是为元素指定的任何内边距和边框都将在以设定的宽高内进行绘制。它能够方便计算
② box-sizing: border-box;计算方法width/height=content+padding+border。表示指定的宽度和高度包括边框、内边距和内容区域。这就是上面提到的IE盒模型。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
.border-box{
box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid red;
}
</style>
</head>
<body>
<div class="border-box"></div>
</body>
</html>
Paste_Image.png
Paste_Image.png
可以在can i use看它的兼容性,可以看到ie8以上都支持该属性
Paste_Image.png
六、代码
写一个 btn 的class， 任何 a，span，div，button添加此class后后变成如下按钮的样式（鼠标hover背景色#c14d21，鼠标按下背景色#e25f31）
<a class="btn" href="#">确定</a>
<span class="btn" >取消</span>
<div class="btn">提交</div>
<button class="btn"> 发送</button>
Paste_Image.png
next:9-2.CSS常见技巧
pre:8.CSS选择器
网友评论