HTML盒子模型的布局

前言：

随着计算机的不断发展，软件技术学习这门技术也越来越重要，很多人都开启了软件编程的学习，下面我来简单介绍一下我们前端非常重要的一个知识点：盒子模型，写的不好，欢迎指正。

第一就是：**垂直和水平方布局**
水平布局从左到右由 margin-left   border-left  paddin-left  width  padding-right  border-right  margin-right  决定；

垂直布局和水平布局相同，只是方向有左右变为上下

这7个值相加会等于其父元素的宽度。若只设置其中个别值，其他值没设置，使等式不成立，则浏览器会自动调整使等式成立，这个叫**过度约束**

浏览器调整

          1:如果七个值没有auto  ，那么浏览器会自动调整margin-right使我们等式满足；

          2:这七个值，width，margin-left，margin-right 可以设置auto；

               如果有设置auto，浏览器会自动调整auto的值

          3:如果同时设置width  margin  为auto，只调整width宽度

          4:如果设置宽度固定，设置margin为auto

              则两边的外边距会设置为相同的值，让元素在父元素中居中

元素溢出
         overflow  处理溢出内容

            可选值：

              visible 溢出的内容会正常显示

              hidden  溢出的内容会被裁减，不会显示

              scroll  出现双侧滚动条

              auto   根据溢出内容，出现滚动条

外边距重叠
 在网页中相邻元素的垂直方向的外边距，会发生重叠

          -兄弟之间的重叠，会取最大值，不会取和，谁大听谁的、

例：下方两个盒子蓝色盒子的下面外边距为50px，红色盒子的上外边距为100px，但是两个盒子并没有距离150px，而是100p。

代码如下：

 特殊情况：

1.如果一正一负，就是取二者之和；

2.如果两个都是负的，就是取绝对值最大的。

父子之间的外边距的重叠：如果父子的外边距相邻了，子元素的外边距会传递给父元素

例：

 代码如下：

总结：新手小白，写的不好，欢迎指正！

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！