【CSS】CSS盒子模型

【CSS】CSS盒子模型
前言：

CSS中元素（标签）的显示模式有三种：块元素、行元素、行内块元素。

一行只能显示一个块元素。

一行可以显示多个行元素。

而行内块元素具有行和块的特征，即一行中既可以存在多个行内块元素，有可以拥有行元素拥有的属性（如height（高）、width（宽））

盒子模型适用于块元素和行内块元素。

转换显示模式：

转成块元素：
```
display:block;
```
转成行元素:
```
display:inline;
```
转成行内块元素:
```
display:inline-block
```
盒子模型:

html可以看成把内容打包成盒子,而CSS将这些盒子按照计划排列好,即一个网页的所有内容都可以看成是盒子,所以就有了"盒子模型".

盒子模型大致分为四个属性:边框、内容、内边距、外边距。

以我写这篇博客的网页为例~~（因为懒得自己画图了）~~：

其中“816×914”就是盒子模型中的内容（content）。

外一层的虚线到内容的距离就是内边距（padding），即内容和盒子边框的距离。

内边距外层到再外一层的实现就是边框（border），就是盒子框的粗细（大小）。

边框到最外面的虚线就是外边距（margin），意思是本盒子距离其他盒子的距离。

修改盒子的参数：

改变盒子的边框大小:
```
border-width:
```
修改边框的样式:
```
border-style:
```
为'solid'时表示边框是实线

'dashed'为虚线

'dotted'为点线

修改边框颜色:
```
border-color:
```
以上的简写:
```
border:(border-width) (border-style) (border-color)
```
直接写参数即可,例如:border:2px solid black

记得中间用空格隔开而不是逗号.

修改内边距:
```
padding-left(right|top|bottom):
```
可任意修改上下左右的内边距,分别用不同的方位.

可以用复合写法:
```
padding:
```
当后面跟的参数为一个时,表示上下左右的内边距都是该参数.

参数为两个时,上下的内边距为第一个参数,左右的内边距为第二个参数.

参数为三个时,上内边距为第一个参数,左右的内边距为第二个参数,下边距为第三参数.

参数为四个时,上内边距为第一个参数,右内边距为第二个参数,下内边距为第三个参数,左内边距为第四个参数(顺时针顺序)

修改外边距:
```
margin-left(right|top|bottom):
```
复合写法:
```
margin:
```
规则和内边距的一样.

若要盒子居中对齐,则将左右的外边距改成"auto".

设置圆角边框:
```
border-radius:
```
该参数是将盒子模型的四个角变成半径为以上参数的圆,若要得到一个圆形的盒子,则需保持宽高一致,并且设置border-radius=宽高的一半.

设置盒子阴影:
```
box-shadow:水平阴影的位置(x轴) 垂直阴影的位置(y轴) 模糊距离 阴影尺寸 阴影颜色
```
若是末尾加上"insert"则将外阴影改成内阴影.

示例:

感觉写的不够清楚,光看上面不一定能懂参数怎么写,所以写了一个简单的示例参考着看看.

源代码:
```
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        span{
            display: block;/*将span(行元素)改成块元素*/
            width: 300px;
            height: 300px;
            border:5px solid black;/*设置边框属性*/
            margin:50px auto;
            padding: 100px 20px 100px;
            background-color: skyblue;
            box-sizing: border-box;
            box-shadow:10px 10px 10px 10px rgba(0,0,0,0.2);/*设置盒子阴影,具体参数可以自己试着去调一调*/
            border-radius: 50%;/*表示圆半径为宽高的一半*/
        }
    style>
head>
<body>
<span>这是一个行元素,但是被我改成块元素啦span>
body>
html>
```
小结:

如果修改了内边距或是边框,则会改变盒子原本的大小,例如我原本将盒子设成300px高和300px宽的,边框设为5px,则盒子实际大小为310px(300px+2*5px).如果内容没给宽属性则不影响盒子的宽,没给高属性则不影响盒子的高,但若是给了内容宽高属性,那么盒子实际大小还要加上内边距的大小.

如果不想要改变盒子的大小,可以像我上面的例子一样加入
```
box-sizing:border-box;
```
这样无论怎样设置边框大小和内边距都不会影响到盒子大小了.
相关阅读:
bpftrace：简便输出调试信息
 怎么做好测试用例评审
 CloudKit教程之由 CloudKit 公共数据库提供支持的示例 SwiftUI 定位应用程序(教程含源码)
Redis整理
 基于白鲸优化的BP神经网络（分类应用） - 附代码
 红队专题-从零开始VC++C/S远程控制软件RAT-MFC-屏幕监控
 array.form()详解
 java3、异常
 MYSQL窗口函数（Rows & Range）——滑动窗口函数用法
 RabbitMQ 基础操作
原文地址：https://blog.csdn.net/m0_63235356/article/details/126274425

前言：

转换显示模式：

盒子模型:

修改盒子的参数：

改变盒子的边框大小:

修改边框的样式:

修改边框颜色:

修改内边距:

可以用复合写法:

修改外边距:

复合写法:

设置圆角边框:

设置盒子阴影:

示例:

小结: