CSS3 盒子模型

最新推荐文章于 2024-03-03 21:20:09 发布

苦涩2020

最新推荐文章于 2024-03-03 21:20:09 发布

阅读量256

点赞数 1

分类专栏： CSS3 前端文章标签： css3

本文链接：https://blog.csdn.net/UserPython/article/details/106108351

版权

前端同时被 2 个专栏收录

80 篇文章 1 订阅

订阅专栏

CSS3

20 篇文章 0 订阅

订阅专栏

CSS3 盒子模型

盒子模型
外边距设置
内边距设置
box-sizing 属性
元素尺寸
溢出隐藏
元素居中

盒子模型

所有元素都可以有宽高
所有元素都是一个矩形
所有元素都看成一个盒子
盒子包括：外边距+边框+内边距+元素内容

在这里插入图片描述

外边距设置

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”

行级元素只有左右外边距，没有上下外边距

块级元素和行内块级元素外边距4个方向都有效

外边距要素

外边距的方向：top bottom left right
外边距尺寸：合法的尺寸单位，百分比

外边距语法

margin-方向:外边距尺寸;

使用百分比时，参考的是父级的尺寸
使用正值时，元素领地会扩张，使用负值时，元素领地会收缩

同时设置4个方向外边距

margin:10px 20px 30px 40px;：上右下左（外边距）

margin:10px 20px 30px;：上左右下（外边距）

margin:10px 20px;：上下左右（外边距）

margin:10px;：4个方向（外边距）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距设置</title>
    <style type="text/css">
        .box{
            background: #00ff00; width: 200px; height: 100px;
            /* margin-top: 50px;
            margin-bottom: 50px;
            margin-left: 50px;
            margin-right: 50px; */

            margin: 10px;
        }
    </style>
</head>
<body>
    <div style="background: red; height: 50px;"></div>
    <div class="box"></div>
    <div style="background: blue; height: 50px;"></div>
</body>
</html>

外边距的合并

当两个元素上下排列时，上下外边距会合并，它们将形成一个外边距，合并后的外边距取两者中最大值
当两个元素左右排列时，左右外边距会叠加

内边距设置

所有元素都可以设置内边距

内边距要素

内边距的方向：top bottom left right
内边距尺寸：合法的尺寸单位，百分比

内边距语法

padding-方向:内边距尺寸;

使用百分比时，参考的是父级的尺寸
内边距不能设置负值

同时设置4个方向内边距

padding:10px 20px 30px 40px;：上右下左（内边距）

padding:10px 20px 30px;：上左右下（内边距）

padding:10px 20px;：上下左右（内边距）

padding:10px;：4个方向（内边距）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距设置</title>
    <style type="text/css">
        span{
            background: #00ff00; border: 1px solid black;
            /* padding-left: 30px;
            padding-bottom: 30px;
            padding-right: 30px;
            padding-top: 30px; */

            padding: 30px;
        }
    </style>
</head>
<body>
    <div style="height: 50px;"></div>

    <span>内边距设置</span>
</body>
</html>