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

Posted 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 元素在页面中隐藏 不显示,但是依然占据页面位置