一.网格布局
在javascript中有许多布局结构，不同的布局有着不同的要求，可以了解了解弹性布局，网格布局，父容器自动计算（嵌套标签）他们的不同点
1.布局有哪些呢？认识多种布局
1.弹性布局： display: flex; 主轴、侧轴
2.响应式布局： @media 随屏幕变化有不同的布局效果
3.流式布局：（百分比布局） -->指的是移动端布局
4.网格布局：设置父元素display:grid 控制子元素位置 ，有明显的行与列
5.pc端布局：电脑端，有版心区，通栏显示区
2.下面重点介绍网格布局
/* 把ul标签（作为父元素）做成网格容器 */
ul{
display: grid;
/* 设置多少行，每行的高度是多少 */
/* grid-template-rows: 100px; */
grid-template-rows: repeat(1,100px);
/* 设置多少列，每列的宽度 是多少 */
/* grid-template-columns: 100px; */
grid-template-columns: repeat(1,100px);
/* 设置li标签的位置居中 */
justify-content: center;
align-content: center;
}
ul li {
background-color: green;
}效果如下：
<style>
.wrap{
margin-top: 20px;
width: 320px;
height: 320px;
background-color: #ccc;
/* 设置网格盒子 */
display: grid;
/* 3行3列 */
grid-template-rows: repeat(3,100px);
grid-template-columns: repeat(3,100px);
/* 1 : 1 : 1 */
/* grid-template-columns: repeat(3,1fr); */
/* 1 : 2 : 1 */
/* grid-template-columns: 1fr 2fr 1fr; */
/* grid-template-columns: 100px 100px 100px; */
/* 设置间距 行之间 列之间 */
row-gap: 10px;
column-gap: 10px;
/* 设置网格标记 可以换位置 */
grid-template-areas: 'a b c '
'e f g'
'h i j';
}
.bg-red{
background-color: red;
/* 可以设置该属性交换位置 */
grid-area: j;
}
.bg-green{
background-color: green;
grid-area: h;
}
.bg-blue{
background-color: blue;
grid-area: a;
}
.bg-yellow{
background-color: yellow;
grid-area: i;
}
.bg-orange{
background-color: orange;
}
.bg-deepskyblue{
background-color: deepskyblue;
}
.item{
/* background-color: green; */
border: 1px solid red;
}
</style>
<div class="wrap">
<div class="item bg-red"></div>
<div class="item bg-green"></div>
<div class="item bg-blue"></div>
<div class="item bg-yellow"></div>
<div class="item bg-orange"></div>
<div class="item bg-deepskyblue"></div>
</div>效果如下： 
二.css3新样式
1.css变量
/* 1) css中定义变量 */
:root {
--color: #ff5500;
--fontSize: 100px;
--bgColor: pink;
--borderRadius: 10px;
--marginBottom: 20px;
}
//使用设置的变量
.box {
font-size: 45px;
font-weight: bold;
/* 2) 使用变量 */
margin-bottom: var(--marginBottom);
}
.box {
color: var(--color);
}2.背景
/* 1） 背景 */
.box-1 {
width: 100px;
height: 100px;
border: 20px dashed red;
padding: 50px;
background-image: url(./images/one1.jpg);
background-repeat: no-repeat;
/* 设置图片从边框开始渲染 (内边距、内容), 背景图的起点*/
background-origin: border-box;
/* background-origin: padding-box; */
/* background-origin: content-box; */
/* 把边框部分的背景图裁剪掉 (内边距、内容)*/
background-clip: content-box;
/* 处理精灵图的背景，可以使用这些新增背景属性 */
}3.边框图片
/* 2）边框背景图 */
.box-2 {
width: 200px;
height: 400px;
margin: 50px;
background-color: #ccc;
border: 20px solid transparent;
/* 设置标签边框图片 */
border-image-source: url(./images/border-image2.png);
/* 裁剪边框背景图 */
border-image-slice: 60 60 60 60;
/* 设置边框背景图平铺repeat，round(推荐) repeat */
border-image-repeat: round;
/* 设置边框背景图的尺寸 */
border-image-width: 20px;
/* 设置边框背景图的位置 */
border-image-outset: 10px;
}4.阴影(文本阴影 盒子阴影)
/* 3) 阴影 */
/* 盒子阴影 */
.box-3 {
margin: 50px;
width: 100px;
height: 100px;
/* 设置阴影 （offsetX,offsetY,模糊度, 延伸(可选) , 阴影颜色, 内阴影(可选)） */
/* offsetX: 正数 水平偏右，否则反之 */
/* offsetY: 正数 水平偏下，否则反之 */
/* box-shadow: 0px 0px 10px red ; */
box-shadow: 0px 0px 10px 5px red inset;
}
/* 文本阴影 */
.box-4 {
width: 600px;
height: 100px;
background-color: #ccc;
text-align: center;
line-height: 100px;
font-size: 50px;
font-weight: bold;
color: #f50;
/* 文本阴影 */
/* 设置阴影 （offsetX,offsetY, 模糊度, 阴影颜色） */
text-shadow: 1px 1px 1px white , -1px -1px 1px green;设置文字阴影
在设置文本阴影时，还可以对文字进行设置字体样式，引入字体，定义字体
/* web字体 */
/* 1）定义字体 */
@font-face {
font-family: abc;
src: url(./fonts/abc.ttf);
}
/* 2）使用字体 */
font-family: abc;5.渐变（线性渐变 径向渐变）
//线性渐变
.box-5 {
width: 200px;
height: 200px;
/* 渐变(background 或 background-image) */
/* background-image: linear-gradient(
to right ,
red,
green,
yellow,
purple
); */
/* deg: 角度单位 */
/* background-image: linear-gradient(
135deg,
red,
green,
yellow,
purple
); */
background-image: linear-gradient(
135deg,
red 20%,
green 20%,
green 40%,
yellow 40%,
yellow 60%,
purple 60%,
purple
); /* 径向渐变 （从中心往四周辐射进行颜色的改变）*/
.box-6 {
width: 200px;
height: 200px;
margin-top: 10px;
/* center left top right bottom */
background-image: radial-gradient(
at 100px 100px,
red,
green,
yellow,
purple
);
}