css的基础
一、css语法
1)每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值;
2)属性必须放在花括号中，属性与属性值用冒号连接。
3)每条声明用分号结束。
4)当一个属性有多个属性值的时候，属性值与属性值不分先后顺序，用空格隔开。
5)在书写样式过程中，空格、换行等操作不影响属性显示。
二、css的写法
1.外部样式的创建
<!DOCTYPE html>
<html>
<head> （第二步：新建一个css文件）
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- css外部引入方式1 --> （第三步：利用link或者import引入css文件）
<link rel="stylesheet" type="text/css" href="css文件路径">（relation 定义关联性， stylesheet 样式表）
<!-- css外部引入方式2 -->
<style type="text/css">
@import url("css文件的路径")
</style>
</head>
<body>
<div>我是div</div> （第一步：创建对象）
</body>
</html>
2.行内样式的创建
<!DOCTYPE html>
<html>
<head> （第二步：新建一个css文件）
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- css外部引入方式1 --> （第三步：利用link或者import引入css文件）
<link rel="stylesheet" type="text/css" href="css文件路径">（relation 定义关联性， stylesheet 样式表）
<!-- css外部引入方式2 -->
<style type="text/css">
@import url("css文件的路径")
</style>
</head>
<body>
<div>我是div</div> （第一步：创建对象）
</body>
</html>
3.优先级
important>行内>内部>外部
三、选择器
1.类选择器
class选择器/类选择器
语法: :class名{属性:属性值;}
说明:
A)当我们使用class选择符时，应先为每个元素定义一个class名称
B) class选择符的语法格式是:如:
< div class= "top" > < /div>
.top{width:200px; height: 100px; background:green;}
用法: class选择符更适合定义- -类样式;
2.id选择器
语法: #id名{属性:属性值;}
说明:
A)当我们使用id选择符时，应该为每个元素定义一个id属性
如: < div id="box"> < /div>
B) id选择符的语法格式是"#" 加上自定义的id名
如: #box{width:300px; height:300px;}
C)起名时要取英文名，不能用关键字: (所有的标记和属性都是关键字)
如: head标记
D) 一个id名称只能对应文档中一个具体的元素对象。(唯一性)
3. *通配符/通配选择器
语法: * {属性:属性值;}
说明:通配选择符的写法是"*" ，其含义就是所有元素。
*{margin:0; padding:0;}代表清除所有元素的默认边距值和填充值;
4.群组选择器
语法:选择符1,选择符2,选择…属性:属性值;}例: #top1, #nav1 ，h1 {width:960px;}
说明:当有多个选择符应用相同的声明时，可以将选择符用", ”分隔的方式，合并为一组。
margin:0 auto;实现盒子的水平居中
5.包含选择器/后代选择器
语法:选择符1 选择符2 {属性:属性值;}
说明:含义就是选择符1中包含的所有选择符2;
用法:当我的元素存在父级元素的时候，我要改变自己本身的样式，可以不另加选择符，直接用包含选择器的方式解决。
如:结构:
<ul class= "list" >
<li></i>
<li></li>
<li></li>
</ul>
样式: .list li{background:red;}
5.伪类选择器
语法:
- a: link{属性:属性值;}超链接的初始状态;
- a: visited{属性:属性值;}超链接被访问后的状态;
- a: hover{属性:属性值;}鼠标悬停，即鼠标划过超链接时的状态;
- a: active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态;
Link–visited–hover–active.
说明:
A)当这4个超链接伪类选择符联合使用时，应注意他们的顺序，正常顺序为:
a:link,a:visited, a:hover,a:active,错误的顺序有时会使超链接的样式失效;
B)为了简化代码，可以把伪类选择符中相同的声明提出来放在a选择符中;
例如:a{color:red;} a:hover{color:green;}表示超链接的初始和访问过后的状态一样,鼠标划过的状态和点击时的状态一样。
6.选择权问题
当多个选择器，选中的是同一个元素，且都为他们定义了样式，如果属性发生冲突了，会选择权重高的来执行
选择越具体，优先级越大
四、属性
文本属性
1.font-size，字体大小
单位是px，浏览器默认是16px,设计图常用字号是12px
2.font- family，字体
当字体是中文字体、英文字体中有空格时，需加双引号;多个字体中间用逗号链接,先解析第1个字体，如果没有解析第2个字体以此类推
3.color颜色
color: red; color: #ff0; color (255,0,0); 0-255
4.font-weight，加粗
- font-weight: bolder(更粗的)/bold (加粗) /normal (常规)
- font-weight: 100-900; 100- 500不加粗600- 900加粗
5.font-style，倾斜
- font- style: italic(斜体字)/oblique (倾斜 的文字)/normal (常 规显示).
6.text-align文本水平对齐
- text- align:left; 水平靠左
- text-align：right; 水平靠右
- text - align：center; 水平居中
- text- align： justify; 水平2端对齐，但是只对多行起作用。
7. line-height行高
line -height的数据=height的数据，可以实现单行文本垂直居中。
8.text-indent 首行缩进
- text-indent 可以取负值;
- text-indent 属性只对第一行起作用。
9. letter-spacing
字间距控制文字和文字之 间的间距。
10.text-decoration文本修饰
text-decoration:none 没有 / underline 下划线 / overline 上划线 / line-through 删除线
11.font文字简写
font是font - style font-weight font-size / line- height font - family的简写。
font: italic 800 30px/80px “宋体”; 顺序不能改变，必须同时指定font-size和font- family属性时才起作用。
12.检索大小写
- text-transform：capitalize；（每个单词首字母大写）
- text-transform：lowercase；（所有单词小写）
- text-transform：uppercase；（所有的字母大写）
背景属性
1. background-color
背景颜色 background-color: red.
background-color: rgb(255,0,0);
background-color: rgba(255,0,0,0.5);(0.5代表透明度）
2. background-image
背景图片 background - image: URL("图片位置")；
3. background-repeat
背景图片的平铺 background-repeat: no-repeat / repeat / repeat-x / repeat-y;
4. background-position
背景图片的定位 background-position: a b ;
a b:
- 20px 20px
- 10% 10%
- left center right
top center bottom
水平位置；垂直位置；可以给负值
5. background-size 背景大小
background-size：a b;
a b:1.100px 100px
2.100% 100%
3.cover(等比例覆盖)把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
也许无法显示在背景定位区域中。
4.contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区
域。铺不满盒子，会有留白。
6. background-attachment
背景图片的固定 background-attachment: scroll (滚动)/ fixed (固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了) ;
7./*复合语法:
1.用空格隔开
2.顺序可以换
3.可以只取一个值，“放在 后面能覆盖前面的值.
backgourd-size属性只能单独用
background: url(img/1.jpg) no-repeat center fixed yellow;
浮动属性
1.浮动
1.float float: left; 元素靠左边浮动
2.float float: right; 元素靠右边浮动
3.float float: none; 元素不浮动
浮动的作用1:定义网页中其它文本如何环绕该元素显示
浮动的作用2:就是让竖着的东西横着来
2.清浮动
1.clear Clear: none;允许有浮动对象
2.clear Clear: right;不允许右边有浮动对象
3.clear Clear: left; 不允许左边有浮动对象
4.clear Clear:both;不允许有浮动对象
清除浮动只是改变元素的排列方式，该元素还是漂浮着，不占据文档位置。
**
例子：
**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
height: 200px;
width: 200px;
background-color: rgb(14, 40, 63);
float: left;
}
.box2{
height: 200px;
width: 200px;
background-color: yellow;
float: left;
}
.box{
height: 300px;
width: 300px;
background-color: violet;
/* clear: left; */(第二种方法)
}
.container{
/* height: 200px; */(第一种方法)
/* overflow: hidden; */(第四种方法)
}
/*
1.写固定高度
2.清浮动 clear：none/left,right,both。
3.当前浮动元素后面补一个盒子，不设置高度， claer：both；
4.overflow：hidden，让浮动元素计算高度。
*/
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div style="clear:both"></div>(第三种方法)
</div>
<div class="box"></div>
</body>
</html>
五、盒子模型
解释
- 盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容、区、这就是盒模型。
1.内边距
padding:30px;
padding:20px 30px;
padding:10px 20px 30px;
padding:10px 20px 30px 40px;
内边距
1个值，4个方向一样
2个值，上下，左右
3个值，上，左右，下
4个值，上，右，下，左
padding-方向: top bottom left right（代表哪个方位的边距）
2.边框
border :10px solid red;（边框的粗细、样式、颜色）
样式：solid（实线） double（双实线） dashed（线段） dotted（点状线）
border-方向: top bottom left right（代表哪个方位的边距）
border-width: （边框宽度）
border-style: （边框样式）
border-color: （边框颜色）
3.外边框
- margin-方向4个方向
- 背景色蔓延?没有
- *{margin:0}
- 外边距负值?支持.
- 屏幕居中? 可以 ！ margin:0 auto; 横向居中
4.特性问题
-
兄弟关系，两个盒子垂貞外边距与水平外边距问题
1.垂直方向,外边距取最大值。
2.水平方向，外边距会进行合并处理 -
父子关系，给子加外边距，但作用于父身上了,怎么解决?
1.子margin- top===>父的padding-top,注意高度计算.
2.给父盒子设置边框(border:)
3.加浮动
4.overflow: hidden. BFC(构建一个块级格式化)
5.溢出属性
说明:
overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
visible:默认值，溢出内容会显示在元素之外;
hidden:溢出内容隐藏，文本裁切。
scroll:滚动，溢出内容以滚动方式显示;
auto:如果有溢出会添加滚动条，没有溢出正常显示;
inherit:规定应该遵从父元素继承overflow属性的值。
overflow-x: X轴溢出；（auto）
overflow-y: Y轴溢出；（hidden）
6.空余空间属性
说明:
white-space: normal/nowrap/pre（显示空格，回车，不换行）/pre-wrap （显示空格，回车，换行）/pre-line（显示空格，不显示回车，换行） /inherit该属性用来设置如何处理元素内的空白;
normal:默认值，空白会被浏览器忽略,
nowrap:文本不会换行，文本会在同- -行上继续,直到遇到< br/ >标签为止;
7.省略号显示
**说明：**
text-overflow: clip/ellipsis;
clip:默认值,不显示省略号(.. ）;
ellipsis:显示省略标记; .
**当单行文本溢出显示省略号需要同时设置以下声明:**
- 容器宽度: width: 200px;
- 强制文本在一行内显示: white-space: nowrap;
- 溢出内容为隐藏: overflow: hidden;
- 溢出文本显示省略号: text-overflow: ellipsis;
8.元素类型的分类
- 块元素
A)块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域。
B)默认情况下，块状元素都会占据一行;默认情况下，块状元素会按顺序自上而下排列。
C)块状元素都可以定义自己的宽度和高度。
D)块状元素一般都作为其他元素的容器，它可以容纳其它内联元素和其它块状元素。我们可以把这种容器比喻为一个盒子
列如: div p（可以放文本，不能放块级元素） ul li ol li dl dt dd h1-h6等
display: block; 将此元素设置成块级元素
display: none; 不显示在网页上
display:inline-block; 对一个对象指定inline-block属性，但对象内容作为block对象呈现。
小知识
a.hover：
选择鼠标指针浮动在其上的元素，并设置其样式
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div{
width: 100px;
height: 100px;
background: greenyellow;
} */
.hide{
display: none;（鼠标不碰触不显示）
}
.box:hover ul{
display: block;（数遍碰触时显示）
}
</style>
</head>
<body>
<div class="box">军事
<ul class="hide">
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul>
</div>
</body>
</html>
- 行内（内联）元素
A)内联元素的表现形式是始终以行内逐个进行显示; 横着排
B)内联元素没有自己的形状，不能定义它的宽和高，它显示的宽度、高度只能根据所包含内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状;
C)内联元素也会遵循盒模型基本规则，但是对于margin和padding个别属性值不生效
例如: a b em i span strong等
行内块. display: inline-block;
span行内元素 只能设置边距的左右边距,不能设置上下边距.
display：none（此元素不会显示）/block（此元素将显示为块级元素，此元素前后会带有换行符）/inline (默认。此元素会被显示为内联元素，元素前后没有换行符。0)
9.定位
图解
子绝父相
透明度：opacity: 0.7; 代表图片的透明度
另一种透明度：rgba(252, 1, 1 ,0);（rgba中 a 代表透明度）
定位与浮动的区别：
float:半脱离，文字环绕
absolute:全脱离，不会出现文字环绕效果
10.锚点
解释：
锚点作用:页面不同区域的跳转,使用a链接
<a href="#"> 京东秒杀 </a>
<div id="a"> 京东秒杀 </div>
11.精灵图
CSS Sprites的原理(图片整合技术) (CSS精灵)/雪碧图
一、将导航背景图片,按钮背景图片等有规则的合并成一张背景图， 即将多张图片合为一张整图，然后用"background-position"来实现背景图片的定位技术。
二、图片整合的优势:
1)通过图片整合来减少对服务器的请求次数，从而提高面的加载速度。
2)通过整合图片来减小图片的体积。
12.自适应
- 宽高自适应
网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适宽度自适应高度自适应
(1)宽度自适应
元素宽度的默认值为auto或者不写。
最小宽度：min-width：
最大宽度：max-width：
(2)高度自适应
元素高度的默认值**{height: auto;}**
最小高度：min-height：
最大高度：max-height：
- 浮动元素的高度自适应
父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷
方法1:给父元素添加声明overflow:hidden;(缺点:会隐藏溢出的元素)
方法2:在浮动元素下方添加空块元素,并给该元素添加声明: clear:both;height:0;overflow:hidden;
(缺点:在结构里增加了空的标签，不利于代码可读性，且降低了浏览器的性能)
方法3:万能清除浮动法选择符:
after {content:" "; clear: both;display: block; visibility: hidden;/overflow:hidden;}
伪元素
(1) after(与content属性一起使用，定义在对象后的内容。)如: div:after{content:url(logojpg);}
div:after{content:'文本内容";}
(2) before:与content属性- -起使用， 定义在对象前的内容。如: div:before(content:"在其前放内容":)
(3) first-letter:定义对象内第一个字符的样式。
(4) first-line:定义对象内第一行文本的样式
.box::after{
content: ""; /*设置空字符串*/
clear: both; /*清除浮动*/
width: 0;
height: 0;
display: block; /*设置成块元素，不占位置的隐藏 */
visibility: hidden; /*不显示但占位置隐藏*/
}
- 窗口自适应
盒子根据窗口的大小进行改变
设置方法: html,body{ height: 100%; }
- calc()函数的使用
calc()函数:用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如: width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc函数支持*+", “-”, “*”, “/” 运算;
calc函数使用标准的数学运算优先级规则;
13.表单进阶
1.单选框
<input type="radio" name="aaa" id="man"> <label for="man">男</label> name 组名，相同组名只能选一个，label 设置for=" " ，与id=" " 相同，可以点击文字选择 <input type="radio" name="aaa" checked="checked"> checked 默认选择
2.多选框
<input type="checkbox" name="" id="man">
<label for="man">男</label>
label 设置for=“” 与id=“” 相同 ，可以点击文字选择
checked=“checked” 默认选择，多选框中可以多设置几个默认选择
补充：
input[type=checkbox]{
appearance: none;
width: 20px;
height: 20px;
border: 1px solid black;
}
选择框标签受默认样式限制不能随意更改，需要先将样式清除。
appearance: none;
3.上传文件和隐藏字段，只读禁用
上传文件
<input type="file" name="" id="">
上传地址
图片按钮-代替提交按钮（< input type=“submit” >）
<form action="">
<!--上传地址 -->
<input type="image"src="">
</form>
隐藏按钮
<input type="hidden" name="" id="" value="带给后端个人信息">
禁用，只读
<button disabled="disabled">注册</button>
<input type="radio" disabled>不满意
<input type="text" readonly>
disabled 不能选择 禁用
readonly 只读 不能修改
4.下拉菜单
select支持的属性
1.size，显示几个
2.mutiple（可以选多个 按CTRL shift多选）
option 支持属性
1.value, 提供给后端需要的value值
2.selected，默认选中
< div>地址< /div>
<select size="1">
<option value="">辽宁</option>
<option value="">山东</option>
<option value="">山西</option>
<option value="">北京</option>
<option value="" selected>河南</option>
</select>
<div>
<select multiple >
<option value="">凳子</option>
<option value="" selected>桌子</option>
<option value="" selected>电脑</option>
<option value="" selected>椅子</option>
</div>
5.多行文本输入框-文本域
写在css中
.aa{
width: 300px;
height: 300px;
resize:none ;
/* resize 重新设置大小，
vertical 只能在垂直方向重新设置
horizontal 只能在水平方向重新设置
both 默认，可以随意设置大小
none 不可以重新设置大小
*/
}
写在body中
<div>
<!-- clos输入几列
rows输入几行
不常用
placeholder 文本框预制的内容，提示文字
textarea中value的值默认写在双标签的内部，注意空格问题
-->
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
<textarea class="aa" placeholder="请输入你的意见">aaa</textarea>
</div>
6.字段集
语法
<fieldset>
<legend></legend>
</fieldset>
legend在fieldset的边框添加文字
legend和fieldset可以添加常用属性边框大小背景颜色等等
fieldset{
border: 2px solid blue;
background-color: aqua;
width: 200px;height: 200px;
}
legend{
border: 1px solid;
text-align: center;
}
<fieldset>
<legend>性别</legend>
<input type="radio" name="aa">男
<br>
<input type="radio" name="aa">女
</fieldset>
<fieldset>
<legend>爱好</legend>
<input type="checkbox" name="bb">抽烟
<br>
<input type="checkbox" name="bb">喝酒
</fieldset>
六、H5
1.语法
内容类型(ContentType)
- HTML5的文件扩展符与内容类型保持不变，仍然为".html" 或" .htm"。
- DOCTYPE声明不区分大小写
- 指定字符集编码：meta charset=“UTF-8”
可省略标记的元素
- 不允许写结束标记的元素: br. col. embed. hr. img、input. 、link. meta
- 可以省略结束标记的元素: li、 dt、 dd、p. option. colgroup、 thead、tbody、 tfoot. tr. td、 th
- 可以省略全部标记的元素: html、 head. body. colgroup. tbody 省略引号
- 属性值可以使用双引号，也可以使用单引号。
HTML5新增语义化标签
section元素表示页面中的一个内容区块
article元素表示一块与上下文无关的独立的内容
aside元素在article之外的，与article内容相关的辅助信息
header元素表示页面中一个内容区块或整个页面的标题
footer元素表示页面中一个内容区块或整个页面的脚注
nav元素表示页面中导航链接部分
figure元素表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素表示页面中的主要的内容(ie不兼容)
2.音频标签
<audio src=" ./ jiejie.wav" controls:" "> </audio>
controls 控制栏
loop :循环
autoplay : 自动播放（有些浏览器为了保护隐私不会自动播放）
muted:静音
3.视频标签
<!-- <video src=" . /movie .mp4" controls loop autoplay muted></video> -->
<video src=" ./movie . mp4" controls loop poster=" ./poster.jpg" ></video>
<!--
controls 控制栏
loop 循环
autoplay 自动播放（有些浏览器为了保护隐私不会自动播放）
muted 静音
poster 属性海报
width height
--!>
4.H5常用属性
（1）基本类型
<form action="">
<div>
颜色生成：<input type="color" name="color">
</div>
<div>
邮箱输入:<input type="email" name="email">
</div>
<div>
URL地址(完整地址): <input type="url">
</div>
<div>
电话号码: <input type="tel">
</div>
<div>
滑动条: <input type="range" name="range" min="100" max="300" value="100" step="20">
</div>
<!-- step 步长 value 起始数据 -->
<div>
数字类型: <input type="number" name="number" min="20" max="150" value="22" step="2">
</div>
<div>
搜索框: <input type="search">
</div>
<div>
日期选择: <input type="date" name="date">
</div>
<div>
月份选择: <input type="month" name="month" id="">
</div>
<div>
周数选择: <input type="week" name="week" id="">
</div>
<div>
时间选择: <input type="datetime-local" name="datetime" id="">
</div>
<input type="submit">
</form>
（2）其他类型
- Datalist :选项列表
例:
<input type= "url" list= "url list" name= "link" />
<datalist id="url list">
<option label= "W3School" value="http://www.W3School.com.cn" />
<option label="Google" value= "http://www.google.com" />
<option label=" Microsoft" value= "http://www.microsoft.com" />
</datalist>
提示: option 元素永远都要设置value属性。
- autofocus属性:
给文本框、选择框、或者按钮控件加上该属性,当打开页面时，该控件自动获得国标焦点, 一个页面只能有一个。
- required属性:
验证输入不能为空
- Multiple:
可以输入一个或多个值,每个值之间用逗号分开
例: <input type= "email" multiple/>
还可以应用于file
- pattern：
将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。
例:
<input pattern= "[0-9][A-Z]{3}” title=" ">
输入内容: 一个数与三个大写字母placeholder= ‘输入内容: 一个数与三个大写字母’>
七、css3基础
1.层级选择器
<style>
/* 子代选择器 */
.box>li{
border: 1px solid rebeccapurple;
}
/* + 当前元素的后面一个兄弟 */
/* .child+li{
background: yellow;
} */
/* ~ 当前元素后面的所有兄弟 */
.child~li{
background: green;
}
.container~p{
background: gray;
}
</style>
</head>
<body>
<ul class="box">
<li>1111
<ul>
<li>111-777</li>
<li>222-777</li>
<li>333-777</li>
</ul>
</li>
<li class="child">222</li>
<li>333</li>
<li>444</li>
</ul>
<div class="container">咯咯咯咯咯</div>
<p>啊啊啊啊啊</p>
<p>哈哈哈哈哈</p>
<div>
<p>呵呵呵呵呵</p>
</div>
</body>
2.属性选择器
（1）E[attr]: 只使用属性名,但没有确定任何属性值;
（2）E[attr= “value”]:指定属性名,并指定了该属性的属性值;
（3）E[attr~=“value”]: 指定属性名,并且具有属性值,此属性值是一个词列表,并且以空格隔开,其中词列表中包含了一个value词,而且等号前面的"一”不能不写
扩展知识
（4）E[attr^=“value”]: 指定了属性名,并且有属性值，属性值是以value开头的; `
div[class^=b]{
background: red;
}`
（5）E[attr$=“value”]: 指定了属性名并且有属性值，而且属性值是以value结束的
div[class$=b]{
background: red;
}`
（6）E[attr*= “value”]:指定了属性名，并且有属性值，而且属值中包含了value;
`div[class*=b]{
background: red;
}`
3.伪类选择器
1、结构性伪类选择器
X:first-child匹配子集的第一个元素
X:last-child匹配父元素中最后一个X元素
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始
X:only-child这个伪类一般用的比较少, 比如上述代码匹配的是div下的有且仅有一个的p, 也就是说,如果div内有多个p,将不匹配。
X:root匹配文档的根元素。在HTML (标准通用标记语言下的一个应用)中，根元素永远是HTML
X:empty匹配没有任何子元素(包括包含文本)的元素X
2、目标伪类选择器
E:target选择匹配E的所有元素，且匹配元素被相关URL指向
div.con:target{
display: block;
}
3、UI 元素状态伪类选择器
E:enabled匹配所有用户界面(form表单)中处于可用状态的E元素
E:disabled匹配所有用户界面(form表单) 中处于不可用状态的E元素
E:checked匹配所有用户界面(form表单) 中处于选中状态的元素E
E::selection匹配E元素中被用户选中或处于高亮状态的部分
4、否定伪类选择器
E:not(s) (IE6- 8浏览器不支持:not0选择器。)
匹配所有不匹配简单选择符s的元素E
5、动态伪类选择器
（可以回头看三、css基础中的选择器内容）
- 链接伪类选择器
E:link
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 - 用户行为选择器
E:active
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
4.阴影
- 文本阴影
style>
div{
/* text-shadow: 10px 10px 1px red; */
text-shadow: 10px 10px 1px red,
10px -10px 1px rgb(2, 209, 255);
}
/*
10px 水平方向位移
10px 垂直方向位移
1px 模糊程度
red 阴影颜色
支持多个位移
*/
</style>
</head>
<body>
<div>大家好</div>
</body>
- 盒子阴影
box- shadow盒子阴影
属性值:h-shadow
必需的。水平阴影的位置。允许负值
v-shadow
必需的。垂直阴影的位置。允许负值
blur
可选。模糊距离
spread
可选。阴影的大小
color
可选。阴影的颜色。
inset
可选。从外层的阴影(开始时)改变阴影内侧阴影
Eg:box- shadow: 10px 10px 5px #88888
5.圆角边框
div {
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
/* border-radius: 10px 50px 70px 100px; */
/* px 或者 百分比
v1,四个角一样
v1,v2 左上右下 左下右上 一致
v1,v2,v3 左上 左下右上 右下
v1,v2,v3,v4 顺时针
*/
border-top-left-radius:10px;
border-top-right-radius: 30px;
border-bottom-left-radius: 50x;
border-bottom-right-radius: 100px;
}
div.box1{
width: 200px;
height: 200px;
background: green;
margin: 0 auto;
padding: 20px;
/* border-radius: 30px/60px; */
/* 30px/60px 水平/垂直方向 只支持 border-radius */
/* border-radius: 10px 20px 30px 40px/50px 60px 70px 80px; */
/* 设成圆 设成正方形高度的一半*/
border: 20px solid rebeccapurple;
/* border-radius: 120px; */
border-radius: 50%;
}
6.字体引入
字体模块: @font face
@font- face是CSS3中的一个模块,他主要是把自2定义的Web字体嵌入到你的网页中，随着@font .face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体(@font .face这个功能早在IE4就支持)
@font- face的语法规则:
@font-face {
font family: <YourWebFontName>;
src: <source> [<format> ][<source> [<format>]]*;
[font- weight: <weight>];
[font- style: <style>];
@font face语法说明:
1、YourWebFontName:此值指的就是你自定 义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font family.如"font family:" YourWebFontName";"
2、source:此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径;
7.怪异盒模型
含义:更改原有布局盒子模型的计算方式通过box sizing属性的取值进行更改
属性: box-sizing
box- sizing属性允许您以特定的方式定义匹配某个区域的特定元素。
属性值: content-box
这是由CSS2.1规定的宽度高度行为,宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
属性值: border-box
为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
8.弹性盒
- 属性
<style>
.box {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 0 auto;
display: flex;
}
.box div {
height: 100px;
width: 100px;
border: 1px dashed rebeccapurple;
}
/* .box span{
height: 100px;
width: 100px;
border: 1px dashed rebeccapurple;
} */
</style>
</head>
<body>
<!-- 弹性盒是一种新的布局方式，特别适合移动端 -->
<!-- 影响:
1.子元素默认横向排列
2.行内元素，变成了块元素
3.只有一个元素的时候，margin：auto 自动居中
-->
<div class="box">
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
</div>
<!-- <div class="box">
<span>1111</span>
<span>2222</span>
<span>3333</span>
<span>4444</span>
</div> -->
</body>
- 主轴侧轴方向
主轴方向：
justify-content:
侧轴方向：
align-items:
<style>
.box {
width: 500px;
height: 500px;
border: 2px solid black;
margin: 0 auto;
display: flex;
/* 调整主轴对其方式
flex-start
flex-end
center
space-between 两端对齐
space-around 距离环绕
*/
justify-content: space-around;
/* 侧轴方向
flex-start
flex-end
center */
align-items: center;
}
.box div {
height: 100px;
width: 100px;
border: 1px dashed rebeccapurple;
}
</style>
- 折行与行间距
折行：flex-wrap: wrap;
行间距：align-content:
flex-wrap: wrap;
/* 折行；*/
/* flex-direction:row; */
/* 控制折行后的行间距
flex-start
flex-end
center
space-around
space-between
*/
align-content: flex-start;
9.项目
- 项目对齐
属性：align-self：
.box div:nth-child(1){
height: 100px;
align-self: flex-start;
}
.box div:nth-child(2){
height: 100px;
align-self: flex-end;
}
.box div:nth-child(3){
height: 100px;
align-self: center;
}
.box div:nth-child(4){
height: 100px;
align-self: baseline;
}
.box div:nth-child(5){
align-self: stretch;
/* 拉伸全屏 */
}
-
项目调整顺序
属性：order：0；（默认值为0）值越大，越靠后。 -
项目剩余宽高
属性：
flex：1；（占满剩余高度，多项的话越大占得比例越多）
.box div:nth-child(1){
flex: 1;
} */
.box div:nth-child(2){
flex: 2;
/* 沾满剩余空间 */
}
.box div:nth-child(3){
flex: 1;
}
10.分布
1.常见布局
1、常见的布局方案
- 固定布局:
以像素作为页面的基本单位，不管设备屏幕及浏览器宽度,只设计一套尺寸;
可切换的固定布局: 同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过识别的屏幕尺寸或浏览器宽度,选择最合适的那套宽度布局;
- 弹性布局:
以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果;
- 混合布局:
同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度,并能完美利用有效空间展现最佳效果;只是混合像素、和百分比两种单位作为页面单位。
- 布局响应:
对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计,有两种方式:
pc优先(从pc端开始向下设计) ;
移动优先(从移动端向上设计) ; 0无论基于那种模式的设计,要兼容所有设备,布局响应时不可避免地需要对模块布局做一些变化(发生布局改变的临界点称之为断点),
2.多列布局
- 1、column-count
说明:
属性规定元素应该被分隔的列数
适用于:除table外的非替换块级元素, table cells, inline block元素
- 2、column-gap
说明:
说明:属性规定列之间的间隔大小
- 3、column-rule
说明:
设置或检索对象的列与列之间的边框。复合属性。
column- rule-color规定列之间规则的颜色。
column-rule -style规定列之间规则的样式。
column-rule -width规定列之间规则的宽度。
- 4、column-fill
说明:
设置或检索对象所有列的高度是否统一
auto:列高度自适应内容
balance:所有列的高度以其中最高的- -列统一
- 5、column-span
说明:
设置或检索对象元素是否横跨所有列。
none:不跨列
all:橫跨所有列
- 6、column-width
说明:
设置或检索对象每列的宽度
3.响应式布局
布局原则：
(1)模块中内容:挤压–拉(布局不变)
(2)模块中内容:换行–平铺(布局不变)
(3)模块中内容:删减–增加(布局不变)
(4)模块位置变换(布局改变)
(5)模块展示方式改变:隐藏-展开(布局改变)
媒体查询的含义:
媒体查询可以让我们根据设备显示器的特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和-个或多个检测媒体特性的条件表达式组成。媒体查
询中可用于检测的媒体特性有width、height 和color (等) 。使用媒体查询,可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
- 1、媒体查询操作方式
实际操作为:对设备提出询问(称作表达式)开始,如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。
- 2、媒体查询结构
all and (min-width:320px) {
body { background-color:blue;}
属性说明：
1.PC客户端或大屏幕设备: 1028px至更大
only screen and (min-width: 1029px) }
2.竖屏
screen and (orientation:portrait) and (max-width: 720px) {对应样式}
3.橫屏
screen and (orientation:landscape){对应样式}
11.em与rem、vh和vw
em和rem代码解释：（详解见vscode147，148）
<style>
*{
margin: 0;
padding: 0;
}
html{
font-size: 100px;
}
.box{
width: 3.75rem;
height: 100px;
background: yellow;
}
</style>
<script>
//fontsize 计算
document.documentElement.stylre.fontSize=document.dispatchElement
clienWidth/375 * 100 +'px'
//fotsite=当前设备的css布局宽度/物理分进率（设计稿的宽度） * 基准font-size
</script>
<body>
<!-- px em rem之争
px：50px
em：相对单位，相对于父元素的字体大小 div {width：10em;}
rem:，相对单位，.相对于根元素(html) 字体大小，，div width:10ren
-->
<div class="box"></div>
</body>
</html>
vh和vw代码解释：（详解见vscode149,150）
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 100vw;
height: 100vh;
background: yellow;
}
</style>
</head>
<body>
<div>
<!-- vh与vw -->
<!--
vh view-height
100vh === 视口的高度
vw vi ew-width
100vw === 视口的宽度
iphone6 100vw === 375px 1vw = 3.75vw
iphone6 plus 100vw === 414px 1vw = 4.14vw
heml font-size js 代码
-->
</div>
</body>
12.渐变
CSS3渐变(gradient) 可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前， 你必须使用图像来实现这些效果，现在通过使用CSS3的渐变(gradients) 即可实现。此外,渐变效果的元素在放大时看起来效果更好，因为渐变(gradient) 是由浏览器生成的。
1.线性渐变
1、线性渐变，
语法: background: linear gradient(direction, color stop1, colorstop2, …
说明:
direction:默认为to bottom,即从上向下的渐变;
stop:颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。
示例1: to left、top right、to bottom. to top
div { background:inear gradient(to left, red , blue)}
div { background:inear gradient(to right, red , blue) }
div { background:linear gradient(to bottom, red , blue) } /浏览器默认值/
div { background:inear gradient(to top, red , blue) }
分别产生”从右到左”、”从左到右” 、”从 上到下”、”从下到上” 的“红色绿色"渐变，
2.径向渐变
径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变,而径向渐变是从“一个点”向四周的颜色渐变
语法: background: radial-gradient(center, shape, size, start-color, … last-color);
说明:
center:渐变起点的位置，可以为百分比，默认是图形的正中心。
shape:渐变的形状，ellipse表示椭圆形， circle表示圆形。 默认为llipse, 如果元素形状为正方形的元素,则llipse和circle显示一样。
size:渐变的大小，即渐变到哪里停止,它有四个值。closest-side: 最近边;
farthest-side:最远边; closest-corner: 最近角; farthest-corner: 最远角
- 示例1:多颜色点均匀分布
div {
background: radial-gradient(red, green, blue);
}
以中心(50% 50%)为起点，到最远角(farthest- corner)，从red到green. blue的均匀渐变
- 示例2:多颜色节点不均匀分布
div {
background: radial-gradient(red 5%, green 15%, blue 60%);
}
- 示例3:设置渐变形状
div {
background: radia-gradientcirle, red, yellow, green);
}
div {
background: radia-gradietellipse, red, yellow, green);
}
circle:渐变为最大的圆形; elipse: 根据元素形状渐变,元素为正方形是显示效果与circle无异。
- 示例4:不同尺寸的渐变
size指定了渐变的大小，即渐变到哪里停止，它有四个值。
closest-side:最近边; farthest-side: 最远边; closest-corner: 最近角; farthest- corner:最远角
div {
background: radial-gradient(60% 40%, closest- side, blue, green, yellow, black);
}
div {
background: radial-gradient(60% 40%, farthest-side, blue, green, yellow, black);
}
div {
background: radial-gradient(60% 40%, closest -corner, blue, green, yellow, black);
}
div {
background: radial-gradient(60% 40%, farthest- corner, blue, green, yellow, black);
}
3.过渡
复合属性:
transition 取值: all 5s linear 3s
含义:
css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值
all—单一属性: transition-property: 检索或设置对象中的参与过渡的属性
5s—单一属性: transition-duration: 检索或设置对象过渡的持续时间
3s—单一属性: transition-delay: 检索或设置对象延迟过渡的时间
linear—单一属性: transition- timing function:检索或设置对象中过渡的动画类型
简写:
transition:all/具体属性值运动时间s/ms延迟时间s/ms动画类型
13.2D属性
1、translate()
将元素向指定的方向移动，类似于position中的relative.
水平移动:向右移动translate(x.0)和向左移动translate(- tx,0);
垂直移动:向上移动translate(0,-ty)和向下移动translate(0,ty);
对角移动:右 下角移动translate(x.ty)、右上角移动translate(x.-ty).左上角移动translate( tx,-ty)和左下角移动translate(-tx.ty)。
translateX():水平方向移动- 个对象。 对像只向X轴进行移动，如果值为正值,对像向右移动;如果值为负值，对像向左移动。translateY(): 纵轴方向移动一 个对象。 对象只向Y轴进行移动，如果值为正值,对象向下移动;如果值为负值,对像向上移动。
这两个函数和前面介绍的translate(函数不同的是每个方法只接受一个值。
transform:translate(-100px,0);实际上等transform:translateX(-100px);
transform:translate(0, 100px);实际上于transform:translateY(-100px);
transform的移动不会覆盖其他图层
2、scale()
让元素根据中心原点对对象进行缩放。默认的值1.因此0.01到0.99之间的任何值, 使-个元素缩小;而任何大于或等于1.01的值,让元素显得更大。缩放scale()函数和translate(函数的语法非常相似，他可以接受一个值， 也可以同时接受两个值，如果只有一个值时,其第二个值默认与第一个值相等。
例如,
scale(1,1)元素不会有任何变化，而scale(2,2)让元素沿X轴和Y轴放大两倍。
scaleX():相当于scale(sx,1)。表示元素只在X轴(水平方向)缩放元素,其默认值是1.
scaleY0:相当于scale(1,sy)。 表示元素只在Y轴(纵横方向)缩放元素，其默认值是1.
3、 rotate()
旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。 它主要在二维空间内进行操作,接受-个角度值， 用来指定旋转的幅度。如果这个值为正值,元素相对原点中心
顺时针旋转;如果这个值为负值，元素相对原点中心逆时针旋转。
rotateX)方法，元素围绕其X轴以给定的度数进行旋转
rotateY(方法，元素围绕其Y轴以给定的度数进行旋转
4、skew()
倾斜skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照- 定的角度倾斜。
一个参数时:表示水平方向的倾斜角度;
两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度
14.关键帧动画
- animation
animation复合属性。检索或设置对象所应用的动画特效。
1.animation-name检索或设置对象所应用的动画名称
说明:必须与规则@keyframes配合使用，eg:@keyframes mymove{} animation-name:mymove
2.animation-duration检索或设置对象动画的持续时间
说明:animation-duration:3s;动画完成使用的时间为3s
3.animation-timing-function检索或设置对象动画的过渡类型
说明:
linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
4.animation-delay检索或设置对象动画延迟的时间
说明:
animation-delay:0.5s;动画开始前延迟的时间为0.5s
5.animation-iteration-count检索或设置对象动画的循环次数
说明:
animation-iteration-count: infinite | number;
infinite:无限循环
number:循环的次数
6.animation-direction检索或设置对象动画在循环中是否反向运动
说明:
normal:正常方向
reverse:反方向运行
alternate:动画先正常运行再反方向运行，并持续交替运行
alternate-reverse:动画先反运行再正方向运行，并持续交替运行
animation-play- state :running /pause; 运行/暂停
animation-fill-mode: none/backwards/forwards;
none 什么都不保留
backwards 保留最后的画面
forwards 保留初始画面
15.3D动画
1.景深
生活中的3d区别于2d的地方：近大远小景深
程序中实现的方法perspective元素距离视线的距离(物体和眼睛的距离越小,近大远小的效果越明显)
3D立体图
perspective: 1200px; (在父元素中使用)
transform:perspective(1200px) (在子 元素中使用)
两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间
如果当你的视线距离物体足够远的时候，基本上就不会有近大远小的感觉
perspective-origin;
观察3d元素的(位置)角度：
perspective-origin: center center (中心)
perspective-origin: left top (左 上角)
perspective-origin: 100% 100% (右 下角)
平移
transform-style: preserve-3d;设置成3D舞台
旋转
transform :rotate3d(1,1,1, 30deg);xz轴、y轴、z轴都绕旋转1*30deg
2.3D缩放
CSS3 3D变形中的缩放主要有scaleZ0和scale3d()两种函数,当scale3d(中X轴和Y轴同时为1, 即scale3d(1,1,sz), 其效果等同于scaleZ(sz)。 通过使用3D缩放
函数，可以让元素在Z轴上按比例缩放。默认值为1,当值大于1时，元素放大，反之小于1大于0.01时，元素缩小
scale3d(sx,sy,sz)
sx:横向缩放比例;
sy:纵向缩放比例;
sz: Z轴缩放比例;
scaleZ(s)
s:指定元素每个点在Z轴的比例。
注: scaleZ()和scale3d()函数单独使用时没有任何效果，需要配合其他的变形函数一起使用才会有效果
16.网格布局
一、网格布局的概念，和flex布局的区别
含义:它将网页划分成-个个网格，可以任意组合不同的网格，做出各种各样的布局
区别: Grid 布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex布局是轴线布局，只能指定5日“针对轴线的位置，可以看作是一 -维布局。Grid布局则是将容器划分成"行"和“列"，产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。
二、网格布局中的属性
含义:网格布局中的属性和flex中的布局属性类似,分为了两类, 一类容器属性; 一类是项目属性
1.容器属性
- 1、触发网格布局
给父元素添力display:grid
display关于网格的取值分为两个，grid(块网格)和inline-grid(行内网格, 行内块)
grid== =容器从上向下排列
inline-grid== =容器从左向右排列
- 2、行列划分
规定行属性: grid-template-row:
固定列属性: grid-template-column:
后面的取值数量代表的是多少行，多少列
1)绝对大小(根据列数或者行数确定值的个数)例: 200px 200px 200px
grid-template-columns :200px 200px 200px;
grid-template-rows:200px 200px 200px;
2)百分比(根据列数或者行数确定值的个数)例: 33…33% 33.33% 33.33%
grid-template-columns:33.33% 33.33% 33.33%;
grid-template-rows:33.33% 33.33% 33.33%;
3)功能函数: repeat()
grid-template-rows: repeat(3,33.3%);
grid-template-columns: repeat(3,33.3%);
4)auto-fill关键字(自动填充)配合功能函数使用
grid-template-rows: repeat(autofill,33.3%);
grid-template-columns: repeat(autofill,33.3%);
5)fr关键字(列宽片段，相当于比例)
grid-template-rows: 1fr fr 1fr;
grid-template-columns: 1fr 2fr 1fr;
6）minmax 最小和最大
grid-template-rows:minmax(100px 200px) 200px 300px ;
grid-template-columns: 1fr 2fr 1fr;
7） auto 自动适应
grid-template-rows: auto 200px 200px;
grid-template-columns:200px auto 200px;
- 3、列间距(重点:复合属性)
grid-row-gap:20px /* 行间距*/
grid-column-gap:20px /列间距/
grid-gap:30px 30px /* 复合式写法*/
gap:10px 10px;
新版本可以省略前缀grid
- 4、行列划分区域和命名
<style>
.box {
width: 600px;
height: 600px;
border: 5px solid royalblue;
display: grid;
grid-template-rows: 180px 180px 180px;
grid-template-columns: 180px 180px 180px;
grid-template-areas:'a e e'
'd e e'
'g h i';（划分区域）
}
.box div:nth-child(3){
grid-area: e;（重新命名）
}
</style>
- 5、项目排列顺序
grid-auto-flow: column | row;
/*
row dense和column dense
这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。
*/
- 6、单元格内容对其(重点:复合属性)
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items:. < justify-items> <align-items> /*复合式写法*/
/*
start:对齐单元格的起始边缘。
end:对齐单元格的结束边缘。
center:单元格内部居中。
stretch:拉伸，占满单元格的整个宽度(默认值)。
*/
- 7、单元格项目对其(重点:复合属性)
justify-content:start | end | center| stretch | space-around | space-between | space-
evenly;
align-content: start | end | center| stretchI space-aroundI space-between| space-
evenly;
place-content: : justify-content> <align-content> /*复合式写法 */
/*
start -对齐容器的起始边框。
end -对齐容器的结束边框。
center -容器内部居中。
stretch -项目大小没有指定时，拉伸占据整个网格容器。
space-around -每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大- -倍。
space-between -项目与项目的间隔相等，项目与容器边框之间没有间隔。
pace-evenly -项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
*/
2.项目属性
1、网格线合并(单一属性)
grid-column-start
grid-column-end
grid-row-start
grid-row-end
/*
grid-column-start属性:左边框所在的垂直网格线
grid-column-end属性:右边框所在的垂直网格线
grid-row-start属性:.上边框所在的水平网格线
grid-row- end属性:下边框所在的水平网格线
*/
grid-column-start:1;
grid-column-end:3;
grid-row-start: 2;
grid-row-end:4;
扫一扫
4414
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
