CSS3盒子模型

我年薪百万

已于 2024-02-20 20:30:38 修改

阅读量457

点赞数

文章标签： css html 前端

于 2023-01-16 14:20:39 首次发布

本文链接：https://blog.csdn.net/qq_60893085/article/details/128703718

版权

# box-sizing属性：

box-sizing:content-box(默认)。高度和宽度只应用于元素的内容

box-sizing:border-box高度宽度应用于元素的所有部分：内容、内边距和边框

HTML可以将元素分类方式分为行内元素、块级元素和行内块元素

块级元素和行内块元素的分类

从HTML的角度来讲，标签分为：

文本级标签：p、span、a、b、i、u、em
容器级标签：div、h系列、li、dt、dd

行内元素：除了p之外，所有的文本级标签，都是行内元素，p是个文本级，但是是个块级元素

块级元素：所有的容器级标签都是块级元素，还有p标签

使用display属性能够将三者任意转换

display:inline//转化为行内元素
display：block//转化为块级元素
display：inline-block//转化为行内块元素

行内元素

a,span,i.em,strong,b,lable
行内元素最常使用的就是span，其他的只在特定功能下使用
行内元素特征：

设置宽高无效
对margin仅设置左右方向有效，上下无效，padding设置上下左右都有效
不会自动进行换行

块级元素

h1~h6,div,ul,li,ol,dl,dt,dd,form
块级元素代表性的就是div，其他p,nav,header,footer等等都可以用div来实现，不过为了方便解读代码，一般会使用特定的语义化标签，使代码可读性强
块级元素特征

能够识别宽高
margin和padding的上下左右均对其有效
可以自动和换行
多个块级标签写在一起，more排序方式为从上至下

行内块元素

行内块元素综合了海南欸元素和块状元素的特性，因此行内块元素在日常使用中，由于其特性，使用的次数也比较多

行内块元素特性：

不自动换行
还能够识别宽高
默认排序方式为从左到右

margin和padding的区别：

1. margin是外边距即盒子与盒子之间的距离，padding是内边距，是盒子的边与盒子内部元素之间的距离。

2. margin是用来隔开元素与元素之间的距离，padding是用来隔开元素与内容的间隔。

盒子宽度和高度的默认计算范围

盒子的宽度=width+左右border的距离+左右padding的距离+左右margin的距离

盒子的高度=height+上下border的距离+上下padding的距离+上下margin的距离

盒子的宽度和高度默认之外由box-sizing属性控制

box-sizing的属性值：

1. content-box：默认值，由内部元素的宽高+边框+内边距+外边距组成

2. border-box::padding和border的数值不会再影响盒子的宽高，相当于把padding和border的值都算在content值里面。盒子模型会根据padding和border值来调整content值，就不需要来手动调整

标准盒子模型：box-sizing:content-box，一般浏览器都默认为标准盒子模型

怪异盒子模型：box-sizing：border-box,一般根据实际项目需要自行设置，也成为IE盒子模型

3. inherit:规定应从父元素继承box-sizing的属性值

margin表示盒子外边距，完全透明的，开发者只可以设置它的边距。可以用简写属性同时设置四条边的宽度。

margin：10px=上下左右外边距都是10px

margin：10px,20px=上下边距10px，左右边距20px

margin：10px,20px,30px=上边距10px，左右边距20px,下边距30px

maargin:10px,20px,30px,40px=上右下左

padding表示盒子内边距（填充），不是只能完全透明的，可以设置背景颜色和图片，简写属性和margin一样

border：表示盒子边界，可以设置为可见的，样式多样的。当border属性的色值不明确指定时，如border：1px,solid，边框颜色与当前字体颜色相同。

border-width:边界宽度

thin 细的边框

medium 中等的边框

thick 粗的边框

inhert 从父亲那里继承

像素值

border-style：边界样式

none:定义无边框

hidden：与none相同，不过应用于表时外，对于表，hidden用于解决边框冲突。

dotted：定义点状边框（比较小的点），在大多数浏览器中呈现为实线。

dashed：定义为虚线（与dotted相比间隙比较大），在大多数浏览器中呈现为实线

solid：定义实线

double：定义双线。双线的宽度等于border-width的值

groove：定义3D凹槽边框，其效果取决于border-color的值

ridge：定义3D垄状边框，其效果取决于border-color的值

inset：定义3Dinsert边框，其效果取决于border-color的值

outside：定义3Doutside边框，其效果取决于border-color的值

inhert：规定从父元素继承边框样式

border-color：边界颜色

border-radius:边界半径

- `border-top-left-radius`：左上角

- `border-top-right-radius`：右上角

- `border-bottom-left-radius`：左下角

- `border-bottom-left-radius`：右下角
边界半径可以使用 px、em 等长度单位，也可以使用百分数

`border-radius`值的个数以及每个值对应控制的位置：

一个值：设置四个角有相同的边界半径；
两个值：第一个值设置左上角和右下角，第二个值设置右上角和左下角；
三个值：第一个值设置左上角，第二个值设置右上角和左下角，第三个值设置右下角；
四个值：第一个值设置左上角，第二个值设置右上角，第三个值设置右下角，第四个之设置左下角

border-image：图形边界

图形边界是用图形来作为盒子的边界border。border-image是css3新增的内容，实现起来比较复杂，而且只有一些版本比较新的主流浏览器支持。

在这图形边界之前，需要先设置为一个边界，让图形有显示的空间，同时也可以让不支持图形边界的浏览器显示这个预先设定好的非图形边界。然后还需要将背景颜色和背景图片限制在填充和内容之内（默认情况下，背景颜色和背景图片用在border，padding，和content，边界的样式浮在背景之上，这需要用到background-clip属性）

background-clip属性的值：

border-box：背景延伸到边框外沿（但是在边框之下）
padding-box：边框下面没有背景，即背景延伸到内边距外延
content-box:背景裁剪到内容区（content）外沿
text：背景被裁剪为文字的前景色（只有谷歌浏览器支持）

在图形边界中用到以下属性:

border-image:设置图形边界，简写属性

该属性是一个简写属性，他可以设置上面提到的五个属性，其基本语法如下：

<'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'>

关于“||”、“?”等符号的意义可以查看CSS属性值定义语法。

background:blue;
background-clip: padding-box;
border: 20px dotted green;
border-image:url([https://mdn.mozillademos.org/files/13060/border-image.png](https://mdn.mozillademos.org/files/13060/border-image.png)) 40 / 10px / 20px round;
/*其中border-image属性可以用以下一组属性代替*/
border-image-source: url([https://mdn.mozillademos.org/files/13060/border-image.png](https://mdn.mozillademos.org/files/13060/border-image.png));
border-image-slice: 40;
border-image-width: 10px;
border-image-outset: 20px;
border-image-repeat: round;

border-image-source：图片的来源（路径），可以接收一个URL函数或一个渐变作为值。

图形的来源可以是一个图片或者是渐变色。设置图片用URL（path）函数，设置渐变色颜色用linear-gradient(to top|bottom|left|right,beginColor1,endColor2)函数。还有一个默认none，当使用默认值的时候，或者如果图像无法显示，则使用边框样式border-style。有了图形还不行，还需要对图形进行切割，才能够应用到边界上。

border-image-slice：图形的切片大小

该属性将图片切割成9个区域，包括四个角，四条边以及中心区域。四条切片线，从它们各自的侧面设置给定距离，控制区域的大小。

四条切片线将图片切成了9份。其中1、2、3、4为四个角区域，将会对应应用到盒子边界的四个角；5、6、7、8为四个边界区域，将会对应应用到盒子边界的四条边；区域9为中心区域，默认情况下会被丢弃，但如果设置了fill关键字（可以被设置在属性的任何一个位置(前面、后面或者两个值之间)），则会将其作为背景图形。

`border-image-slice`属性的值可以是数字或百分数，还有关键字`fill`。值的个数可以是1-4个，其规则与`margin、padding等属性一样`。

border-image-width：图形边界的宽度

设置图形边界的宽度。当`border-image-width`的值大于`border-width`时，图形不会向margin方向扩展，而是`会向padding和content方向扩展，覆盖。
border-image-width`属性的值可以是长度或百分数，以及auto。值的个数为1-4个，其规则与margin、padding等属性的规则一致。

border-image-repeat：定义图片如何填充边框

该属性设置图片在边框的填充方式。值的个数可以是一个或两个，一个值时设置所有的边框，两个值时分别设置水平和垂直边框，它具有下面的值：

stretch：拉伸图片以填充边框
repeat：平铺图片以填充边框
round：平铺图像。当不能整数次平铺时，根据情况放大或缩小图像
space：平铺图像。当不能整数次平铺时，会用空白间隙填充在图像周围（不会放大或或者缩小图像）
inherit:继承父级元素的计算值

border-image-outset：定义边界内部和内边距之间的额外空间的大小。

盒子阴影

在盒子的组成成分之外，CSS3给盒子添加了阴影。盒子的阴影由`box-shadow`属性控制，阴影的轮廓与盒子边界border的轮廓一样。该属性的正规语法如下：

none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#

inset:默认阴影在边框外。使用inset后，阴影在边框内，即使是透明边框，背景之上内容之下。
offset-x，offset-y：这是头两个长度值，用来设置阴影偏移量，相对于border外边线开始计算。offset-x设置水平偏移量，如果是负值则阴影位于元素左边。offset-y设置垂直偏移量，如果是负值则阴影位于元素上面。如果两者都是0，那么阴影位于元素后面。这时如果设置了 blur-radius或spread-radius则有模糊效果
blur-radius：这是第三个长度值。值越大，模糊面积越大，阴影就越大越淡。不能为负值。默认为0，此时阴影边缘锐利。
spread-radius：这是第四个长度值。取正值时，阴影扩大；取负值时，阴影收缩。默认为0，此时阴影与元素同样大
color：如果没有设定，则由浏览器决定——通常是color值，不过目前Safari取透明

设置多个阴影时，使用逗号将每个阴影的值隔开。前面的阴影会在后面的阴影之上，如果上层由透明度较低的部分，会与下层的颜色重叠，合成新颜色。