盒子的水平布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子的水平布局</title>
<style>
.box1{
width: 500px;
height: 200px;
border: 10px red solid;
background-color: royalblue;
}
.inner{
width: 200px;
height: 200px;
background-color: seagreen;
margin-left: 100px;
}
</style>
</head>
<body>
<!--
元素水平方向的布局
元素在其父元素中,水平方向的位置由以下几个属性共同决定
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
=其父元素内容区的宽度
如果不相等,则成为过度约束,等式会自动调整
如果这七个值没有auto的情况,浏览器自动调整margin-right使等式自动满足
可以设置为auto的值有 width(没有设这个值的话,则默认是auto) margin-left margin-right
如果某个值为auto,则自动调整为auto的那个值来使等式成立
如果将一个宽度和一个外边距都设为auto,则宽度会调整到最大,外边距调整为0
如果将三个值都设为auto,则宽度最大,其他两个为0
如果将两个外边距都设置为auto,则会将两个外边距设置为相同的值,可以利用这个特点来使一个元素在其父元素中水平居中
-->
<div class="box1">
<div class="inner"></div>
</div>
</body>
</html>