介绍
本文是在学习CSS时做的学习笔记,所有笔记内容为 CSS学习笔记
盒子模型水平布局
<html lang="en">
<head>
<meta charset="UTF-8">
<title>meta</title>
</head>
<style>
.outer{
width:800px;
height:200px;
border:10px orange solid
}
.inner{
width:200px;
height:200px;
background-color:#bfa;
1、元素水平方向的布局
元素在其父元素水平方向的位置,由以下几个属性共同决定
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中,水平布局必须满足以下等式
margin-left+border-left+padding-left+width+padding-right
+border-right+margin-right = 其父元素内容区宽度(必须满足)
- 以上等式必须满足,如果相加结果等式不成立,则称为过度约束,则
等式自动调整
- 如果 7 个值中没有auto的情况,则浏览器自动调整 margin-right 使等式成立
- 这 7 个值中有三个值可以设置为auto
width(如果不写,默认为auto)
margin-left
margin-right
如果某个值为auto,则设置为auto的值自动调整,以使等式成立
- 如果将 width 和 margin-left、margin-right 设置为auto,则宽度调整为最大,外边距为0
- 如果将 margin-left、margin-right 设置为auto,宽度设置为固定值,则外边距自动调整 为相同宽度
利用这个特性设置子元素在父元素水平居中:
width:200px;
margin:0 auto
}
</style>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>