- 盒子模型
-
- 前言
图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容
-
- 盒子的区域
一个盒子中主要的属性就5个:width、height、padding、border、margin。如下:
- width和height:内容的宽度、高度(不是盒子的宽度、高度)。
- padding:内边距。
- border:边框。
- margin:外边距。
上面这个盒子,width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
注意:宽度和真实占有宽度,不是一个概念!
-
- 标准盒子模型
-
- Ie 盒子模型
- Div 居中的几种 方式
-
- 利用margin计算数值
利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30
div1的高减去div2的高就是div2margin-top的数值:(100-40)/2=30
页面
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div22{
margin-left: 30px;margin-top: 30px;
}
</style>
<div class="div1">
<div class="div2 div22">
</div>
</div>
</body></html>
-
- 利用绝对位置 百分比属性分配 然后往回拉
这里 div1 使用相对位置 不管
查看 div2 使用绝对位置 是 他的父元素的 50% 50% 的位置 开始
也就是 从 div1 的 中心开始 布置 div2 这个时候是这样的
然后 吧 div2 开始往回拉 ,拉取的 距离是 div2 的 宽高的一半
margin-top: -20px;margin-left: -20px;
另外 子元素div是绝对定位,所以需要父元素设置为position: relative;
页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div11{
position: relative;
}
.div22{
position: absolute;top:50%;left: 50%;margin-top: -20px;margin-left: -20px;
}
</style>
<div class="div1 div11">
<div class="div2 div22">
</div>
</div>
</body>
</html>
-
- 利用绝对位置 margin 自动 其余四个方向为 0
这种方式是一种单独的方式
另外 子元素div是绝对定位,所以需要父元素设置为position: relative;
单独使用 margin:auto; 不可以
需要联合使用 position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
外边距自动,四个方向都是 填满状态
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div11{
position: relative;
}
.div22{
position: absolute;margin:auto; top: 0;left: 0;right: 0;bottom: 0;
}
</style>
<div class="div1 div11">
<div class="div2 div22">
</div>
</div>
</body>
</html>
-
- 利用 css3 的新增属性 table-cell
方法 设置 div2 的 居中 ,需要 本书 设置自动 margin:auto
他的父节点 display: table-cell;vertical-align: middle; 设置这个属性
使父元素内的所有行内元素水平垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<style type="text/css">
.div1{ width: 100px; height: 100px; border: 1px solid #000000;}
.div2{ width:40px ; height: 40px; background-color: green;}
.div11{
display: table-cell;vertical-align: middle;
}
.div22{
margin: auto;
}
</style>
<div class="div1 div11">
<div class="div2 div22">
</div>
</div>
</body>
</html>