其他分享
首页 > 其他分享> > day09---2.4

day09---2.4

作者:互联网

新年快乐!

 一、元素的水平方向的布局

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

                        margin-left

                        border-left

                        padding-left

                        width

                        padding-right

                        border-right

                        margin-right

                    一个元素在其父元素中,水平布局必须满足以下等式:

                               以上7个值总和 = 其父元素内容区的宽度(必须满足)

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

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

                               七个值中有三个值可以设置为auto

                                       width

                                       margin-left

                                       margin-right

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

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

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

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

                                经常利用该特点使得一个元素在其父元素中水平居中

                                        width:xxxpx;

                                        margin:0 auto;

二、 元素的水平方向的布局

                子元素在父元素的内容区中排列,如果子元素大小超过父元素,子元素会从父元素溢出

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

                        可选值:

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

                            hidden 隐藏,溢出的内容会被裁减,不会显示

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

                            auto 根据需要生成滚动条

                            overflow-x 处理水平方向

                            overflow-y 处理垂直方向

三、垂直外边距的重叠(折叠) 

                相邻的垂直方向外边军会发生重叠现象

                兄弟元素:

                       兄弟元素间的相邻垂直外边距会取两者之间的较大值(两者都是正值)

                       特殊情况:

                              如果相邻的外边距一正一负,则取两者的和

                              如果相邻外边距都取负值,则取绝对值较大的

                        兄弟元素之间外边距的重叠,对于开发是有利的,所以不需要进行处理       

                 父子元素:

                        父子元素间的相邻外边距,子元素的会传递给父元素(上外边距)

                        父子外边距的折叠会影响到页面布局,必须处理

标签:day09,right,auto,元素,---,等式,外边,margin,2.4
来源: https://blog.csdn.net/qq_45865978/article/details/122785470