盒子模型--水平方向布局--垂直方向布局

Posted 2021-12-05 by xiongmao; tagged with 盒子模型 , 水平方向布局 , 垂直方向布局

水平方向布局
元素的水平方向的布局
　元素在其父元素中水平方向的位置由以下几个属性共同决定

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为200px
0 + 0 + 0 + 200 + 0 + 0 + 0 = 800
0 + 0 + 0 + 200 + 0 + 0 + 600=800

      margin-left和width都为200，没有auto
200 + 0 + 0 +200 + 0 + 0 + 0 =800
200 + 0 + 0 +200 + 0 + 0 + 400 =800 

以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整
　　-调整的情况
　　　　-如果这七个值中没有 auto 的情况，则浏览器会自动调整margin-right值以使等式
　　　　　　　-这七个值中有三个值和设置为auto
　　　　　　　　　　width
　　　　　　　　　　margin-left
　　　　　　　　　　margin-right
　　　- 如果某个值为auto，则为自动调整auto的那个值以使等式成立

0 + 0 + 0 + auto + 0 + 0 + 0 =800  auto=800    width : auto
0 + 0 + 0 + auto + 0 + 0 + 200 =800 auto=600   width : auto
200 + 0 + 0 + auto + 0 + 0 + 200 =800 auto=400  width :auto
auto + 0 + 0 + 200 + 0 + 0 + auto =800  auto=300  margin-left 和 margin-right为auto

　　- 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置auto的外边距会自动为0
　 - 如果将三个值都设置为auto，则外边距都是0，宽度最大
　　- 如果将两个外边距设置auto，宽度固定值，则会将外边距设置为相同的值
　　所以我们经常利用这个特点来使一个元素在其父元素中水平居中
　　　示例：
　　　　width：xxxpx；
　　　　margin:0 auto;

垂直方向布局
使用overflow属性来设置子元素溢出问题
　可选值：

visible：默认值，正常溢出
scroll：生成两个滚动条，通过滚动条来查看完整的你内容
auto：根据需要生成滚动条

display 用来设置元素显示类型
　　可选值

inline 将元素设置为行内元素
block 将元素设置为块元素
inline-block 将元素设置为行内块元素
行内块，既可以设置宽度和高度又不会独占一行
table 将元素设置为一个表格
none 元素不在页面中显示

visibility 用来设置元的显示状态
　　可选值：

visible 默认值，元素在页面中正常显示
hidden 元素在页面中隐藏 不显示,但是依然占据页面位置