<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 水平布局的例子 */
/* .outer{ */
/* 父元素 */
/* width: 800px;
height: 200px;
border: 10px red solid;
}
.inner{ */
/* width: auto，wdth的值默认是auto; */
/* width: 200px; */
/* width: auto;
height: 200px;
background-color: #bbffaa; */
/* margin-left: 100px; */
/* margin-left: auto;
margin-right: 100px; */
/* } */
/*
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
七个相加=其父元素内容区的宽度（必须满足）=800px
但是由此情况来看：
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
0 + 0 + 0 + 200 + 0 + 0 + 600 = 800
-以上等式必须满足，如果相加结果使得等式不成立，则称为过度约束，则等式会自动调整（加margin-rigth）
-调整情况：
-如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足
-这七个值有三个值和设置为auto（inner为内容区） 注意：有正值和负值
width
margin-left
margin-rigth
-如果某个值为auto，则会自动调整为auto的哪个值以使我们的等式成立
0 + 0 + 0 + auto + 0 + 0 + 0 = 800 auto=800
0 + 0 + 0 + auto + 0 + 0 + 200 = 800 auto=600
-注意：如果其中两个设置auto，除了设置固定的，剩下的平均分（固定的值优先）
如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大，设置为auto的外边距会自动为0
如果将三个值都设置为auto,则外边距都是0，宽度最大 width>left=rigth
如果将两个外边距设置为auto,宽度固定值，则会将外边距设置为相同的值
所以我们经常利用这个特点来使
一个元素在其父元素中水平居中示例:
width: xxpx;
margin:0 auto;
/* 垂直方向的例子 */
.outer1{
background-color: #bbffaa;
/*
默认情况下父元素(outer1)的高度被内容(inner1)撑开
*/
}
.inner1{
width: 100px;
background-color: yellow;
height: 200px;
margin-bottom: 100px;
/* 内边距为100px */
}
/* 2.垂直方向的布局
-子元素是在父元素的内容区中排列的
如果子元素的大小超过了父元素,则子元素会从父元素中溢出
所以我们就可以overflow(溢出)属性来设置父元素如何处理溢出的子元素
-overflow的可选择值:
visible:默认值 子元素会从父元素中溢出,在父元素外部的位置显示
hidden 溢出内容将会被剪裁 不会显示
scroll 生成两个滚动条,通过滚动条来查看完整的内容
auto 根据需要生成滚动条
overflow-x; 单独设置横轴
overflow-y; 单独设置纵轴
*/
</style>
</head>
<body>
<!--
水平例子 独立的模块
<div class="outer">
<div class="inner">
</div>
</div> -->
<!-- 垂直方向 独立的模块 -->
<div class="outer1">
<div class="inner1"></div>
<div class="inner1"></div>
</div></body>
</html>
扫一扫
6523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
