后端上手学习css基础知识前言 css样式作为一块重点，特别容易劝退人，五花八门的样式布局，总能形成不一样的效果。需要慢

前言

css样式作为一块重点，特别容易劝退人，五花八门的样式布局，总能形成不一样的效果。需要慢慢沉淀和积累，才能更好的应用。下面就是简单的总结下基础常用的知识点

引用和设置样式

第一种：link外部引用
第二种：style标签
第三种：内联样式style属性

// 第一种link
<link rel="stylesheet" type="text/css" href="mystyle.css">

// 第二种style标签
<style type="text/css">
    body {background-color: red}
    p {margin-left: 20px}
</style>

// 第三种内联样式
<p style="color: red; margin-left: 20px"></p>

选择器

基础选择器

class的选择： .class
id的选择： #id
标签的选择： 标签名

批量选择器

并集选择列举到的标签1和标签2都能应用 ： 标签名1,标签名2 （使用,分隔）

// 第一种使用,分隔
.container,.item {
    background-color: lightblue;
}
<div class="container">
    <div class= "sxx">
        <p class="item">这是外面的 item，会应用样式。</p>
    </div>
    <p class="item">这是 container 里面的 item，会应用样式。</p>
</div>
<p class="item">这是 container 外面的 item，会应用样式。</p>

所有标签1后代为标签2选择 ： 标签名1 标签名2 （使用空格分隔）

// 第二种使用空格分隔
.container .item {
    background-color: lightblue;
}
<div class="container">
    <div class= "sxx">
        <p class="item">这是外面的 item，会应用样式。</p>
    </div>
    <p class="item">这是 container 里面的 item，会应用样式。</p>
</div>

只直接标签1后一代标签2选择 ： 标签名1>标签名2 （使用>分隔）

// 第三种使用>分隔
.container>.item {
    background-color: lightblue;
}
<div class="container">
    <div class= "sxx">
        <p class="item">这是外面的 item，不会应用样式。</p>
    </div>
    <p class="item">这是 container 里面的 item，会应用样式。</p>
</div>

交集选择同时都有标签1和标签2的： 标签1标签2 （没有分隔）

// 第四种没有分隔
.red.bold {
    color: red;
    font-weight: bold;
}
<p class="red bold">这段文字同时有 red 和 bold 类，会应用样式。</p>

相同父元素后的元素后面的每一个 ：element1~element2（使用~分隔）

// 第五种~分隔
p~ul{
    background:#ff0000;
}
<div>A div element.</div>
<ul>
  <li>无样式</li>
</ul>
<p>The first paragraph.</p>
<ul>
  <li>有样式</li>
</ul>
<h2>Another list</h2>
<ul>
  <li>有样式</li>
</ul>

伪类

:first-child ：标记选择第一个子元素
:last-child : 标记选择最后一个子元素
:nth-child(x) : 任意序号的子元素
:link : 未被访问的链接，用于a标签
:visited: 已被访问的链接，用于a标签
:hover: 鼠标悬停
:active: 鼠标按下/键盘选中的元素获得焦点
:before: 在元素之前插入内容
:after:在元素之后插入内容
:checked: 所有被选中的元素
:disabled: 所有被禁用的元素

注意： hover 得在 link 和 visited的后面，active 得在 hover后面

div:hover {
    background-color: aqua;
}

基础常规属性

font-size：字体尺寸
font-weight ：字体粗细，normal 正常，bold 加粗
font-family : 使用的字体，大多微软雅黑和宋体
text-decoration : 文本修饰
text-align ：文字对齐形式
line-height: 行高
margin: 外边距
padding：内边距
height ：高度
- min-height ：最小高度
- max-height ：最大高度
width ：宽度
- min-width ：最小宽度
- max-width : 最大宽度
color ：颜色
- rgb标识 : rgb(255,0,0)
- 颜色的英语单词 : red，blue等等
- 十六进制： #FFFFFF ,常用的黑#000，白#FFF,灰#ccc,#333
background-color ：背景颜色
background-size ：背景填充形式
background-repeat ：背景内容是否重复
background-image ：背景图片
position : 位置定位
display:flex ： flex布局
display:grid : grid布局

注意：

针对大小：px是像素大小单位，比较常用。 em是相对单位,对于父元素的相对大小倍数，父元素没有明确，会向上追溯最近的祖先元素，而最后rem也是相对单位，但是相对于html标签上上的定义大小的倍数而定,vh/vw 视窗高宽百分比，vmin/vmax视口高度和高度较小的那个的百分比, %百分比适用于宽度和高度的设置对于父元素的相对大小
针对颜色： rgb标识/颜色的英语单词/十六进制
针对方位： top 上,right 右,bottom 下,left 左
auto ：自适应，浏览器自动计算

// em的使用
.parent {
  font-size: 16px;
}
.child {
  font-size: 1.5em; /* 1.5 * 16px = 24px */
}

// rem的使用
html {
  font-size: 16px;
}
p {
  font-size: 1rem; /* 1 * 16px = 16px */
}

常规配置样式

常见的值设定选择

font-size : 12px, 14px, 16px
margin,padding : 8px,16px,24px
corlor: #333,#666,#999

居中对齐

使用text-align: center :实现行内元素在其父块级元素中的水平居中
使用margin: 0 auto : 实现固定宽度的块级元素中来实现水平居中
使用line-height等于父元素height，实现行内元素单行文本垂直居中
使用绝对定位position来实现垂直水平居中
使用flex布局实现垂直水平居中

vh和%的设置

100% : 设置子元素的高度100%会撑满父元素固定的高度，相当于是设置了在父元素高度的占比
100vh：和可见屏幕的高度一致，不管子元素还是父元素的高度

剩余部分的占有

设置flex布局：flex:1 /flex:auto
设置grid布局: grid-template-columns: 100px 1fr
设置绝对定位： position:absolute

响应式布局

通过媒体查询 @media 实现不同屏幕尺寸的样式转换
通过流式布局，动态百分比来实现
通过弹性布局 flex布局灵活分配空间
通过网格布局 grid布局实现复杂页面结构
通过视口单位 vh/vw/vmin/vmax 视口尺寸动态调整
通过图片/视频的处理，自适应图片/视频 max-width/object-fit来动态
框架支持，如Bootstrap等框架实现响应式

对图片视频的支持

object-fit ：确保内容在不同尺寸响应显示结果

fill：这是默认值。它会让替换元素的内容拉伸以填满整个内容框。这可能会导致元素内容的宽高比被改变，出现变形的情况。
contain：元素内容会按比例缩放，直至能完全放入内容框内。此时，内容的宽高比会保持不变，并且内容框内可能会出现留白。
cover：元素内容同样按比例缩放，但会覆盖整个内容框。在这个过程中，内容的宽高比不变，不过部分内容可能会超出内容框而被裁剪掉。
none：元素内容既不进行缩放，也不进行裁剪，会保持其原始尺寸显示。
scale-down：将元素内容缩放到 none 或 contain 模式下的尺寸，以得到一个更小的尺寸显示。

object-position 指定替换元素（视频/图片）在其内容框内的位置

object-fit : cover;
object-position : center; // 居中显示

max-width/max-height ：限定最大宽度和最大的高度，当内容尺寸超出最大限制时，元素会自动缩放以适应最大尺寸。同理可得，min-width 和 min-height 设定限定元素的最小宽度和最小高度，当内容尺寸小于最小限制，元素保持最小尺寸

max-width : 100%
max-height : 100%

aspect-ratio : 设定元素的宽高比，即便元素的宽度或高度发生变化，也会依据指定的宽高比自动调整另一个维度的尺寸。

.video {
    width: 100%;
    aspect-ratio: 16 / 9;
}

字体

对字体样式的一些设置属性

字体系列

属性 font-family 列举一个或多个由逗号隔开的字体族。每个字体族由 family-name 或 generic-name 值指定， generic-name是属于备选机制。

// family-name 为 Gill Sans Extrabold 
// generic-name 为 sans-serif
font-family: "Gill Sans Extrabold", sans-serif;

字体修饰

通过font-style指定字体的样式

normal : 正常标准
italic : 显示一个斜体的字体样式
oblique: 显示一个倾斜的字体样式

注意：如果字体本身有斜体版本，优先使用italic；如果没有斜体版本，可以使用oblique来实现倾斜效果

font-style: normal

文本

对文本整体的设置相关属性，包括颜色，划线，对其方式，缩进,大小写转换等等信息

文本颜色

使用color修饰，注意定义了文本颜色，有些需要背景色的配合才能显现

color:red;
color:rgb(255,0,0);
color:#FF0000;

文本修饰

用来设置或删除文本的装饰，可以单独定义，也可以一起简写定义

text-decoration-line：设置线
- none : 删除修饰
- underline ：下划线
- overline :上划线
- line-through :中间线
text-decoration-color : 设置颜色（同设置color类似）
text-decoration-style：线的样式
- solid:实线
- double:双实线
- dotted:点状线
- dashed:虚线
- wavy:波浪线

text-decoration: none;                     /*没有文本装饰*/
text-decoration: underline red;            /*红色下划线*/
text-decoration: underline wavy red;       /*红色波浪形下划线*/

文本对齐

对齐方式：使用 text-align设置

center : 居中
left：左对齐
right：右对齐
justify：两端对齐

text-align: center;

文本溢出换行

white-space : 控制空白符（空格，换行符）的处理

normal：默认值，连续的空白符会被合并，文本会自动换行。
nowrap：文本不会换行，所有内容会在一行显示，直到遇到 <br> 或强制换行。
pre：保留空白符和换行符，类似于 HTML 的 <pre> 标签。
pre-wrap：保留空白符和换行符，但允许自动换行。
pre-line：合并空白符，保留换行符，允许自动换行。

p {
  white-space: nowrap; /* 文本不换行 */
}
pre {
  white-space: pre-wrap; /* 保留空白符和换行符，同时允许换行 */
}

word-break : 控制单词内的断行规则

normal：默认值，按标准规则断行（通常在空格处断行）。
break-all：允许在单词内任意位置断行。
keep-all：禁止在单词内断行（适用于 CJK 文本）。

div {
  word-break: break-all; /* 长单词会在任意位置断行 */
}

text-overflow : 控制文本溢出容器时的显示方式

clip：默认值，溢出部分直接被裁剪。
ellipsis：用省略号（...）表示被裁剪的文本。

div {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden;    /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}

背景

background 用于设置背景相关属性

背景颜色

设置背景元素的颜色信息,使用background-color

设置方式和color类似

background-color:red;
background-color:#e0ffff;
background-color:rgb(255,0,0);

背景图像

通过设置background-image来设置背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体

background-image:url('xx.jpg')

设置背景样式

通过设定background-repeat来指定背景图像重复情况

repeat：默认值，背景图片在水平和垂直方向上重复显示
repeat-x:只有水平位置会重复背景图像
repeat-y:只有垂直位置会重复背景图像
no-repeat: background-image 不会重复

通过设定 background-position来指定背景图像的起始位置

指定位置关键词：top right,若指定一个关键词，第二个关键词默认center
指定百分比/数值：x% y%/1px 20px,分别代表水平位置和垂直位置

通过设定background-attachment来指定背景是否滚动或者固定

scroll : 默认值。背景图像会随着页面其余部分的滚动而移动
fixed : 当页面的其余部分滚动时，背景图像不会移动
inherit : 规定应该从父元素继承 background-attachment 属性的设置

通过设定 background-size来调整背景图片的大小

auto：默认值，背景图片以原始大小显示。
cover：背景图片会等比例缩放，直到覆盖整个元素，可能会有部分图片超出元素范围。
contain：背景图片会等比例缩放，直到图片的宽度或高度完全适应元素，图片会完整显示在元素内。
具体的长度值或百分比值：例如 background-size: 200px 150px; 或 background-size: 50% 80%;。

盒子模型

内边距padding 和外边距margin, 还有边框border

padding

盒子边框内壁到内部文本的距离

详细定义 :top,right,bottom,left : 上,右,下,左
稍简定义: top,right/left,bottom : 上,右/左,下
极简定义: top/bottom,right/left : 上/下,右/左

padding : 10px,20px,20px,10px
padding : 10px,20px10px
padding : 10px,20px
padding-top : 10px

margin

盒子边框外部到隔壁盒子的距离，使用方式和padding一致如上，但用的是marign关键词

注意：

上盒子设置了对底部的边距，下盒子对顶部的边距，他们的总的边距不叠加，以大值为准
一些标签自(body,p,ul等)带有默认的margin，需要手动进行清除

小技巧 ：对于水平居中可以直接使用 margin: 0 auto

border

border-width : 设置边框的宽度
border-style : 设置边框的样式
- solid ：实线边框
- dotted：点线边框
- dashed：虚线边框
border-color ：设置边框的颜色，对于颜色的值格式，也是rgb,英文单词，16进制等
border-radius : 设置圆角的边框，分(左上右上右下左下)/ (左上右上左下右下) /(左上右下右上左下)
box-shadow : 设置阴影，（x轴阴影，y轴阴影，阴影模糊半径，阴影扩展半径，阴影颜色）

如果进行单一边的设置： border-{direction}-style : 方向值的选项有top/bottom/left/right
如果进行单一角的设置： border-{direction1}-{direction2}-style : 方向值的选项有top/bottom/left/right
最终简写形式： border: {border-width} {border-style} {border-color};

// 整体边框边角设置
border-width: 1px
border-style: solid
border-color: red

// 简写
border:1px solid red

// 使用 圆角
border-radius : 5px

// 使用阴影
/* x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* 插页 (阴影向内) | x 偏移量 | y 偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

// 单边（顶边）边框设置
border-top-style: solid;
border-top-width: 1px;
border-top-color: red;
// 单个左上角设置
border-top-left-radius : 5px;

outline

是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用 , 比boder还要外一层

注意：对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 none。但 input 元素是例外，其样式默认值由浏览器决定

position 定位

决定元素在文档的定位形式，包含static（正常定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）、sticky（粘性定位）

static 默认的正常定位
relative ：盒子相对原来的位置的定位，还在文档流内会占位
absolute : 离自身最近的定位祖先元素（非static）的位置进行偏移定位 ,脱离文档流不占位
fixed : 相对于窗口的固定定位 , 和文档流无关不占位置
sticky : 具备relative和fixed的结合效果
- 偏移值不设置：等同于static效果
- 有方向设置偏移值：距离顶部距离大于这个偏移值时使用relative，小于等于时候使用fixed效果

注意：通常 <body> 元素会设置 margin 和 padding为0，这样可以避免在不同的浏览器中出现可见的差异

relative 相对定位

使用三个div有固定宽高的依次挨着，对中间的div使用相对定位，使其对于第一个div相对上面和左边偏移位置。发现红色块还是占有原来的位置

#div2 {
    position: relative;
    top: 30px;
    left: 30px;
}

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

absolute 绝对定位

使用三个div有固定宽高的依次挨着，对中间的div使用绝对定位，使其对于最近的祖先节点（position不是static）相对上面和左边偏移位置。发现红色块原来的位置的已经被下面的黑色顶上来了。

#div2 {
    position: absolute;
    top: 30px;
    left: 30px;
}

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

注意：通常搭配祖先节点(使用relative)来使用absolute定位

#div2 {
    position: absolute;
    top: 30px;
    left: 30px;
}

<div id="div1"></div>
<div style="margin: 20px;position: fixed;">
    <div id="div2"></div>
</div>
<div id="div3"></div>

fixed 固定定位

使用三个div有固定宽高的依次挨着，对中间的div使用固定定位，使其对于窗口相对上面和左边偏移位置。滑动右边的滚动条，红色始终和顶部和左侧保持固定的距离

#div2 {
    position: fixed;
    top: 30px;
    left: 30px;
}

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

sticky 粘性定位

使用三个div有固定宽高的依次挨着，对中间的div使用粘性定位，使其对于祖先节点相对上面和左边偏移位置（如左图）。然后随着滑动右边的滚动条，距离顶部小于等于偏移的位置，使其对窗口相对上面和左边偏移位置（如右图）

#div2 {
    position: sticky;
    top: 30px;
    left: 30px;
}

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

display 元素框

行内和块级元素

行内元素 ：可以多个标签在一行，对宽高属性设置不生效，完全靠内容撑开宽高
块级元素 ：独占一行，对宽高属性设置生效，问设置宽，则默认100%浏览器宽

inline

使元素变成行内元素，与其他元素共享一行，不会独占一行
不能改变元素的height，width值，大小由内容撑开
可以使用padding，margin的left和right产生边距效果，但是top和bottom就不行。

#div2 {
    display: inline;
    margin-top: 20px;  /*无效*/
    width: 100px; /* 无效 */
    height: 100px; /* 无效 */
    background-color: red;
}

<div id="div1"></div>
<div id="div2">inline的div</div><div id="div2">inline的div</div>
<div id="div3"></div>

上述实现通过将div转换为行内元素，此时就不独占一行，此时设置width，height，和margin-top/bottom都无效

注意：行内元素间可能存在间距，可以将其代码写在一下 ,剔除中间的空格和换行等符号

<span>111</span><span>222</span>

block

使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度.
能够改变元素的height，width的值.
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.

#div2 {
    display: inline;
    height: 100px;
    background-color: red;
}

<div id="div1"></div>
<span id="span1">block的span</span>
<div id="div3"></div>

上述实现将span标签转换为块状元素，独占一行，对于margin和padding对生效

inline-block

结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点
【与其他元素共享一行，不会独占一行】，【能够改变元素的height，width的值】，【可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.】
不独占一行的块状元素

使用flex布局

针对具体详细内容参照阮一峰的文章： ruanyifeng.com/blog/2015/0…

在布局方面上的使用的比较频繁多的方式。设置display：flex则声明该标签为flex容器，然后该标签下的直系标签都为flex元素，可以进行一些对齐方式的调整.

设置布局：针对块状元素容器 flex 整个容器撑满，行内元素容器 inline-flex由内容撑开
容器内子元素排列的方向 ：可以通过设置主轴方向，自然而然交叉轴就是与主轴垂直的方向，通过 flex-direction：row/column设定，row是默认的水平从左到右方向。

justify-content 主轴对齐方式
- flex-start（默认值）：左对齐
- flex-end：右对齐
- center：居中
- space-between：两端对齐，项目之间的间隔都相等。
- space-around：每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍。
align-items : 交叉轴（和主轴相垂直的轴）对齐方式
- flex-start：交叉轴的起点对齐。
- flex-end：交叉轴的终点对齐。
- center：交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
flex-wrap : 在轴线上排列不下后的换行的设置
- nowrap ：默认，不换行
- wrap ：换行，第一行数据在上面
- wrap-reverse ：换行，第一行数据在下面
flex: 项目放大比例 , 缩小比例 , 主轴方向大小的便捷设置
- auto (1 1 auto): 【按内容先】当希望元素充分利用剩余空间，但是各自的尺寸按照各自内容进行分配的时候
- 1 (1 1 0%): 【按比例】所有的等分列表，或者等比例列表都适合使用
- none (0 0 auto): 按照子元素自己大小来，不受剩余空间和伸缩比例影响

<div style="display: flex; justify-content: space-evenly">
  <div style="background-color: red; width: 100px; height: 100px"></div>
  <div style="background-color: red; width: 100px; height: 100px"></div>
  <div style="background-color: red; width: 100px; height: 100px"></div>
</div>

flex布局中通过grid中的gap属性设置间距 ,flex-wrap设置wrap来换行

<div style="display: flex; gap: 10px;flex-wrap: wrap;">
  <div style="background-color: red; width: 400px; height: 400px"></div>
  <div style="background-color: rgb(44, 31, 31); width: 400px; height: 400px"></div>
  <div style="background-color: rgb(255, 0, 34); width: 400px; height: 400px"></div>
  <div style="background-color: rgba(51, 148, 111, 0.466); width: 400px; height: 400px"></div>
  <div style="background-color: rgb(55, 0, 255); width: 400px; height: 400px"></div>
</div>

通过设置flex为1，来实现剩余的部分内容的占据

<div style="display: flex">
  <div
    style="width: 800px; height: 100px; background-color: aquamarine"
  ></div>
  <div style="flex: 1; height: 100px; background-color: blueviolet"></div>
</div>

使用grid网格布局

针对具体详细内容参照阮一峰的文章： ruanyifeng.com/blog/2019/0…

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局

设置布局：针对块状元素容器 grid ，行内元素容器 inline-grid

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr">
  <div style="background-color: red;">sdf</div>
  <div style="background-color: black">sdf</div>
  <div style="background-color: red">sdf</div>
  <div style="background-color: black">sdf</div>
</div>

1. grid-template-columns 属性（定义每一列的列宽）

直接指定数值占比： 10px
指定百分比占比： 33%
auto ：浏览器自己决定长度
minmax()：长度范围内，最小值和最大值之间
重复指定 repeat 函数：
- 重复的数值一样：（重复个数3，数值10px/百分比33.33% ）
- 重复的数值不一样：（重复个数3，数值20px，数值10px ），第一列和第3列和第5列 20px，第2，4,6列10px
- auto-fill ： (auto-fill, 100px) 容纳尽可能多的单元格
fr ：标识比例占比关系
- 纯比例展示： 1fr 1fr 标识1：1展示
- 数值+比例展示： 150px 1fr 2fr ，标识前面数值，剩余的分三份，1:2展示

100px 100px 100px;   // 指定3个列宽 100px
33.33% 33.33% 33.33%;  // 指定3个列宽 占比 33.33%
repeat(3, 33.33%)    // 指定重复三个数字都是 33.33%
repeat(2, 100px 20px 80px); // 定义了6列，
第一列和第四列的宽度为100px，第二列和第五列为20px，第三列和第六列为80px
repeat(auto-fill, 100px); // 表示每列宽度100px, 然后自动填充，直到容器不能放置更多的列
1fr 1fr; // 两个相同宽度的列
1fr 1fr minmax(100px, 1fr); // 表示列宽不小于100px，不大于1fr
100px auto 100px; //第二列的宽度，基本上等于该列单元格的最大宽度
70% 30%; // 左边栏设为70%，右边栏设为30%
repeat(12, 1fr); // 设置12个列，都是1:1

2. grid-template-rows 属性（定义每一行的行高）

属性值参照 grid-template-columns 类似， 注意要设置容器的总行高

3. row-gap/column-gap 属性（行与行，列与列距离）

row-gap: 20px;  // 行间距 20px
column-gap: 20px;  // 列间距 20px
gap  : 20px 20px // 行间距 20px , 列间距 20px

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap:20px;row-gap:20px">
  <div style="background-color: red;">sdf</div>
  <div style="background-color: black">sdf</div>
  <div style="background-color: red">sdf</div>
  <div style="background-color: black">sdf</div>
</div>

4. 单元格对齐方式

对每一个单元格进行对齐的方式的指定

justify-items ：水平对齐位置（start | end | center | stretch）
align-items ：垂直对齐位置（start | end | center | stretch）

<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; column-gap:20px;row-gap:20px;justify-items:end">
  <div style="background-color: red;">sdf</div>
  <div style="background-color: black">sdf</div>
  <div style="background-color: red">sdf</div>
  <div style="background-color: black">sdf</div>
</div>

5. 指定子元素排列顺序

通过横向顺序排列，也可以竖向顺序排列

grid-auto-flow :
- row 先行后列
- column 先列后行
- row dense 先行后列，尽可能紧凑填满
- column dense 先列后行，尽可能紧凑填满

6. 指定上下左右边框位置

通过子元素上指定，占用的位置。注意指定3列，就有4根线

grid-column-start：左边框所在的垂直网格线
grid-column-end：右边框所在的垂直网格线
grid-row-start：上边框所在的水平网格线
grid-row-end：下边框所在的水平网格线

简写形式： grid-column 和 grid-row 指定

grid-column: 1 / 3 代表第一个线和第三个线

overflow 溢出

指定一个块元素在其内容溢出这个元素时候，内容是否裁掉

具体使用：限定宽高，再设置超出部分的打算用途设置overflow属性

visible（初始值）表明内容不会被裁剪，所以说他可能超出渲染，
hidden 超出的部分需要裁剪掉
scroll 超出内容不会裁剪掉，浏览器提供滚动机制来让用户看到超出内容
auto 如果超出的话，应该有滚动条

<div style="overflow:scroll; width: 100px">
    sfdsdffffffffffffffffffff
</div>

如果是只针对x轴或者y轴，可以指定overflow-x/overflow-y ，在使用overflow-x时就是需要指定宽度的大小，在使用overflow-y时是需要指定高度的大小

{
    width:100px;
    overflow-x : hidden;
}

{
    height:100px;
    overflox-y: hidden;
}

渐变 gradients

使用在两个或多个指定的颜色之间显示平稳的过渡，存在两种渐变

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 从上到下： linear-gradient(#e66465, #9198e5)
- 从左到右 : linear-gradient(to right, #e66465, #9198e5)
- 对角 : linear-gradient(to bottom right, #e66465, #9198e5)
- 使用角度： linear-gradient(-90deg, #e66465, #9198e5)
径向渐变（Radial Gradients）- 由它们的中心定义
- 均匀分布： radial-gradient(red, yellow, green)
- 不均匀分布： radial-gradient(red 5%, yellow 15%, green 60%)
- 指定形状：radial-gradient(circle, red, yellow, green)

background-image: linear-gradient(to right, #e66465, #9198e5);
background-image: radial-gradient(circle，red, yellow, green);

过渡 transition

CSS3中用于定义元素从一种样式状态平滑过渡到另一种样式状态的动画效果

具体属性：

property ：指定变化的css属性名称，单个/多个
duration: 过渡动画的持续时间，以秒（s）或毫秒（ms）为单位
timing-function :决定了过渡过程中速度的变化模式
- ease（默认）：开始和结束时慢，中间快。
- linear：匀速过渡。
- ease-in：开始时慢，然后逐渐加快。
- ease-out：开始时快，然后逐渐减慢。
- ease-in-out：开始和结束时较慢，中间较快。比ease加速和减速更均匀
- cubic-bezier(n,n,n,n)：自定义贝塞尔曲线
delay :设置过渡动画开始前的等待时间，同样以秒（s）或毫秒（ms）为单位

transition: background-color 0.3s
transition: background-color 0.3s 0.1s
transition: background-color 0.3s ease
transition: background-color 0.3s ease 0.1s

// 各个属性单独定义
transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0.1s;

html标签的修改css案例

定义button样式

定义背景颜色： background-color ： #4CAF50
边框：
2.1. 去除边框： border： none 2.2. 指定圆角： border-radius: 4px
定义外边距和内边距： padding:15px 32px;margin:4px 2px;
定义文字
3.1. 文字颜色： color： white
3.2. 文字大小: font-size : 16px 3.3. 去除文字装饰： text-decoration: none 3.4. 文字居中： text-align: center
设定鼠标指针样式： cursor: pointer
指定行内块元素： display: inline-block
定义悬停效果： buttton:hover{background-color: #45a049}
定义过渡效果： transition-duration: 0.3s

定义input输入框样式

定义宽度： width: 250px
定义边框： 2.1. border: 2px solid #ccc 2.2. border-radius: 4px
定义外边距和内边距 : padding: 12px 20px;margin: 8px 0;
定义文字 : font-size: 16px;
定义聚焦效果： input:focus{border-color:#4CAF50;outline: none;}
定义过度效果: transition: border-color 0.3s ease;

总结

对于css的使用，可能比较重要的就是布局，盒子模型等，后期主要是依靠UI框架已经实现了大部分的样式。

后端上手学习css基础知识

前言