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

broeg

已于 2022-08-02 10:22:24 修改

阅读量259

点赞数

分类专栏： css 文章标签：前端 html

于 2022-06-29 23:45:51 首次发布

本文链接：https://blog.csdn.net/broeg/article/details/125529815

版权

本文详细介绍了CSS中盒子模型在水平和垂直方向上的布局原理。在水平布局中，元素的位置受margin、border、padding和width属性影响，并通过不同情况下的等式调整实现布局。在垂直布局方面，当父元素未设置高度时，会被子元素自动撑开，而overflow属性用于处理子元素溢出的情况，提供了visible、hidden、scroll和auto四种选择。

摘要由CSDN通过智能技术生成

盒子的水平方向布局

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

margin-left

border-left

padding-left

width

padding-right

border-right

margin-right

即元素在其父元素中，水平布局需满足以下等式：

左右外边距（可设 auto）+左右内边距+宽度(可设 auto)=父元素内容区宽度

以上等式必须满足，如果等式不成立，称为过度约束，则等式会自动调整

调整的情况

1.如果值中没有 auto 的情况，则浏览器会自动调整margin-right值使等式满足

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

.dad{

            width: 800px;

            height: 200px;

            background-color: aqua;

        }

            .baby{

                width: 200px;

                height: 100%;