HTML中CSS盒子模型注意事项及其解决方法

最新推荐文章于 2021-07-29 23:09:41 发布

Lee-mumu

最新推荐文章于 2021-07-29 23:09:41 发布

阅读量797

点赞数

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

本文链接：https://blog.csdn.net/qq_42071311/article/details/104355377

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、组成：

content -> padding -> border -> margin
content：内容区域，由width和height组成
padding：内边距
margin：外边距
注：背景颜色填充到margin以内的区域包括border。
padding不能为负，margin可以为负。

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{width: 400px;height: 400px;border: 1px black solid;margin: 40px auto;}
        #box2{width: 150px;height: 150px;background: red; padding:20px; margin: 20px}
        #box3{width: 150px;height: 150px;background: blue;}
    </style>
</head>
<body>
    <!-- 1、margin,padding与BFC规范 -->
    <div id="box1">
        <div id="box2"></div>
        <div id="box3"></div>
    </div>
</body>
</html>

如图：box2和box3一样大，box2添加了padding和margin，背景填充到padding。
padding背景被填充示意图

2、box-sizing：盒尺寸

默认值：content-box：指width，height只为content的宽高。
content-border：width，height -> content+padding+border。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1{width: 300px;height: 300px;background: blue;border: 1px black solid;}
        #box2{width: 100px;height: 100px;background: red; float: left;padding: 20px;}
    </style>
</head>
<body>
    <!-- 1、margin,padding与BFC规范 -->
    <div id="box1">
        <div id="box2"></div>
        <div id="box2"></div>
        <div id="box2"></div>
        <div id="box2"></div>
        <div id="box2"></div>
        <div id="box2"></div>
    </div>
</body>

如图：给子元素添加padding值，当未添加box-sizing属性时，默认为content-box，盒子就会变大。此时若规定box-sizing=border-box，盒子大小不变，content区域将自适应变小。

使用场景：
1、不用再去计算一些值。
2、解决了一些100%问题。

3、盒子模型的一些问题：

1、margin叠加：

上下两个块都存在margin时，会取上下两个中较大的一个margin值作为叠加的值，左右不会存在问题。

<style>
        #box1{width: 400px;height: 400px;border: 1px black solid;margin: 40px auto;}
        #box2{width: 150px;height: 150px;background: red; padding:20px; margin: 20px}
        #box3{width: 150px;height: 150px;background: blue;margin: 30px;}
    </style>

如图：box2和box3之间margin值应该是50px，但因为上下margin值叠加，取两个的最大值为叠加值，所以为box3的30px。
margin叠加问题
解决办法：
1、只给一个添加margin值。
2、BFC规范。

2、margin传递问题

出现在嵌套结构中，只针对margin-top的问题。

<style>
        #box1{width: 400px;height: 400px;background: blue;}
        #box2{width: 150px;height: 150px;background: red; margin-top: 120px;}
    </style>

如图：并没有给外层父容器box1添加margin-top值，但box1也向下移动了。
margin传递问题
解决办法：
1、给父容器添加边框。
2、将margin换成padding。
3、BFC规范。

4、扩展

1、margin左右自适应是可以的，但上下自适应不行。代码 margin：0 auto。
2、width，height不设置的话，对盒子模型的影响：自适应父容器，会自动计算容器大小，节省代码。

Lee-mumu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML中CSS盒子模型注意事项及其解决方法

1、组成：content -> padding -> border -> margincontent：内容区域，由width和height组成padding：内边距margin：外边距注：背景颜色填充到margin以内的区域包括border。padding不能为负，margin可以为负。 <!DOCTYPE html><html lang="en...
复制链接

扫一扫