盒子模型

外边距

margin: top、right、bottom、left。

内边距

padding: top、right、bottom、left。

box-sizing

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit	规定应从父元素继承 box-sizing 属性的值。

边框

样式选择

类型	描述
none	定义无边框。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值。
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。

样式顺序为上、右、下、左，可以分别进行定义

单独设置一边样式

规则	说明
border-top-style	顶边
border-right-style	右边
border-bottom-style	下边
border-left-style	左边
border-style	四边

边框宽度

规则	说明
border-top-width	顶边
border-right-width	右边
border-bottom-width	下边
border-left-width	左边
border-width	四边

边框颜色

规则	说明
border-top-color	顶边
border-right-color	右边
border-bottom-color	下边
border-left-color	左边
border-color	四边

圆角边框

选项	说明
border-top-left-radius	上左
border-top-right-radius	上右
border-bottom-left-radius	下左
border-bottom-right-radius	下右

轮廓线

元素在获取焦点时产生，并且轮廓线不占用空间。可以使用伪类 :focus 定义样式。

• 轮廓线显示在边框外面
• 轮廓线不影响页面布局

线条样式

值	描述
none	默认。定义无轮廓。
dotted	定义点状的轮廓。
dashed	定义虚线轮廓。
solid	定义实线轮廓。
double	定义双线轮廓。双线的宽度等同于 outline-width 的值。
groove	定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
ridge	定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
inset	定义 3D 凹边轮廓。此效果取决于 outline-color 值。
outset	定义 3D 凸边轮廓。此效果取决于 outline-color 值。

outline-style: double;

线宽设置

outline-width: 10px;

线条颜色

outline-color: red;

组合定义

outline: red solid 2px;

表单轮廓线

表单默认具有轮廓线，但有时并不好看，使用以下样式规则去除。

input:focus {
	outline: none;
}

display

选项	说明
none	隐藏元素
block	显示为块元素
inline	显示为行元素，不能设置宽/高
inline-block	行级块元素，允许设置宽/高

visibility

控制元素的显示隐藏，在隐藏后空间位也保留。

溢出控制

选项	说明
hidden	溢出内容隐藏
scroll	显示滚动条（有些浏览器会一直显示，有些在滚动时显示）
auto	根据内容自动处理滚动条

尺寸定义

选项	说明
width	宽度
height	高度
min-width	最小宽度
min-height	最小高度
max-width	最大宽度
max-height	最大高度
fill-available	撑满可用的空间
fit-content	根据内容适应尺寸

1. min-content

使用min-content 将容器尺寸按最小元素宽度设置。

p {
    width: min-content;
    margin: auto;
}

2. max-content

p {
    width: max-content;
    margin: auto;
}