width 宽度
可以控制元素的宽度，单位有像素px,百分比%等等
默认值是auto，块级元素宽度自动撑满父容器
也可以限定最大max-width和最小min-width
.box{
width:500px; /* 或用百分比 */
}
height 高度
可以控制元素的高度，单位有像素px,百分比%等等
默认值是auto，块级元素高度由内容撑开
也可以限定最大max-height和最小min-height
.box{
height:500px; /* 或用百分比 */
}
border 边框
可以控制元素的边框
第一个参数是边框宽度border-width（可单独设置）
第二个参数是边框样式border-style（默认为none，可单独设置），常见的选项为：
| 选项值 | 释义 |
|---|---|
none |
无边框 |
solid |
单实线 |
dashed |
虚线 |
dotted |
点线 |
double |
双实线 |
第三个参数是边框颜色，可以用颜色英文名称，或者十六进制颜色值，RGB颜色值（R是红色，G是绿色，B是蓝色）
.box{
border:1px dotted grey;
/*边框宽度 边框样式 边框颜色*/
}
border-radius 边框圆角
可以控制边框的圆角
.box{
border-radius:8px;
/*以8px为半径画圆使得该圆内切于边框，则圆弧为边框的圆角*/
}
padding 内边距
可以控制边框和内容之间的距离
如果仅有一个参数，那么表示四个方向的距离均为该值
如果有两个参数，那么第一个值表示上下，第二个值表示左右
如果有三个参数，那么第一个值表示上，第二个值表示左右，第三个值表示下
如果有四个参数，那么第一个值表示上，第二个值表示右，第三个值表示下，第四个值表示左（从上开始，顺时针转）
上述规则为值复制原则
| 值个数 | 值表示 |
|---|---|
| 1 | 上下左右 |
| 2 | 上下 左右 |
| 3 | 上 左右 下 |
| 4 | 上 右 下 左 |
.box{
padding: 15px;
/* 四边都是 15px */
padding: 10px 20px;
/* 上下 10px，左右 20px */
padding: 10px 20px 30px;
/* 上 10px，左右 20px，下 30px */
padding: 10px 20px 30px 40px;
/* 上 10px，右 20px，下 30px，左 40px */
}
也可以直接指定单边，可读性较好，padding-top(上),padding-right(右),padding-bottom(下),padding-left(左)
.box{
padding-top: 10px; /*上*/
padding-right: 20px; /*右*/
padding-bottom: 30px; /*下*/
padding-left: 40px; /*左*/
}
margin 外边距
可以控制边框外面和其他元素之间的距离，和padding差不多，参数也是值复制原则，也可以直接指定单边
margin支持负值，padding不支持
外边距合并：垂直相邻的两个块级元素，上下margin会取较大值，不是相加
常用写法
.box{
margin:0 auto; /*块级元素可以用这个实现水平居中,auto为自动计算*/
}
box-sizing 盒模型
决定元素的width和height怎么算，有两个值：content-box(标准盒)、border-box(怪异盒)
标准盒模型：width 只代表内容区的宽度。padding 和 border 会额外撑大元素
怪异盒模型：width 代表边框盒的宽度，padding 和 border 从里面扣
content-box:
┌─────────────────────────────┐
│ border 5px │
│ ┌─────────────────────────┐ │
│ │ padding 20px │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ content 200px │ │ │
│ │ └─────────────────────┘ │ │
│ └─────────────────────────┘ │
└─────────────────────────────┘
总宽 = 200 + 40 + 10 = 250px
border-box:
┌─────────────────────┐
│ border 5px │
│ ┌─────────────────┐ │
│ │ padding 20px │ │
│ │ ┌─────────────┐ │ │
│ │ │ content 150 │ │ │
│ │ └─────────────┘ │ │
│ └─────────────────┘ │
└─────────────────────┘
总宽 = 200px
background-color 背景颜色.box{
background-color:#f9f9f9;
}
background-image 背景图片.box{
background-image:url(./bg.jpg); /*写图片地址*/
}
box-shadow 阴影效果inset，表示外阴影.box{
box-shadow:5px 5px 5px grey;
/* 水平偏移，竖直偏移，晕染宽度，晕染颜色*/
}
color 文字颜色.box{
color:red;
}
text-indent 文字缩进.box{
text-indent:2em; /*em是当前元素的文字大小，可以自动计算*/
}
text-align 文字水平偏移center是文字水平居中，left是文字水平居左，right是文字水平居右.box{
text-align:center;
}
text-shadow 文字阴影box-shadow类似，可以实现艺术字的效果text-decoration 文字装饰line-height 行高font-size 字号font-family 字体font-weight 字重position 定位模式
可以控制定位的模式，有static(默认定位)，absolute(绝对定位)，relative(相对定位)，fixed(固定定位)，sticky(粘性定位)
不能单独使用，要配合偏移值top(与顶部距离),bottom(与底部距离),left(与左边距离),right(与右边距离)
static是所有元素的默认定位，元素处于正常文档流，设置top/right/bottom/left无效，忽略z-indexrelative是相对定位，参照物是元素自身的原始位置，不脱离文档流，视觉上移动，布局位置不变。可用于微调图标，作为绝对定位的定位祖先，创建hover(鼠标悬停在元素上)动效偏移，配合z-index调整层叠顺序absolute是绝对定位，参照物是最近的position非static的祖先元素（有定位祖先就参照定位祖先，无就参照视口），脱离文档流，默认宽度由内容决定（除非指定宽度），可创建新的层叠上下文。可用于模态框，弹窗，下拉菜单，图标角标，自定义滚动条，轮播图指示器fixed是固定定位，参照物是浏览器视口，脱离文档流，不随滚动条滚动，可用于导航栏，侧边栏，广告条sticky是粘性定位，参照物是最近的滚动祖先，混合定位（relative和fixed），条件触发，达到阈值（需指定）后变为fixed，可用于表头固定，分类导航，阅读进度条| 定位类型 | 参照物 | 脱离文档流 | 视觉 vs 布局 | top/right/bottom/left |
z-index |
典型用途 |
|---|---|---|---|---|---|---|
static |
无（正常文档流） | 否 | 一致 | 无效 | 忽略 | 所有元素的默认值 |
relative |
元素自身原始位置 | 否 | 视觉移动，布局位置不变 | 有效 | 有效 | 微调图标、作为 absolute 的定位祖先、hover 偏移、调层叠顺序 |
absolute |
最近的非 static 祖先；没有则参照视口 | 是 | 完全脱离，不占原位置 | 有效 | 有效，可创建层叠上下文 | 模态框、弹窗、下拉菜单、图标角标、自定义滚动条、轮播指示器 |
fixed |
浏览器视口 | 是 | 不随滚动条滚动 | 有效 | 有效 | 固定导航栏、侧边栏、广告条 |
sticky |
最近的滚动祖先 | 否（阈值内仍占位） | 阈值内像 relative，超过阈值像 fixed | 有效（必须指定阈值） | 有效 | 表头固定、分类导航、阅读进度条 |
可利用这个网址练习
display
当使用弹性布局时，先把display的值改成flex(块级弹性容器)或者inline-flex(行内弹性容器)，使得子元素自动变成弹性项目
.box{
display:flex;
}
flex-direction 主轴方向
主轴：项目排列的主要方向
交叉轴：垂直于主轴的轴
.container {
flex-direction: row; /* 默认：左到右 */
flex-direction: row-reverse; /* 右到左 */
flex-direction: column; /* 上到下 */
flex-direction: column-reverse; /* 下到上 */
}
justify-content 主轴对齐
.container {
justify-content: flex-start; /* 默认：主轴起点对齐 */
justify-content: flex-end; /* 主轴终点对齐 */
justify-content: center; /* 主轴居中对齐 */
justify-content: space-between; /* 两端对齐，项目间等距 */
justify-content: space-around; /* 每个项目两侧等距 */
justify-content: space-evenly; /* 项目与项目、项目与边界等距 */
}
align-items 交叉轴对齐
作用于每一行中的单个项目，相当于为所有子项统一设置align-self(单个项目对齐，继承align-items)
.container {
align-items: stretch; /* 默认 */
align-items: flex-start; /* 交叉轴起点对齐 */
align-items: flex-end; /* 交叉轴终点对齐 */
align-items: center; /* 交叉轴居中对齐 */
align-items: baseline; /* 基线对齐 */
}
.item {
align-self: auto; /* 默认：继承align-items */
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
align-self: stretch;
}
align-content 多轴线对齐
将多行项目作为一个整体，在交叉轴上分配空间
.container {
align-content: stretch; /* 默认：拉伸填满 */
align-content: flex-start; /* 交叉轴起点对齐 */
align-content: flex-end; /* 交叉轴终点对齐 */
align-content: center; /* 交叉轴居中对齐 */
align-content: space-between; /* 交叉轴两端对齐 */
align-content: space-around; /* 交叉轴等距分布 */
}
flex-wrap 换行控制
.container {
flex-wrap: nowrap; /* 默认：不换行 */
flex-wrap: wrap; /* 换行，第一行在上 */
flex-wrap: wrap-reverse; /* 换行，第一行在下 */
}
flex-flow 简写属性
flex-direction和flex-wrap的简写属性，
第一个参数是flex-direction
第二个参数是flex-wrap
.item{
display:flex;
flex-flow:column wrap;
}
flex 简写属性
第一个参数控制放大比例，默认为0，值为0时不放大，值为1就等分剩余空间（占比，从剩余空间可以占到的比例）
第二个参数控制缩小比例，默认为1，值为0时空间不足不缩小，值为1时空间不足就等比例缩小（占比，从剩余空间可以占到的比例）
第三个参数控制初始大小，配合第一个参数实现等分
.item {
flex: none; /* 0 0 auto */
flex: auto; /* 1 1 auto */
flex: 1; /* 1 1 0% */
flex: 0 0 200px; /* flex-grow flex-shrink flex-basis */
}
order 排列顺序
.item {
order: 0; /* 默认：按文档流顺序 */
order: 1; /* 数值越大，排列越靠后 */
order: -1; /* 数值越小，排列越靠前 */
}
display
当使用网格布局时，先把display的值改成grid(块级网格容器)或inline-grid(行内网格容器)
.container{
display:grid
}
grid-template-columns 每一列的列宽
auto-fill关键字表示自动填充。auto-fill ，还有一个关键字auto-fit，auto-fill会用空格子填满剩余宽度，auto-fit则会尽量扩大单元格的宽度。fr关键字，如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍minmax函数产生一个长度范围，接收两个参数，分别是最小值和最大值auto关键字表示由浏览器自己决定长度.container {
display: grid;
grid-template-columns: 100px 100px 100px;
/* 可以用px*/
grid-template-columns: 33.33% 33.33% 33.33%;
/* 也可以用百分比*/
grid-template-columns: repeat(3, 33.33%);
/* 可用repeat函数简化 repeat接收两个参数，第一个参数是重复的次数，第二个参数是所要重复的值*/
grid-template-columns: repeat(auto-fill, 100px);
/* 上面表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。*/
grid-template-columns: 150px 1fr 2fr;
/* fr可以与绝对长度的单位结合使用，这时会非常方便，上面表示：第一列的宽度为150像素，第二列的宽度是第三列的一半*/
grid-template-columns: 1fr 1fr minmax(100px,1fr);
/* 上面代码中，minmax(100px, 1fr)表示列宽不小于100px，不大于1fr*/
grid-template-columns: 100px auto 100px;
/* 上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度。*/
grid-template-columns: [c1] 100px [c2] 100px [c3];
}
grid-template-rows 每一行的行高
和grid-template-columns属性类似
gap 简写属性
gap属性是column-gap(列间距)和row-gap(行间距)的合并简写形式，接受1-2个值
.container {
grid-gap: 20px 20px;
}
grid-template-areas 网格区域
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: "header header header" "main main sidebar" "footer footer footer";
}
grid-auto-flow
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。
当属性值为row时，先行后列
当属性值为row dense时，先行后列，尽可能填满空格
当属性值为column时，先列后行
当属性值为column dense时，先列后行，尽可能填满空格
place-items 简写属性
place-items属性是align-items属性和justify-items属性的合并简写形式，接受1-2个属性
justify-items属性设置网格项目在单元格内的水平位置（左中右）
align-items属性设置网格项目在单元格内的垂直位置（上中下）
| 属性值 | 释义 |
|---|---|
| start | 对齐单元格的起始边缘 |
| end | 对齐单元格的结束边缘 |
| center | 单元格内部居中 |
| stretch | 拉伸，占满单元格的整个宽度（默认值） |
.container{
place-items: center center;
/* 第一个是align-items 第二个是justify-items */
}
place-content 简写属性
place-content属性是align-content属性和justify-content属性的合并简写形式，接受1-2个属性
justify-content属性是整个内容区域在容器里面的水平位置（左中右）
align-content属性是整个内容区域的垂直位置（上中下）
| 属性值 | 释义 |
|---|---|
| start | 对齐容器的起始边框 |
| end | 对齐容器的结束边框 |
| center | 容器内部居中 |
| stretch | 项目大小没有指定时，拉伸占据整个网格容器 |
| space-around | 每个项目两侧的间隔相等，项目之间的间隔比项目与容器边框的间隔大一倍 |
| space-between | 项目与项目的间隔相等，项目与容器边框之间没有间隔 |
.container{
place-content: center center;
/* 第一个是align-content 第二个是justify-content */
}
grid-auto-rows 和 grid-auto-columns
没有被显式地定义行高或列宽的网格元素，就需要使用grid-auto-row和grid-auto-columns属性来指定它们的默认尺寸
.grid-container {
display: grid;
grid-auto-rows: 100px;
}
grid-column 和 grid-row 简写属性
grid-column属性是grid-column-start和grid-column-end的合并简写形式
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式
/*1.指定为第几个网格线*/
/*项目item-1占据第一行，从第一根列线到第三根列线。*/
.item-1 {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
}
/*2.也可以使用span关键字，表示跨越多少个网格。*/
/*项目item-1占据的区域，包括第一行 + 第二行、第一列 + 第二列。*/
.item-1 {
background: #b03532;
grid-column: 1 / 3;
grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
background: #b03532;
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
/*3.斜杠以及后面的部分可以省略，默认跨越一个网格。*/
/*项目item-1占据左上角第一个网格*/
.item-1 {
grid-column: 1;
grid-row: 1;
}
grid-area 简写属性
grid-area属性指定项目放在哪一个区域。
.item-1 {
/*1号项目位于e区域*/
grid-area: e;
}
grid-area属性还可用作grid-row-start、grid-row-end、grid-column-start、grid-column-end的合并简写形式，直接指定项目的位置。
/*示例：
grid-area: <row-start> / <column-start> / <row-end> /
<column-end>;
*/
.item-1 {
grid-area: 1 / 1 / 3 / 3;
}
place-self 简写属性
place-self属性是align-self属性和justify-self属性的合并简写形式，接受1-2个值
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
| 属性值 | 释义 |
|---|---|
| start | 对齐单元格的起始边缘 |
| end | 对齐单元格的结束边缘 |
| center | 单元格内部居中 |
| stretch | 拉伸，占满单元格的整个宽度（默认值） |
.container{
place-self: center center;
/* 第一个是align-self 第二个是justify-self */
}