其他分享
首页 > 其他分享> > 盒子的水平布局和垂直布局

盒子的水平布局和垂直布局

作者:互联网

一、元素的水平方向布局

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

                  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=                               其父元素内容区的宽度(必须满足)

                  以上等式必须成立,如果相加结果使等式不成立,则称为过度约束,则等式会自动调整

                    调整情况:

                     ① 如果这七个值中没有为auto的情况,则浏览器会自动调整margin-right值以使等式                             满足

                      这七个值中有三个值可以设置成auto

                       width

                       margin-left

                       margin-right

                     ② 如果某个值为auto,则会自动调整为auto的那个值以使等式成立

                     ③ 如果将一个宽度和一个外边距设置为auto,则宽度会调整到最大,设置为auto的                                外边距会自动为0

                     ④ 如果将三个值都设置为auto,则外边距都是0,宽度最大

                     ⑤ 如果将两个外边距设置为auto,宽度固定值,则会将外边距设置为相同的值

                       所以我们经常利用这个特点来使一个元素在其父元素中水平居中

                       示例:

                        width:xxxpx;

                        margin:0 auto;

二、元素的垂直方向布局

        子元素是在父元素的内容区中排列的

              如果子元素的大小超过了父元素,则子元素会从父元素中溢出

                 使用overflow属性来设置父元素如何处理溢出的子元素

                  可选值:

                    visible:默认值 子元素会从父元素中溢出,在父元素外部的位置显示

                    hidden:溢出的内容将会被裁剪不会显示

                    scroll:生成两个滚动条,通过滚动条来查看完整的内容

                    auto:根据需要生成滚动条

                    overflow-x:单独处理水平方向

                    overflow-y:单独处理垂直方向

标签:布局,盒子,auto,元素,垂直,right,等式,margin,left
来源: https://blog.csdn.net/WQuestion/article/details/120547704