盒子模型--水平方向布局--垂直方向布局
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 元素在页面中隐藏 不显示,但是依然占据页面位置