目录
CSS三种样式表
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，比如字体大小，文本颜色等
属性和属性值用英文：分开
多个键对值之间用英文；分开
内部样式表
<head>
<style>
h1{
color: red;
}
</style>
</head>
<body>
<h1>upup</h1>
</body>
外部样式表
1.写标签
<body>
<h1>upup</h1>
</body>
2.新建一个文件css
新建一个css文件，写上
h1{
color: red;
}
利用link或者import引入css文件
3.在头部引入文件
<head>
<link rel="stylesheet" type="text/css" href="css文件的路径">
<style type="text/css">
@import url("css文件的路径")
</style>
</head>
link标签属于XHTNL标签，而import完全使CSS提供的一种方式
link标签无兼容性问题
link标签是当页面被加载的时候同时也会加载，import会等到页面全部被下载完在被加载
行内样式表
行内样式表是在元素标签内的style属性中设定CSS样式，适合修改简单样式。不推荐大量使用。
<div style="color:red;font-size:12px;"> 青春不存在</div>
样式表的优先级
行内样式>内部样式>外部样式 就近原则
import拥有最高的优先级
div{
color:red!import;
}
CSS选择器
选择器对元素进行一对一进行控制
标签选择器
作用：可以把某一类标签全部选择出来，能为页面同类型的标签统一设置样式。
缺点：不能设计差异化样式，只能选择全部的当前标签。
<style>
p {
color:red;
}
div {
color:green;
}
</style>
<body>
<p> 我是女生</p>
<div> 我是男生</div>
</body>
类选择器
如果想差异化选择不同的标签，单独选择一个或者某几个标签，可以使用这个。
语法：结构需要用class属性来调用
<style>
.c1{
color: orange;
}
.c2{
color:red;
}
.c3{
font-size: 20px;
}
</style>
<body>
<div class="c1 c3" >我是class选择器</div>
<p class="c2">我是p</p>
</body>
id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式，CSS中id选择器以“#”来定义。id具有唯一性。
<style>
#box1{
color: blue;
}
#box2{
color: aqua;
}
#box3{
color: brown;
}
</style>
<body>
<div id="box1">1111</div>
<div id="box2">2222</div>
<div id="box3">3333</div>
</body>
通配符选择器
匹配所有的
在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素
清除元素自带的边距
*{
padding:0;
margin:0;
}
群组选择器
<style>
div,p{
color: red;
}
</style>
<body>
<div>1111</div>
<p>222</p>
</body>
后代选择器
外层标签写在前面，内层标签写在后面，中间用空格分隔。
从右到左选择匹配
<style>
div p{
color: red;
}
</style>
<body>
<div>
<p>222</p>
</div>
</body>
伪类选择器
注意：为确保链接伪类选择器要按照顺序来声明
a:link a:visited a:hover a:avtive love hate
a:link 选择所有未被访问的链接 常用
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接 常用
a:avtive 选择活动链接(鼠标按下未弹起的链接)
a:link {
元素：属性；
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
a:hover{
color: green;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
focus伪类选择器用于选取焦点的表单元素
焦点就是光标，一般情况input类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
input:focus{
background-color:yellow;
}
请输入文字<input type="text">
选择器的权重
多个选择器选中了同一个元素且定义了样式，属性发生了冲突，就会依照选择器的权重来执行
标签选择器 < class选择器 < id选择器 < 包含选择器 < 内联样式 < ！import权重最大
css选择器解析规则：
1、权重高低
2、相同权重的选择，样式遵循就近原则
文本属性
定义文本的外观，文本的颜色，装饰文本，文本缩进，行间距等
font-size
font-size属性定义字体大小，谷歌浏览器默认大小为16px，设计图常用自号是12px
p {
font-size:20px;
}
font-family
font-family属性设置定义文本的字体系列。
p {font-family:"微软雅黑";}
div {font-family:Arial,"Microsoft Yahei","微软雅黑";}
font-weight
使用 font-weight属性设置文本字体的粗细
实际开发中使用数字 normal=400 bold=700
<style>
.b{
font-weight: bold;
font-weight:700;
}
</style>
font-style
使用font-style属性设置文本的风格。
normal:默认值
italic:浏览器会显示斜体的字体样式
p {
font-style:italic;
}
color
color定义文本颜色
预定义的颜色值：red,green,blue等
十六进制： #FF0000,#FF6600,#29D794,最常用
RGB代码：rgb(255,0,0)
文本对齐text-align
text-align属性用于设置元素内文本内容的水平对齐方式
center:居中对齐
left:左对齐，默认值
right：右对齐
justfy:两端对齐，多行文本使用
间距
line-height属性用于设置行间的距离，可以控制文字与行间的距离。
letter-spacing:字符间距
word-spacing:单词间距
p {
line-height:20px;
}
装饰文本text-decoration
text-decoration属性规定添加对文本的装饰，可以给文本添加下划线，删除线，上划线等。
underline:下划线，链接a自带下划线
none：默认，没有装饰
overline：上划线
line-through:删除线
文本缩进text-indent
text-indent属性用来指定文本的第一行缩进,可以取负值
div {
text-indent:10px;
}
div {
text-indent:2em;
}
text-transfrom
div{
text-transfrom:captitalize;每个单词首字母大写
text-transfrom:lowercass;每个单词小写
text-transfrom:uppercass;每个单词大写
}
font复合属性
font:foont-style font-weight font-size/line-height font-family
div{
font:italic bold 20px/1em 微软雅黑;
}
1.不能换顺序，各个属性之间以空格隔开
2.不需要的可以省略，但必须保持font-size,font-family属性，否则不起作用
列表属性
无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
有序列表 ol - 列表项的标记有数字或字母
list-style-type
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
disc:实心圆
circle：空心圆
square：实心正方形
none：没有属性
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
list-style-image
list1{
list-style-image：url(img/01.jpg)
}
list-style-position
outside:列表的外面
inside：列表的里面
复合属性list-style 顺序可换
list2{
list-style:none url inside;
}
背景属性
背景颜色
background-color属性定义了元素的背景颜色
属性值：英文，rgb 十六进制
background-color:rgba(255,0,0,0.5) 透明度 0.5半透明
背景图片
background-image
background-image:none/url(绝对路径、相对路径)
背景平铺
如果在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。
repeat-x:背景图片在横线上平铺
repeat-y：背景图片在纵线上平铺
background-repeat {no-repeat/repeat-x/repeat-y}
图片位置
background-positition属性可以改变背景图片在背景中的位置。
background-positition:x y;
<!--x,y指的是坐标可以使用方位名词或者精确单位-->
方位名词：position:top,center,bottom,left,right
精确单位：如果参数是精确单位，那么第一个肯定是x坐标，第二个一定是y坐标；如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中。
混合单位：指定的值为方位名词和精确单位，那么第一个值是x坐标，第二个是y坐标。
background-position: 20px center;
背景图像固定
backgeound-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
背景图像默认的是滚动的
scroll:背景图像是随对象内容滚动
fixed:背景图像固定，固定在浏览器
background-attachment：背景图像固定
背景复合写法
顺序没有强制要求
background：背景颜色，背景图片地址，背景平铺，背景图像滚动，背景图片位置
背景大小
background-size
属性值：
1.像素值
2.百分比
3.cover:背景图像扩展到足够大，使背景图像完全覆盖背景区域，会导致某一部分无法显示
4.contain：完全显示，铺不满盒子，就会留白
浮动
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
right :元素向右浮动
none ：元素不浮动，默认值
left：元素向左浮动
清除浮动
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
高度塌陷：浮动之后高度就会为0
1、写固定高度
2、清除浮动clear
none：允许有浮动对象
right：不允许右边有浮动对象
left：不允许左边有浮动对象
both：不允许有浮动对象
clear:both;
3、浮动元素后加一个盒子，写上style="clear:both;"
4、overflow:hidden,添加给父盒子
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box1{
width: 100px;
height: 100px;
float: left;
background-color: red;
}
.box2{
width: 100px;
height: 100px;
float: left;
background-color: green;
}
.box{
width: 200px;
height: 200px;
clear: both;
background-color: blue;
}
/* .contain{
width: 200px;
height: 100px;
} */
</style>
</head>
<body>
<div class="contain">
<div class="box1"></div>
<div class="box2"></div>
</div>
<div class="box"></div>
</body>
</html>
盒子模型
组成：边框，外边框，内边距，实际内容
内边距padding
内边距就是边框与内容之间的距离。
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
复合属性：
padding:25px 50px 75px 100px;
上填充为25px
右填充为50px
下填充为75px
左填充为100px
padding:25px 50px 75px;
上填充为25px
左右填充为50px
下填充为75px
padding:25px 50px;
上下填充为25px
左右填充为50px
padding:25px;
所有的填充都是25px
边框border
border设置边框
border-style 值:
none: 默认无边框
dotted: 定义一个点线边框
dashed: 定义一个虚线边框
solid: 定义实线边框
double: 定义两个边框。 两个边框的宽度和 border-width 的值相同
groove: 定义3D沟槽边框。效果取决于边框的颜色值
ridge: 定义3D脊边框。效果取决于边框的颜色值
inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
outset: 定义一个3D突出边框。 效果取决于边框的颜色值
border-style属性可以有1-4个值：
border-style:dotted solid double dashed;
上边框是 dotted
右边框是 solid
下边框是 double
左边框是 dashed
border-style:dotted solid double;
上边框是 dotted
左、右边框是 solid
下边框是 double
border-style:dotted solid;
上、下边框是 dotted
右、左边框是 solid
border-style:dotted;
四面边框是 dotted
border-color属性用于设置边框的颜色
name - 指定颜色的名称，如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16进制值, 如 "#ff0000"
可以设置边框的颜色为"transparent"。
也可以设置四边
通过 border-width 属性为边框指定宽度。
外边距margin
margin属性可以有一到四个值:
margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px
margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px
margin:25px 50px;
上下边距为25px
左右边距为50px
margin:25px;
所有的4个边距都是25px
外边距特性：
1、兄弟关系，两个盒子垂直外边距与水平外边距的问题
垂直方向，外边距取最大值
水平方向会进行合并处理
2、父子关系，给子加外边距，但作用于父身上。
1、给父盒子加内边距 padding-top，注意高度计算
2、给父盒子设置边框 border 注意高度计算
3、加浮动，给父或者子加
4、overflow：hidden，给父盒子加
溢出
overflow:visible,hidden,scroll
overflow:visible,显示溢出
overflow：hidden 溢出隐藏，文本裁切
overflow：scroll 滑动滚动条
overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
overflow-x:auto
overflow-y:auto
溢出省略号
white-space
normal:默认值，空白浏览器会被忽略
nowrap：文本不会换行，文本会一直在同一行上继续，直到遇到br标签为止
pre:pre标签，预格式化，保留文本和空格 不换行
pre-wap：预格式化，换行显示
pre-line：显示回车，不显示换行，空格
溢出效果 必须加宽度
div{
white-space:normal; 强制文本在一行显示
overflow:hidden; 溢出内容隐藏
text-overflow:ellipsis; 溢出文本显示省略号
}
元素显示类型
块级元素
1.独占一行
2.高度，宽度，外边距以及内边距都可以控制
3.宽度默认是容器的100%
4.是一个容器及盒子，里面可以放行内或者块级元素。
5.文字类的元素不能使用块级元素
转换为块元素：display:block
display:list-item
行内元素
1.相邻的行内元素在一行上，一行可以显示多个
2.高，宽直接设置是无效的
3.默认宽度就是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素
转换为行内元素：display:inline;
行内块元素
1.和相邻行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个(行内元素特点)
2.默认宽度就是它本身内容的宽度(行内元素特点)
3.高度，宽度，外边距以及内边距都可以控制(块级元素特点)
转换为行内块：display:inline-block;
元素的显示与隐藏
dispaly属性用于设置一个元素如何显示
display：none 隐藏元素，不在占有原来的位置
display：block 除了转换为块级元素之外，同时还有显示元素的意思
定位
定位=定位模式+边偏移
position:
static :静态定位
relative ：相对定位
absolute ：绝对定位
fixed：固定定位
边偏移：
边偏移就是定位的盒子移动到最终的位置，有top bottom left right四个属性
静态定位
静态定位是元素默认定位的方式，无定位的意思。
div { position:static;}
相对定位
相对定位是元素在移动位置的时候，是相对于它原来的位置来说明的。
div{ position:relative;
left:100px;
top；100px;
}
特点：
1.它是相对于自己原来的位置来移动的。
2.原来在标准流的位置继续流动占有，后面的盒子任然以标准流的方式对待，不脱标，继续保留原来的盒子。
绝对定位
div{ position:absolute}
特点：
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
2.有父元素且父元素有定位，父元素
2.如果祖先元素有定位(相对，绝对，固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不在占有原先的位置。(脱标)
4.父亲设置相对定位，儿子设置绝对定位
固定定位
固定定位是元素固定浏览器可视区的位置。
主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。
div{position:fixed}
特点：
1.以浏览器的可视窗口为参照点移动元素。
根父元素没有关系，不随滚动条滚动。
2.固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看作是一种特殊的绝对定位。
粘性定位
可以做浏览器吸顶位置
特点：
position：sticky;
top:10px;
1.以浏览器的可视窗口为参照点移动元素。
2，占有原来的位置
3，必须添加top，bottom，left，right其中一个才有效果
层级
z-index
设置的值越大，层级就越高，在外层显示
设置负值，也有意义，满足一般规律
无定位，z-index就没有意义了
父子关系的定位中，在子盒子中设置z-index负值即可
兄弟关系中的绝对定位，该层级即可，与相对定位一样
绝对定位可以将行内元素设置为块元素
行内元素设置为块级元素：
1、display：block
2、float
3、absolute
水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0;padding: 0;
}
div{
width: 200px;
height: 200px;
background-color: green;
/* margin: 0 auto; */
position: absolute;
top: 50%;
left: 50%;
/* 盒子自己本身高宽的一半 */
margin-top: -100px;
margin-left: -100px;
}
</style>''
</head>
<body>
<div></div>
</body>
</html>
浮动和定位的区别
绝对定位是全脱离，文字不会环绕盒子
浮动是半脱离，文字会环绕盒子
锚点
页面不同区域的跳转
<div id="锚点名字"></div>
<a href="锚点名字"></a>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0;padding: 0;
}
ul{
list-style: none;
position: fixed;
top: 100px;
right: 0px;
}
li{
width: 100px;
height: 50px;
border: 1px solid black;
line-height: 50px;
text-align: center;
}
.div1{
height: 600px;
background-color: red;
}
.div2{
height: 600px;
background-color: green;
}
.div3{
height: 600px;
background-color: blue;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#jd">京东秒杀</a>
</li>
<li>
<a href="#shuang">双十一</a>
</li>
<li>
<a href="#choice">频道优选</a>
</li>
</ul>
<div class="div1" id="jd" >
京东秒杀
</div>
<div class="div2" id="shuang">
双十一
</div>
<div class="div3" id="choice">
频道优选
</div>
</body>
</html>
精灵图
图片整合的优势：
1、通过图片整合来减少服务器的请求次数，从而提高网页的加载速度
2、减小图片的面积
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
width: 103px;
height: 32px;
float: left;
margin: 10px;
background: green url(img/cc1d8d291ea917c0.png);
}
.box1{
background-position: -205px -111px;
}
.box2{
background-position: -205px 0;
}
.box3{
background-position: -205px -74px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
</body>
</html>
高度自适应
高度不写或者写成auto就是自适应
高度写成100%，不适应有内边距
最小高度 min-height：500px 如果里面没有内容，也要占500px，内容多了就继续撑开。
min-height min-width max-height max-width
清除浮动
1.给父盒子加高度，如果浮动过多，换行就会出现问题
2.在浮动元素后面增加空标签 style=clear:both，不利于代码的可读性
3.父盒子加overflower:hidden，文字溢出会被截掉
浮动元素也可以实现高度自适应
伪元素：:after :before
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div::first-letter{
font-size: 30px;
color: red;
}
p::before{
content: 'aaa';
}
</style>
</head>
<body>
<div>I love you</div>
<p>哈哈哈哈哈哈或或或或或</p>
</body>
</html>
伪元素正规方式写两个冒号
清除浮动万能代码
.clearfix::after {
content: "";
display: block;
height: 0;
width:0;
clear: both;
visibility: hidden;
}
display:none 不占位置隐藏
visibility:hidden 占位置隐藏
窗口自适应
盒子根据窗口的大小进行改变
html,body{
height:100%;
}
两栏布局
实现方式：
1、使用浮动
2、宽度进行加减
calc()函数，加减乘除都可以进行运算,运算前后都需要一个空格
width:calc(100% - 200px)
三栏布局
表单
单选框
<div>
<input type="radio" name="aaa">一般
</div>
<div>
<input type="radio" name="aaa">满意
</div>
<div>
<input type="radio" name="aaa">不满意
</div>
点击文字也可以选中，使用label标签，id
checked="checked":默认选中 简写 check
<p>选中性别</p>
<div>
<input type="radio" name="sex" id="man">
<label for="man">男</label>
</div>
<div>
<input type="radio" name="sex" id="male">
<label for="male">女</label>
</div>
复选框
<div>
<input type="checkbox" name="" id="java" checked="checked">
<label for="java">java</label>
<input type="checkbox" name="" id="python">
<label for="python">python</label>
<input type="checkbox" name="" id="js">
<label for="js">js</label>
</div>
上传文件
<div>
<input type="file" name="" id="file">上传文件
</div>
提交
<form action="">
<input type="image" src="">
</form>
隐藏
<input type="hidden" value="带给后端的信息">
禁用
<button disabled="disabled">按钮</button>
<input type="radio" name="" id="" disabled>不满意
<input type="text" readonly value="12345">
下拉菜单
<!--
select属性
size：选择几个
multiple：多选
option属性
value：提供给后端需要的属性
selected：默认选中
-->
<p>下拉菜单</p>
<div>收获地址</div>
<select name="" id="" size="3">
<option value="">北京</option>
<option value="">湖南</option>
<option value="">广州</option>
<option value="">深圳</option>
<option value="">上海</option>
</select>
文本域
<!-- textarea可以随便拉大小
resize:vertical,horizontal 垂直和水平 both 两个反向都可以 none两个反向都不可以 -->
<p>多行文本输入框</p>
<textarea name="" id="" cols="30" rows="10" placeholder="请输入留言">提前设置好的value</textarea>
字段集
<!DOCTYPE html>
<html lang="en">
<head>
<style>
fieldset{
width: 400px;
height: 100px;
border: 3px solid green;
}
</style>
</head>
<body>
<fieldset>
<legend>性别</legend>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</fieldset>
</body>
</html>
H5基础和语法
内容
1、文件扩展符与内容保持不变，以.html结尾
2、DOCTYPE不区分大小写
3、指定字符集编码 <meta charset="UTF-8">
4、不允许写结束标签的元素 img br col hr input link meta embed
5、可以省略结束标记的符号 li dt dd p option thead tbody tfoot tr td th colgroup
6、可以省略全部标记的元素 html head colgroup tbody
7、省略引号 属性值可以使用双引号，也可以使用单引号
新增语义化标签
header
header:表示页面中一个内容区域快，或整个页面的标题
article
表示一块与上下文无关的内容
aside
在article之外的，与article内容相关的辅助信息
footer
footer表示页面中一个内容区域快，或整个页面的标题
nav
nav表示页面中导航链接部分
figure
表示一块独立的流内容，使用figcaption元素委婉其添加标题
main
表示页面中的主要的内容
section
表示页面中的一个内容区块
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0;padding: 0;
}
html,body{
height: 100%;
}
header,footer{
height: 50px;
line-height: 50px;
text-align: center;
background-color: green;
}
section{
height: calc(100% - 100px);
}
nav,aside{
width: 100px;
height: 100%;
background-color: #ccc;
float: left;
}
main{
float:left;
width: calc(100% - 200px);
height: 100%;
background-color: rgb(111, 211, 245);
}
main .article1{
height: 60%;
}
main .article2{
height: 40%;
}
main p{
font-size: 16px;
}
</style>
</head>
<body>
<header>header</header>
<section>
<nav>nav</nav>
<main>
<article class="article1">
<header>article-header</header>
<p>People will inevitably be despised, wronged and wronged when they live in the world; You don't
have to pay attention to it or fight against it. Facts and time can prove everything about you.People will inevitably be despised, wronged and wronged when they live in the world; You don't have to pay attention to it or fight
against it. Facts and time can prove everything about you.</p>
<footer>article-footer</footer>
</article>
<article class="article2">
<header>article-header</header>
<p>People will inevitably be despised, wronged and wronged when they live in the world; You don't
have to pay attention to it or fight against it. Facts and time can prove everything about you.People will inevitably be despised, wronged and wronged when they live in the world; You don't have to pay attention to it or fight
against it. Facts and time can prove everything about you.</p>
<footer>article-footer</footer>
</article>
</main>
<aside>aside</aside>
</section>
<footer>footer</footer>
</body>
</html>
新增音频标签
<!--
controls出现控制栏
loop循环播放
autoplay自动播放，刷新无效果
muted静音播放
-->
<audio src="https://link.hhtjim.com/163/507815173.mp3" controls></audio>
新增视频标签
<video src="" controls></video>
<!--
controls出现控制栏
autoplay自动播放，刷新无效果
loop循环
muted静音播放 可自动播放
poster海报
video可以设置宽高
-->
增强表单
<form action="">
<!-- 1、颜色选择 -->
<input type="color" name="">
<!-- 2、邮箱输入 -->
<input type="email" name="">
<!-- 3、url地址 -->
<input type="url" name="">
<!-- 4、手机号码 用在手机上-->
<input type="tel">
<!-- 5、滑块效果 min最小值 max最大值 value默认值 step滑块的步长-->
<input type="range" name="" min="100" max="200" value="100" step="10">
<!-- 6、数字类型 -->
<input type="number" name="" min="10" max="10" value="4" step="2">
<!-- 7、搜索类型 -->
<input type="search">
<!-- 8、日期选择 -->
选择天数<input type="date">
选择月份<input type="month">
选择周数<input type="week">
选择时间<input type="datetime-local">
<input type="submit">
</form>
选项列表
<!-- 通过列表的id和输入框的list连接起来的 -->
<input type="text" list="mylist">
<datalist id="mylist">
<option value="手机"></option>
<option value="手环"></option>
<option value="手表"></option>
<option value="电脑"></option>
<option value="电话"></option>
</datalist>
其他属性
<form action="">
<!-- autofocus自动聚集，只能有一个表单有这个属性 -->
<!-- pattern 限制正则表达式 -->
姓名<input type="text" autofocus pattern="[0-9][A-Z]{3}">
<!-- required 必填现 不能为空-->
<!-- multiple 可以填多个邮箱，逗号隔开 -->
邮箱<input type="email" required multiple>
<input type="submit">
</form>
css3基础
css3是css技术的升级，css3在兼容css之前的版本之上又新增了其他新的选择器和属性。
层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 子代选择器 > */
.box>li{
border: 1px solid red;
}
/* 选择是类child后面的第一个li 当前元素的后面的第一个兄弟 */
.child+li{
background-color: green;
}
/* 当前元素的后面的所有的亲兄弟 */
.child~li{
background-color: yellow;
}
</style>
</head>
<body>
<ul class="box">
<li>111
<ul>
<li>《深海》</li></li>
<li>《小森林》</li>
<li>《夏洛克》</li>
</ul>
</li>
<li class="child">222</li>
<li>333</li>
<li>444</li>
</ul>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 属性选择器[class,] */
/* [class]{
background-color: green;
} */
/* 带有class的div盒子 */
/* div[class]{
background-color: yellow;
} */
/* 带有class的p */
/* p[class]{
background-color: red;
} */
/* div中class是box1的盒子 完全匹配 */
/* div[class=box1]{
background-color: green;
} */
/* 包含就匹配 */
/* div[class~=box1]{
background-color: aqua;
}
*/
div[class^=b]{
background-color:blue;
}
/* 模糊匹配
class^=b 以b开头的
class$=b 以b结尾的
class*=b 包含b这个字符的 */
</style>
</head>
<body>
<div class="box1">div-111</div>
<div class="box2">div-222</div>
<div class="box1">333</div>
<div>444</div>
<p>p-111</p>
<p class="p1">222</p>
<p class="p2">333</p>
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* ul下的第一个孩子 */
li:first-child{
background-color: green;
}
/* ul下的最后一个孩子 */
li:last-child{
background-color: aqua;
}
/* li的第几个孩子，在括号里面写 */
li:nth-child(3){
background-color: blue;
}
/* 指定奇数个孩子 */
li:nth-child(odd){
color: brown;
}
li:nth-child(2n+1){
color: brown;
}
/* 指定偶数个孩子 */
li:nth-child(even){
font-size: 20px;
}
li:nth-child(2n){
font-size: 20px;
}
/* div p{
background-color: red;
} */
/* 选择唯一一个孩子 */
div p:only-child{
background-color: green;
}
/* 选择没有孩子的 空格也算孩子，必须是里面什么都没有的*/
div{
width: 200px;
height: 100px;
}
div:empty{
background-color: blueviolet;
}
/* root选择器 :root可以代替html */
html,body{
background-color: wheat;
}
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<div>
<p>p1</p>
<p>p2</p>
</div>
<div>
<p>p3</p>
</div>
<div></div>
</body>
</html>
目标伪类选择器
可以配合锚点使用，链接到哪个页面就给哪个页面加上高亮的颜色
div:target{
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div.content{
display: none;
}
div.content:target{
display: block;
}
</style>
</head>
<body>
<div>
<a href="#aaa">aaa</a>
<div id="aaa" class="content">
网易云音乐发现音乐 我的音乐 关注 商城 音乐人 下载客户端 登录 创作者中心 音乐/视频/电台/用户 现在支持搜索MV啦~ 推荐 排行榜 歌单 主播电台 歌手 新碟上架上一首 .
</div>
</div>
<div>
<a href="#bbb">bbb</a>
<div id="bbb" class="content">
网易云音乐发现音乐 我的音乐 关注 商城 音乐人 下载客户端 登录 创作者中心 音乐/视频/电台/用户 现在支持搜索MV啦~ 推荐 排行榜 歌单 主播电台 歌手 新碟上架上一首 .
</div>
</div>
<div>
<a href="#ccc">ccc</a>
<div id="ccc" class="content">
网易云音乐发现音乐 我的音乐 关注 商城 音乐人 下载客户端 登录 创作者中心 音乐/视频/电台/用户 现在支持搜索MV啦~ 推荐 排行榜 歌单 主播电台 歌手 新碟上架上一首 .
</div>
</div>
</body>
</html>
UI状态伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 可用的按钮设置属性 */
/* input:enabled{
background: red;
} */
/* 禁用的按钮 input要设置disabled才能生效 */
/* input:disabled{
background: green;
} */
/* 聚焦焦点的使用 */
input:focus{
color: blue;
}
/* checkbox设置样式要先去掉默认样式 */
input[type=checkbox]{
appearance: none;
width: 20px;
height: 20px;
border: 1px solid black;
}
input:checked{
background: red;
}
/* 选中改变属性 应用于任何标签 */
div::selection{
background-color: yellow;
color:red
}
</style>
</head>
<body>
<form action="">
用户名<input type="text"><br>
密码<input type="password"><br>
记住用户名<input type="checkbox">
<input type="submit">
</form>
<div>网易云音乐（NetEase CloudMusic），是一款由网易开发的音乐产品，是网易杭州研究院的成果，依托专业音乐人、DJ、好友推荐及社交功能，在线音乐服务主打歌单、社交、大牌推荐和音乐指纹，以歌单、DJ节目、社交、地理位置为核心要素，主打发现和分享。</div>
</body>
</html>
否定和动态伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* 除了第一个孩子都选中 否定选择器，不是···· */
/* li:not(:first-child){
background: green;
} */
li:not(:nth-child(even)){
color: blue;
}
li:not(:empty){
background: red;
}
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</body>
</html>
文本阴影
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* text-shadow: 10px 10px 1px red
10px:水平方向位移，可设置负值
10px：垂直方向位移，可设置负值
1px：模糊程度
red：阴影颜色
*/
div{
text-shadow: 10px 10px 1px red,10px -10px 1px green;
/* text-shadow: 10px 10px 1px red; 支持多个阴影写法，用逗号隔开 */
}
</style>
</head>
<body>
<div>hello</div>
</body>
</html>
盒子阴影
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* box-shadow: 10px 10px 10px 5px red,10px -10px 10px yellow;
10px:水平方向位移，可设置负值
10px：垂直方向位移，可设置负值
1px：模糊程度
5px:阴影大小
red：阴影颜色
insert:内阴影
*/
div{
width: 100px;height: 100px;
background: green;
margin: 0 auto;
box-shadow: 10px 10px 10px 5px red inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
圆角边框
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/*
border-radius:接收的值为px或者%
一个值：四边都是一样的
两个值：左上右下 右上左下
三个值：左上，左下右上，右下
四个值：左上，右上，右下，左下
一个方向：10px 0 0 0;或者border-top-left-radius：10px; 左上
*/
.box1{
width: 120px;
height: 120px;
background: green;
margin: 0 auto;
/* border-radius: 50px; */
/* 水平方向与垂直方向 */
/* border-radius: 30px/60px; */
/* border-radius: 10px 30px 20px 10px/10px 20px 30px 40px; */
/* 正方形设置圆形 设置盒子的一半，考虑padding border*/
border-radius: 60px;
/* 不用考虑盒子模型 */
border-radius: 50%;
/* 在长方形中设置圆形 要设置具体值*/
}
/* 半圆 长方形 宽是高的两倍*/
.box2{
width: 200px;
height: 100px;
background-color: green;
border-radius: 150px 150px 0 0;
}
/* 扇形 正方形*/
.box3{
width: 200px;
height: 200px;
background-color: red;
border-radius: 200px 0 0 0;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
字体引入
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@font-face {
font-family: xh;
src: url(font/Mayan.ttf);
}
div{
font-family: xh;
font-size: 30px;
}
</style>
</head>
<body>
<div>哈哈哈哈abc</div>
<p>哈哈哈abc</p>
</body>
</html>
怪异盒模型
盒子模型分由外边距（margin）、边框（border）、内边距（padding）和内容（content）四部分组成。
标准盒模型是指在CSS中设置width（宽）、height（高）属性时，是给内容（content）区域设置；
怪异盒模型是指在CSS中设置width（宽）、height（高）属性时，是给边框（border）、内边距（padding）和内容（content）设置。
如果给盒子模型设置200 * 200的宽高,标准盒模型的content区域为200 * 200, 而怪异盒模型则是content、padding、border三个区域加起来才是200 * 200。
/* 设置盒模型为怪异盒模型 */
box-sizing: border-box;
弹性盒
弹性盒是一种新的布局方式，适合移动端布局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100 auto;
/* 添加弹新盒的方式 */
display: flex;
}
.box div{
width: 30px;
height: 30px;
border: 1px dashed red;
/* 居中显示 */
margin: auto;
}
</style>
</head>
<body>
<!--
给父盒子添加弹性盒子：
1、子元素默认横向排列
2、子元素是行内元素变成块级元素
-->
<div class="box">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
弹性盒修改主轴方式
默认情况下，主轴是水平方式的横向排列，侧轴是垂直排列。但是主轴也可以是垂直排列，侧轴水平方向排列。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100 auto;
/* 添加弹新盒的方式 */
display: flex;
/* flex-direction: column; */
}
/*
flex-direction: column
column:竖直排列
row：水平排列
row-reverse：水平反向排列
column-reverse：垂直反向排列
*/
.box div{
width: 30px;
height: 30px;
border: 1px dashed red;
/* 居中显示 */
/* margin: auto; */
}
</style>
</head>
<body>
<!--
给父盒子添加弹性盒子：
1、子元素默认横向排列
2、子元素是行内元素变成块级元素
-->
<div class="box">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
主轴侧轴对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid black;
margin: 100 auto;
/* 添加弹新盒的方式 */
display: flex;
/* flex-direction: column; */
justify-content: space-evenly;
align-items: flex-end;
}
/* justify-content: flex-start; 调整主轴对齐方式
flex-end 低端对齐
center 中间对齐
space-between两端对齐
space-around距离环绕
align-items: flex-start; 调整侧轴对齐方式
flex-end
center
*/
.box div{
width: 30px;
height: 30px;
border: 1px dashed red;
/* 居中显示 */
/* margin: auto; */
}
</style>
</head>
<body>
<div class="box">
<div>111</div>
<div>222</div>
<div>333</div>
</div>
</body>
</html>
拆行与间距
弹性盒子内容过多的情况下，不会自动换行，而是一直挤压，在一列排序
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid red;
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
/*
折行
flex-wrap: wrap;
align-content: center;控制折行距离
flex-start
flex-end
flex-around
center
*/
div{
width: 50px;
height: 40px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
order:1
order值越大盒子就越往后面跑
flex:1 占满剩余空间
移动端布局
css像素值：即设备的独立像素
物理分辨率：设备像素(出厂规定的)
css像素和物理分辨率的关系：2倍、3倍多的关系
设备像素比：物理像素/css像素
设计稿提供的是物理像素比，为了更加清晰的画面，然后在去转换为css像素; 提供一份机型的设计值
理想视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
移动端横向布局
给父盒子加display:flex;
给子盒子加：flex-shrink:0;
多列布局
比如瀑布流效果
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
height: 300px;
background: yellow;
/* 显示的列数 */
column-count: 5;
/* 调整间距 */
column-gap: 100px;
/* 列边框 */
column-rule: 2px solid red;
/* 列高度统一 auto(父盒子占满) balance*/
column-fill: balance;
/* 调整列宽 */
column-width: 500px;
}
div h1{
column-span: all;
text-align: center;
}
</style>
</head>
<body>
<div>
<h1>我是标题</h1>
v-show 和 v-if的区别，v-show 和 keep-alive 的区别
答案：v-show是 CSS display 控制显示和隐藏
v-if 是组件真正的渲染和销毁，而不是显示和隐藏
频繁切换显示状态用 v-show，否则用 v-if
keep-alive 是在vue 框架层级进行的JS 对象渲染
一般简单的可用 v-show，
复杂一点的一般用 keep-alive，keep-alive 通常用于 tab 的切换
</div>
</body>
</html>
响应式布局
响应式布局：兼容pc端和移动端
方式：pc优先，移动优先
媒体查询
媒体查询可以让我们根据设备显示的特性，比如视口限制，屏幕比例，设备方向，横向纵向为其设定css样式 找到断电是关键
设备类型：
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等
speech 用于屏幕阅读器
关键字
not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。
all:所有设备
在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色
@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}
优点：面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题
缺点：兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长
/* pc客户端或者更大屏幕 */
@media only screen and (min-width1029px){}
/* 竖屏 */
@media screen and (orientation:bortrait) and(max-width:720px){}
<style>
*{margin: 0;padding: 0;}
body{
display: flex;
flex-wrap: wrap;
}
div{
height: 100px;
background-color: green;
border: 2px solid red;
box-sizing: border-box;
}
/* 竖屏 */
@media screen and (orientation:portrait){
div{
width: 33.33%;
}
}
/* 横屏 */
@media screen and (orientation:landscape) {
div{
width: 20%;
}
}
</style>
em与rem
px:像素值
em：相对单位，相对于父元素的字体大小
rem：相对单位 相对于根元素html字体大小
单位转换：插件px to rem
<script>
document.documentElement.style.fontSize=document.documentElement.clientWidth/750 * 100 +'px'
// fontsize=当前设备的css布局宽度/物理分辨率(设计稿的宽度)*基准fontsize
</script>
vw和vh
vh:视口的高度 view-height
vw:视口宽度 view-width 375px = 100vw
渐变
线性渐变
一个方向到另外一个方向
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
/* 1、支持多颜色渐变 */
/* 2、支持方向，to left to bottom to right to top to bottom right*/
/* 3、支持角度的写法 background: linear-gradient(0deg,red,green);*/
width: 100px;
height: 100px;
background: linear-gradient(red,green);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
径向渐变
一个点向四周的颜色渐变
<!DOCTYPE html>
<html lang="en">
<head>
div{
width: 100px;
height: 100px;
/*
circle 渐变为最大的圆形，ellipse 根据元素形状渐变
不同尺寸的渐变：
closest side:最近边，farthest：最远边，closest-corner最近角，farthest-corner：最远角
background: -webkit-radial-gradient(60% 40%,closest-side,red,green,blue);
-webkit-前缀：浏览器兼容问题
*/
background: radial-gradient(red 20%,green 50%,blue 70%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
重复渐变
<!DOCTYPE html>
<html lang="en">
<head>
div{
width: 100px;
height: 100px;
background: repeating-linear-gradient(blue,green 20%,red 50%);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
动画
过渡
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
width: 100px;
height: 200px;
background: green;
/*
transition: height 2s;
all:所有的
2s:时间
linear:匀速 默认为匀速 ease:慢速开始，然后变快，然后慢速结束 ease-in:慢速开始 ease-out:慢速结束 ease-in-out:规定以慢速开始和结束的
1s:延迟
*/
transition: all 2s linear 1s;
}
div:hover{
height: 600px;
background-color: bisque;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
/* 单一属性值 */
transition-property: height background;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 3s;
2D属性
设置left属性值会频繁的造成浏览器回流重排，而transform和opacity不会，所以动画效果会更好。
平移
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
width: 200px;
height: 200px;
background: red;
transition: all 2s;
margin: 10px auto;
}
div:hover{
/* transform: translateX(100px)translateY(100px); */
transform: translate(100px,100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
缩放
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
width: 200px;
height: 200px;
background: red;
transition: all 2s;
margin: 10px auto;
transform-origin: left top;
}
/* div:hover{
transform: translateX(100px)translateY(100px);
transform: translate(100px,100px);
} */
div:hover{
/*
负值-倒向放大效果
支持x轴和y轴放大 scaleX()
中心位置可以改变 transform-origin: left top;
*/
transform: scale(2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
旋转
transform: rotate(10deg);
rotate 中心 === rotateZ
正值：顺时针
负值：逆时针
多属性值
transform可以写多个属性，位移和旋转和放大，缩小，用空格隔开，要注意书写位置
倾斜
div{
width: 200px;
height: 200px;
background: red;
font-size: 50px;
border: 1px solid black;
line-height: 200px;
text-align: center;
margin: 0 auto;
transform: skewX(-30deg);
/* skewX 正值，拽右下角，往右边，负值，拽左下角，往左边
skewY
skew(X,Y)
*/
}
animation动画
关键帧动画
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
width: 200px;
height: 200px;
background: red;
animation: xhrun 10s linear infinite;
}
/* infinite 无限次执行动画播放 */
/* 声明动画 */
/* @keyframes xhrun {
from{
width: 200px;
height: 200px;
background: red;
}
to{
width: 400px;
height: 400px;
background: green;
}
} */
@keyframes xhrun {
0%{
width: 200px;
height: 200px;
background: red;
}
25%{
width: 500px;
background: goldenrod;
}
50%{
height: 400px;
background: yellowgreen;
}
75%{
height: 100px;
background: palevioletred;
}
100%{
width: 400px;
height: 400px;
background: green;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
动画单一属性
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
width: 200px;
height: 200px;
background: red;
animation-name: run;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 3s;
animation-iteration-count: infinite;
animation-play-state: running;
animation-direction: normal;
animation-fill-mode: none;
}
/*
animation-name动画名字
animation-duration动画时间
animation-timing-function动画过渡类型
animation-delay延迟时间
animation-iteration-count循环次数 infinite无限次
animation-play-state动画运行状态 running(默认) paused(一般和鼠标移入配合使用)
animation-direction: normal;动画方向 reverse反方向运动 alternate正常方向，交替运行 alternate-reverse反方向交替运行
animation-fill-mode: none;动画填充模式，默认为none;forwards保留最后画面，backwards保留初始画面
*/
@keyframes run {
from{
width: 200px;
height: 200px;
background: red;
}
to{
width: 400px;
background: greenyellow;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
animate动画库
animate.css动画演示网址 http://www.dowebok.com/demo/2014/98/
3D平移
2D:在屏幕上水平和垂直交叉的X轴和y轴
3D:在垂直与屏幕的反向，相对于2D多出一个Z轴
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width: 500px;
height: 500px;
border: 5px solid black;
transform-style: preserve-3d;
/* 构建3D舞台 默认是2D*/
position: relative;
margin: 0 auto;
/* transform: rotateY(30deg); */
perspective: 900px;
/* 景深 设置物体与屏幕的距离 */
}
.center{
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
background: green;
/* transform: translateZ(100px); */
transform: translate3d(0,0,100px);
}
</style>
</head>
<body>
<div class="box">
<div class="center"></div>
</div>
</body>
</html>
3D旋转
.box{
width: 500px;
height: 500px;
border: 2px solid red;
display: flex;
align-items: center;
transform-style: preserve-3d; 构建3D舞台
transform: rotateX(30deg);
}
.center{
width: 200px;
height: 200px;
background: green;
margin:auto;
transform: rotateY(30deg);
transform: rotate3d(1,1,1,30deg);
/* 前面三个取值是0-1 x，y，z都旋转30deg */
}
3D缩放
scaleZ()和scale3D()函数单独使用没有效果，需要配合其他的函数一起使用才有效果
网格布局
flex布局是轴线布局，网格布局是将容器划分为行和列，产生单元格，然后指定项目的单元格。
容器：最大的盒子即父元素
项目：最大盒子里面的内容
行和列：容器里面的水平区域称为行，垂直区域称为列
当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。
行列属性
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
/* 1、固定值 */
/* grid-template-rows: 200px 200px 200px;
grid-template-columns: 200px 200px 200px; */
/* 2、百分比 */
/* grid-template-rows: 25% 25% 25% 25%;
grid-template-columns: 25% 25% 25% 25%; */
/* 3、repeat */
/* grid-template-rows: repeat(3,33.33%);
grid-template-columns: repeat(3,33.33%); */
/* 4、repeat auto-fill 自动计算*/
/* grid-template-rows: repeat(auto-fill,33.33%);
grid-template-columns: repeat(auto-fill,33.33%); */
/* 5、fr片段 自适应*/
/* grid-template-rows: 100px 1fr 300px;
grid-template-columns: 100px 1fr 300px; */
/* 6、最小最大 */
/* grid-template-rows: minmax(100px,200px) 200px 100px;
grid-template-rows: 200px 200px 200px; */
/* 7、auto 自动占满剩余空间*/
grid-template-rows: 100px 200px auto;
grid-template-columns: 100px auto 200px;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
间距
.box{
width: 600px;
height: 600px;
border: 5px solid gray;
display: grid;
grid-template-rows: 200px 180px 180px;
grid-template-columns: 200px 180px 180px;
/* row-gap: 20px;
column-gap: 20px; */
gap: 20px 20px;
}
.box div{
background: green;
}
区域命名与合并
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width: 600px;
height: 600px;
display: grid;
border: 5px solid gray;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
grid-template-areas: 'a a c'
'd d f'
'g h i';
}
.box div:nth-child(1){
grid-area: a;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
/* 合并之后要删除掉多余的盒子 */
<div>9</div>
</div>
</body>
</html>
对齐方式
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width: 600px;
height: 600px;
border: 2px solid green;
display: grid;
grid-template-rows: repeat(3,100px);
grid-template-columns: repeat(3,100px);
/* 改变顺序方向 */
/* grid-auto-flow: column; */
justify-content: center;
align-content: center;
justify-items: center;
align-items: center;
/* 复合写法 */
place-content: center center;
place-items: center center;
/* start:对齐容器的起始边框
end:对齐容器的结束边框
center:容器内部居中
stretch:项目大小没有指定时，拉伸占满整个网格容器
space-around：每个项目两侧的间隔相等
space-between:项目与项目的间隔相等，项目与容器之间没有间隔
pace-evenly:项目与项目的间隔相等，项目与容器边框之间也是同样长度间隔
*/
}
.box div{
border: 1px solid gold;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
项目属性
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.box{
width: 600px;
height: 600px;
border: 1px solid green;
display: grid;
grid-template-rows: repeat(3,200px);
grid-template-columns: repeat(3,200px);
}
.box div:nth-child(1){
/* grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2; */
/* 简写方法 */
grid-column: 2/4;
grid-row: 1/3;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
浙公网安备 33010602011771号