CSS的布局与定位----盒子模型_css盒子模型的布局与定位方式-CSDN博客

为了更够直观的观察到盒子模型的属性值，我们画出了一下图来描述这些属性苏哟表达的意思。更加直观的知道margin是外边距，而padding是描述内边距的也是，content是文本内容。height和width就更不用说了一眼望去就是指的高和宽。这样也帮助了我们的记忆。

在这里插入图片描述

我们所了解的这些属性我主要会介绍以下三个的用法

不知道有没有同学可以找到其中的规律，没错就是按照一定方向进行了缩写和略写，那到底是什么方向呢，可能大部分同学已经看出来了，是按照以上为起点，顺时针旋转上—右—下—左，对应省略。

在这里插入图片描述

那可能就有些同学给就要问那如果上下边界都是1px，我能不能对应缩写呢？
形如：margin：1px 2px 1px 3px 上，下边界虽然都是1px，但是不能缩写，想一想，要是我们在下方缩写了，那还能确定补位的是下方的还是左方的等呢。

水平居中小技巧：

格式	表述
border-width	px（像素）、thick（粗）、medium（中）、thin（细）
border-style	dashed（虚线）、dotted（虚点）、solid（实线）、double（双实线）
border-color	颜色（rbga）
border	width style color

举例：

在这里插入图片描述

这两种使用方法都可以的。

border-radius

在这里插入图片描述
示例：

为了能够更加直观的看到这些变化，所以我设置的比较夸张。

思考一下，圆要怎么设置呢？
对，把我们border—radius 里的像素设置，应该是我们盒子的两倍，就可以设置成我们想要的圆框。

示例：
在这里插入图片描述

阴影位置	格式
外部阴影	outset
内部阴影	inset

使用方法：box-shadow：（inset）水平偏移垂直偏移模糊距离颜色：
示例：
在这里插入图片描述

今天的盒子模型就介绍到这里了，有兴趣的朋友可以去实施。