盒模型知识点
padding
1.每个div我们都可以看做是一个盒子，盒子的话是有内容、边框、填充物。
2.两种盒模型
- W3C的标准Box Model
外盒尺寸计算(元素所占空间)
Element空间高度 = content height + padding + border + margin
Element 空间宽度 = content width + padding + border + margin
内盒尺寸计算
Element Height = content height + padding + border （Height为内容高度）
Element Width = content width + padding + border （Width为内容宽度）
- ie传统下的Box Model
外盒尺寸计算(元素所占空间)
Element空间高度 = content Height + margin (Height包含了元素内容宽度，边框宽度，内距宽度)
Element空间宽度 = content Width + margin (Width包含了元素内容宽度、边框宽度、内距宽度)
内盒尺寸计算
Element Height = content Height(Height包含了元素内容宽度，边框宽度，内距宽度)
Element Width = content Width(Width包含了元素内容宽度、边框宽度、内距宽度)
- 两者的区别是:
w3c标准模式下,给元素设置宽和高不包含padding和border,这意味着当给元素设置padding和boder时,盒子会变大.
而传统盒模型下,给元素设置宽和高包含了padding和border,当我们给元素设置padding和boder时,盒子不会变大.
box-sizing设置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border: 10px solid red;
padding: 30px;
margin: 50px;
background: gray;
}
.box1 {
/*默认是content-box*/
box-sizing: content-box;
}
.box2 {
/*box-sizing的值是border-box的时候，它是符合传统盒模型的计算方式*/
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
盒模型简介
1.box-sizing 有两个值
- content-box 标准盒模型
- border-box 传统盒模型（常用）
/*box-sizing里的默认值是content-box
意思是盒子最里面的内容是上面所设置的100px,
实际上的大小是内盒加其他边框，边距，实际>设置
*/
.box1{
box-sizing: content-box;
}
/*
box-sizing的border-box属性，实际=设置，会对应的根据设置的宽高，更改内盒的大小
使其于边距和边框相加等于所设宽高
*/
.box2{
box-sizing: border-box;
}
margin
1.元素居中
margin:0 auto;
2.垂直居中
margin:auto 0;
margin-top 塌陷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box {
/*border: 1px solid;*/
margin-top: 10px;
height: 300px;
background: gray;
}
.content {
margin-top: 100px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
</div>
</div>
<h3>
父子元素都设置了margin-top,结果会是怎么样<br />
</h3>
</body>
</html>
解决方法：
- 给父元素添加border
- 给父元素添加padding
- 把父元素变成bfc
网友评论