HTML盒子模型的布局

最新推荐文章于 2023-10-14 16:07:08 发布

书棋06

最新推荐文章于 2023-10-14 16:07:08 发布

阅读量5k

点赞数 3

文章标签： html servlet 前端

本文链接：https://blog.csdn.net/m0_72975897/article/details/126178157

版权

前言：

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

第一就是：**垂直和水平方布局**
水平布局从左到右由 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。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
     .box{
         width: 200px;
         height: 200px;
         background-color: red;
     }
     .box1{
         width: 200px;
         height: 200px;
         background-color: blue;
         margin-top: 200px;
     }
 </style>
</head>
<body>
    <div class="box"></div>
    <div class="box1"></div>
</body>
</html>

特殊情况：

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

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

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

例：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 <style>
     .box{
         width: 200px;
         height: 200px;
         background-color: red;
     }
     .box1{
         width: 100px;
         height: 100px;
         background-color: blue;
         margin-top: 100px;
     }
 </style>
</head>
<body>
    <div class="box">
    <div class="box1"></div>
</div>
</body>

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