1、元素按显示方式分为哪几种，并举例，正确描述他们
分为块级框和行内框，块级框显示的内容为块级元素，行内框内显示的内容为行内元素；块级框的宽高由内部的子元素决定，行内框的宽高由内部的内容决定；如页面导航的子项目就为块级元素，当没有子项目时，该区域内子项目框重叠，没有内容，但框架依然存在；块级宽内可以嵌套行内框。
2、CSS是什么？他的主要作用是什么？
CSS是层叠样式表；用来设置HTML元素在文档中的布局与显示方式。
3、什么是CSS选择器，他的样式声明是哪二部分组成？
CSS选择器是在页面中选择某一个或某一组标签，一般选择某一组标签，除ID外，返回一组元素；
样式声明是由键值对组成，键为属性的名称，值为属性的对应的值，可以为字符串或数值。
4、举例演示CSS简单选择器（全部）
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>举例演示CSS简单选择器</title><style>p{color:cadetblue;} /*元素选择器*/p[class]{color:cyan; /*属性选择器*/}.orange{background-color: darkgray;} /*类选择器*/#black{color: darkseagreen;} /*ID选择器*/.gray,h2{background-color: deeppink;} /*群组选择器*/html{font-size: 20px;}body*{font-size: 1000rem;}</style></head><body><h2>季节特征</h2><p>花开的季节</p><p class='gray'>蝉鸣的季节</p><p class='orange'>落叶的季节</p><p id="black">飘雪的季节</p></body></html>
5、举例演示CSS上下文选择器（全部）
html代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>上下文选择器</title><link rel="stylesheet" href="css/style3.css"</head><body><section><div><h2>精油</h2><h2 id="item">纯露</h2><h2>植物油</h2><h2>香脂</h2></div><h2>复方</h2><h2>日化</h2></section></body></html>`
css代码：
section h2{color: indianred;} /*后代选择器*//*爷>父>子*/section>h2{color: lawngreen;} /*父子选择器*/section>div{background-color: lightblue;} /*父子选择器*/#item+*{background-color: magenta;} /*同级相邻选择器*/#item~*{background-color: mediumaquamarine;} /*同级所有选择器*/`
6、举例演示常用CSS结构伪类选择器（不少于四种）
非限定性类型的结构伪类选择器：
html代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>常用CSS结构伪类选择器</title><link rel="stylesheet" href='css/style4.css'</head><body><ul><li><h2>采购订单</h2><ul><li>苹果1000kg</li><li>香蕉300kg</li><li>西瓜50kg</li></ul></li><li><h2>到货通知</h2><p>2019-11-01到货明细</p><ul><li>榴莲100kg</li><li>柿子50kg</li><li>奇异果800kg</li></ul><p>请各部门同事做好相关收货准备！</p></li><li><h2>工作计划</h2><ul><li>销售发货打包</li><li>与快递公司确认取货时间</li><li>联系供应商</li></ul></li></ul><ul><li><h2>研发产品市场调研</h2><ul><li>护手霜</li><li>唇膏</li><li>润肤乳</li></ul></li><li><h2>预计研发产品</h2><p>市场部推荐冬季较为受欢迎产品</p><ul><li>滋润保湿效果较好的护手霜</li><li>薄荷味唇膏</li><li>植物香气的润肤乳</li></ul></li></ul></body></html>
css代码：
/*非限定性结构伪类:只关注html元素的位置，不限定类型*/ul>:nth-child(2){color: mediumturquoise;} /*选定所有ul下的第二个子元素*/ul>:first-child{color: mediumvioletred;} /*选定所有ul下的第一个子元素*/ul>:last-child{color: orange;} /*选定所有ul下的最后一个子元素*/ul:nth-child(2)>:first-child{background-color: paleturquoise;}ul:first-child>:nth-child(2){background-color: palevioletred;}ul:last-child>:first-child{background-color: peru;}ul:first-child>:nth-child(2)>p:nth-child(n+1){background-color: pink;}ul:last-child>:last-child li:nth-child(n+1){background-color: powderblue;} /*最后一个ul的最后一个子元素下的所有li元素*/`/*限定类型的结构伪类选择器：将非限定型结构的伪类选择器中的child改为of-type即为限定性结构伪类选择器。小结：：nth-child():非限定类型；关注点在于元素的位置上：nth-of-type():限定类型；关注点：一、类型；二、位置；*/
7、举例演示常用CSS表单伪类选择器（不少于三种）
html:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>常用表单伪类选择器</title><link rel="stylesheet" href="css/style5.css"></head><body><h2>用户登录</h2><form action="" method="POST"><p><label for="email">邮箱：</label><input type='email' id='email' required placeholder="example@email.com"></p><p><label for='password'>密码：</label><input type='password' id='password' required placeholder="不得少于6位"></p><p><label for='save'>保存密码：</label><input type='checkbox' id='save' name='save' checked readonly></p><p><label for='save_time'>保存期限：</label><select name='save_time' id='save_time'><option value='7' selected>7天</option><option value='30'>30天</option></select></p><p><input type='hidden' name='login_time' value='登录时间'></p><p><label for="warning">警告：</label><input type='text' id='warning' value='一天内仅允许登录三次' style='border:none' disabled></p><script>Document.querySelector('[type="hidden"]').value=new Data().getTime()</script></form></body></html>
css代码：
input:enabled{background-color: salmon;}input:disabled{background-color: springgreen;}input:required{background-color: violet;}