组成部分：content+padding+border+margin
实际宽度：width+margin （width包含了padding和border）
盒模型之间相互转换：
box-sizing：content-box； 默认值标准盒模型
box-sizing：border-box； 怪异盒模型
居中元素：
- 元素内容水平居中：text-align：center；
- 块级元素水平居中：margin：0 auto；
- 一行文字垂直居中：行高等于高 life-height：； 取值px 数字 （当前字体大小乘以为行高的值）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
background-color: aqua;
/* line-height: 200px; */
font-size: 20px;
line-height: 10;
}
</style>
</head>
<body>
<div class="box">哈哈哈哈哈哈哈</div>
</body>
</html>
- 多行内容垂直居中：父元素设置padding： ；（padding上下值一样）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
background-color: aqua;
font-size: 20px;
padding: 74px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈</div>
</body>
</html>
5.块级元素在父元素中垂直居中
父元素设置padding：；（写在父元素里面设置padding上下距离一样）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 300px;
height: 300px;
background-color: aqua;
padding: 100px;
box-sizing: border-box;
}
.box1{
width:100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
用margin去实现居中写在子元素里面设置margin上下距离一样）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box{
width: 300px;
height: 300px;
background-color: aqua;
overflow: hidden; /*必须加浮动*/
}
.box1{
width:100px;
height: 100px;
background-color: red;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
