CSS笔记 —— 盒子模型

最新推荐文章于 2023-02-15 19:03:10 发布

一纸春秋

最新推荐文章于 2023-02-15 19:03:10 发布

阅读量367

点赞数 1

分类专栏：前端文章标签： css css3 html 盒子模型边框

本文链接：https://blog.csdn.net/qq_44823756/article/details/121193046

版权

前端专栏收录该内容

9 篇文章 4 订阅

订阅专栏

这篇博客详细介绍了CSS盒子模型，包括外边距、内边距和边框的设置及其对元素尺寸的影响。通过实例展示了如何创建网站登录框，并通过调整外边距实现内容居中。同时，讨论了盒子模型的计算方式，解释了元素实际占据的网页大小是如何计算的。

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

本篇博客是根据B站up@遇见狂神说的视频以及W3school官网文档整理的笔记，里面会有一些视频的截图、代码和官网的概念，以及我个人的注释笔记，代码例子等。
全篇博客包括代码均为自己手打，结果截图均为自己运行的结果。
以下是视频链接
https://www.bilibili.com/video/BV1YJ411a7dy?spm_id_from=333.999.0.0
W3school官网链接
https://www.w3school.com.cn/css/index.asp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型示例</title>

    <style>
        /*这里的 .demo 和 a 写在一起, .demo是类选择器, 后面跟着一个 a 是后代选择器的写法*/
        /*作用是选择.demo后面的所有a标签*/
        .demo a{
            float:left;
            display: block;
            height: 50px;
            width:50px;
            border-radius:500px; /* 设置圆角边框 */
            background:#71e0b3;
            text-align: center; /* 文本水平对齐 */
            color:black; /* a标签的字体颜色 */
            text-decoration:none;  /* 去掉a标签的下划线 */
            margin-right:5px;
            font:bold 20px Arial; /* 设置字体格式 bold是粗细, 20px是大小, Arial是字体 */
        }
    </style>
</head>
<body>
<p class="demo">
    <a href="">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="">5</a>
    <a href="">6</a>
    <a href="">7</a>
    <a href="">8</a>
    <a href="">9</a>
</p>

</body>
</html>

在这里插入图片描述

下面引用W3school的部分内容：
所有 HTML 元素都可以视为方框。在 CSS 中，在谈论设计和布局时，会使用术语“盒模型”或“框模型”。
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。
下图展示了框模型：
在这里插入图片描述

引用结束，具体可以看 W3school —— CSS 框模型这一页里面的内容

边框默认是透明的，可以用border: 1px solid #red; 来让边框显示出来

打开我们写的示例的网页页面，看一下网页代码
在这里插入图片描述

单独选中第一个圆圈，查看它的盒模型
在这里插入图片描述

可以看到margin的值是5，这是因为代码之中设置的是5
margin-right:5px;
这个设置的是元素的外边距，也就是几个圆圈之间的空格大小
在这里插入图片描述

将这个外边距的值改为50px后，圆圈之间的间距明显变大了

核心元素，也就是这个圆圈本身，是最里面的那个方框
在这里插入图片描述
修改过后，这个圆圈元素就会更改尺寸

同样的，也可以更改内边框，元素会向内挤压
在这里插入图片描述
放大一点看，可以看出来有一个区域占据了这个元素的上面一部分，这是修改的内边框，所以占据的地方在元素里面

修改外边框，占据的就是元素之外的，页面上的地方
在这里插入图片描述

模拟网站的登录块

一、先把几个输入框写出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网站登录</title>
</head>
<body>
<div id="box">
<!--    这里要强调一下,以后所有的可以成一个组的元素都写进一个div里面
        比如这里的用户名输入框,密码框,邮箱框可以是一个组里面的,写进一个div里
        然后用户名和input文本输入框可以写进一个div里面
        这里的用户名不要单独写出来,用一个span标签包起来-->
    <h2>会员登陆</h2>
    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

结果为
在这里插入图片描述
二、给整体制作边框
元素本身是有边界的，这个box在页面上占据的面积是有限的，就相当于一个透明的边框
这里border设置边框，就像是把边框设置为不透明

<head>
    <meta charset="UTF-8">
    <title>网站登录</title>

    <style>
        #box{
            /*border设置边框,后面的参数依次是 边框宽度 1px,solid设置一个实体边框, 边框颜色red*/
            width: 300px;
            border-style:solid; /*设置一个实体边框*/
            border-width:1px; /*为边框指定宽度*/
            border-color:red;/*为边框指定颜色*/
            /*这三个边框属性可以写在一起,写成一句话*/
            /*border: 1px solid red;*/
        }
    </style>
</head>

这样写的结果是
在这里插入图片描述
可以发现边框没有紧贴着边界，这是body本身自带一个边框宽度，这里我们可以对所有元素做一个初始化的措施
将所有标签的初始边框宽度都设置为0

<style>
    h1,ul,li,a,body{
        margin:0;
        pdding:0;
        text-decoration: none;
    }

    #box{
        /*border设置边框,后面的参数依次是 边框宽度 1px,solid设置一个实体边框, 边框颜色red*/
        width: 300px;
        border-style:solid; /*设置一个实体边框*/
        border-width:1px; /*为边框指定宽度*/
        border-color:red;/*为边框指定颜色*/
        /*这三个边框属性可以写在一起,写成一句话*/
        /*border: 1px solid red;*/
    }
</style>

这样边框就会紧贴着页面边界
在这里插入图片描述
三、给输入框制作一个边框

<head>
    <meta charset="UTF-8">
    <title>网站登录</title>

    <style>
        #box{
            width: 300px;
            border: 1px solid red;
        }

        form{
            background:#71e0b3;
        }
        
        /*这里是利用伪类选择器和子选择器
            div:nth-of-type(1)选择第一个div标签
            >input选择div标签中的子节点中所有的input标签
        */
        div:nth-of-type(1)>input{
            border:3px solid black;
        }
        /*边框的样式有很多,不止是solid实线,还有dashed虚线框*/
        div:nth-of-type(2)>input{
    	 border:3px dashed #7b46dc;
        }
        div:nth-of-type(3)>input{
            border:3px solid #44b9f6;
        }
    </style>
</head>

在这里插入图片描述
可以再对标题修改一下

h2{
    font-size: 16px;
    background-color: #ffaa00;
    line-height: 30px;
    color:white;
}

在这里插入图片描述
去掉标题h2的默认的外边框

h2{
    font-size: 16px;
    background-color: #ffaa00;
    line-height: 30px;
    color:white;
    
    margin:0px;
    
}

在这里插入图片描述

进一步了解外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子边距的调整</title>

<!--
    margin用来设置外边框,margin后面可以写1个,2个,4个参数
    写1个参数就是外边框的上下左右边距都是这个数
    写2个参数,第一个参数是上下边距,第二个参数是左右边距
    写4个参数,分别是上,下,左,右边距
-->

    <style>
        #box{
            width:300px;
            border:2px solid red;
            /*通过外边距的调整让盒子居中*/
            /*第一个数字是0说明上下边距为0,第二个参数auto是左右边距自动调整*/
            margin:0 auto;
        }
        h2{
            font-size: 16px;
            background-color: #ffaa00;
            line-height: 30px;
            color:white;
            margin:0px;
        }
        form{
            background:#71e0b3;
        }
        input{
            border: 1px solid blue;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登陆</h2>
    <form action="#">
        <div>
            <span>用户名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

在这里插入图片描述
也可以分开写上下左右边距的值

#box{
    width:300px;
    border:2px solid red;
    /*通过外边距的调整让盒子居中*/

    margin-top:3px;
    margin-bottom: 3px;
    margin-left:3px;
    margin-right:3px;
}

这里的居中要求是在一个块元素里面，比如div里面
如果直接在body里面写h2和input标签，不用div包起来，那么是无法居中的。因为body的面积是无限大的，没有边界，也就没法居中。而div是有边界，我们可以用width和height来设定这个值，然后用border来让这个边界以边框的形式表现出来

在这里插入图片描述
也可以用下面这种方式让内容居中，直接在body里面来设置

<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
    <style></style>
</head>
<body>
<!--display: block 将图片转为块级元素，独占一行-->
    <div style="width:500px;display: block;text-align:center">
        <img src="images/1.png" alt="" height="118" width="200">
    </div>

</body>

在这里插入图片描述

内边距

内边距和外边距的用法差不多

div:nth-of-type(1){
    padding: 10px;
}

只写一个参数时，是上下左右，内边框的边距都是这个值
在这里插入图片描述

盒子的计算方式，这个元素到底有多大

拿上面的结果举例子
在这里插入图片描述
真正的元素本身只是最里面的那个蓝色的小方框，是743.600x140的大小
但这个元素实际占据的网页大小是margin + border + padding + 自身宽度

CSS笔记 —— 盒子模型

目录

问题引入

模拟网站的登录块

进一步了解外边距

内边距

盒子的计算方式，这个元素到底有多大