<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
/*margin:0 auto;这样就可以居中了*/
width: 800px;
height: 200px;
border:10px red solid;
}
.inner{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
/*
元素的水平方向的布局:
元素在其父元素中水平方向的位置由以下几个属性共同决定
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 = 其父元素内容区的width
-以上等式必须满足,如果相加结果使等式不成立,则称为过度约束,则等式会自动调整
-调整情况:
·如果这七个值中没有为auto的情况,则浏览器会自动调整margin-right值使等式满足
-这七个值中有三个值可以设置为auto
width
margin-left
margin-right
-如果某个值为auto,则会自动调整为auto的那个值以使等式成立。width值默认就是auto
-如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大,设置为auto的外边距会自动为0
-如果将三个值都设置为auto,则外边距都为0,宽度最大
-如果将两侧外边距都设置为auto,宽度固定值,则会将外边距设置为相同的值。我们经常利用这一点,将子元素在父元素中居中。margin:0 auto;这样就可以居中了
-如果子元素的7个值超过了父元素的width。则还会自动调整margin-right。
比如子元素width=1000px,父元素width=800px,则子元素的margin-right=-200px
*/
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
35.水平方向的布局
最新推荐文章于 2022-03-12 11:17:51 发布