关键词：
<!--1.列举你知道的css选择器-->
基本选择器：标签选择器、id选择器、类选择器
高级选择器：并集选择器、交集选择器、后代选择器、子元素选择器、伪类选择器、伪元素选择器
<!--2.分别阐述类选择器和id选择器的作用-->
ID选择器，#开头，ID不能重复
类选择器，.开头，类可以重复
一个页面上所有控件都ID不能重复,但class可以被多个 html控件套用.
<!--3.如何重置网页样式-->
*｛padding:0;margin:0｝ or 百度里搜reset.css找别人写好的复制
<!--4.对盒模型是怎么理解的？它们的属性有哪些？-->
盒模型：在网页中基本上都会显示一些方方正正的盒子，这种盒子成为盒模型
属性：width、height、padding、border、margin
<!--5.什么是标准文档流？-->
网页在解析的时候，遵循于从上向下，从左向右的一个顺序，而这个顺序就是来源于标准文档流。
<!--6.浮动盒子的特点？浮动的好处？如何清除浮动？-->
特点：脱标，相互贴靠，有“字围”效果，紧凑的效果
好处：脱标，相互贴靠，有“字围”效果，紧凑的效果
清除浮动：1、给父盒子设置高度（这种方法不灵活）
2、clear：both 给浮动的元素最后面加上一个空的div，并且设置这个元素不浮动，然后设置clear：both
3、伪元素清除法（常用）：父盒子类名设置为clearfix。clearfix：｛content：“”；clear：both；display：block
height：0；visibility:hidden｝
4、overflow：hidden(常用)
<!--7.精灵图的好处是什么？-->
1、利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
2、CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便
<!--8.定位有几种？阐述一下“父相子绝”定位是怎样理解的？-->
相对定位、绝对定位、固定定位
子元素绝对定位，父元素相对定位。让子元素 以其父元素为标准来定位。（如果不这么做，子元素就会相对body或浏览器定位产生不好的效果。）
<!--9.什么样的盒子脱离了文档标准流？脱离文档标准流的盒子的特点是怎样的？-->
浮动、绝对定位、固定定位、父子关系：儿子就是占用父亲内容的宽高，和父亲的padding没有关系。
<!--10.z-index的规则是怎样的？-->
层级关系的属性
1、z-index表示谁压着谁，数值大的压盖住数值小的
2、只有定位了的元素，才能有z-index，也就是说，无论相对定位、绝对定位、还是固定定位，都可以使用z-index,而浮动元素不能使用。
3、z-index没有单位，就是一个正整数，默认为0.
4、如果大家都没有z-index，或者z-index值都一样，谁写在HTML后面，谁就在上面压着。定位了的元素，永远压着没有定位的元素。
5、从父现象：父亲怂了，儿子再牛逼也没有用。
<!--11.display属性值有哪些？分别描述他们的意思？-->
none：此元素不显示。
block：将元素显示为块级元素，前后会带换行符。
inline:默认值，元素会被显示为内联元素，前后没有换行符。
inline-block:行内块级元素。
css练习
css语法由三部分构成：选择器、 属性 、值 查看详情
css练习
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="1.css"></head><body><divstyle="width:136 查看详情
css练习一
总体的html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><linkrel="stylesheet"href="1.css"><title>Title</title></head><body><span>G< 查看详情
css简单样式练习
运行效果： 源代码：1<!DOCTYPEhtml>2<htmllang="zh">3<head>4<metacharset="UTF-8">5<title>学习使用CSS</title>6<styletype="text/css">7p{8font-family:"宋体";9text-alig 查看详情
css各种练习
2017年10月22日<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>Document</title> <style> .maskedh4{ display:block; width:600px; height:200px; 查看详情
css练习it修真院--练习5-护工个人界面(代码片段)
任务五、一个最常见的移动端页面完成的事情float学习张鑫旭《CSS世界》相关章节张鑫旭float系列了解CSS通配符&选择器性能优化/浏览器渲染原理background学习(各属性及效果)完成任务五学习CSS编码规范CSS编码规范,并按照编码规... 查看详情
css练习it修真院--练习5-护工个人界面(代码片段)
任务五、一个最常见的移动端页面完成的事情float学习张鑫旭《CSS世界》相关章节张鑫旭float系列了解CSS通配符&选择器性能优化/浏览器渲染原理background学习(各属性及效果)完成任务五学习CSS编码规范CSS编码规范,并按照编码规... 查看详情
css3练习
1、画小风车参考自：作者：爱喝酸奶的吃货 出处：http://www.cnblogs.com/yingzi1028/windmill.html<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>css画大风车</title> <sty 查看详情
css简单样式练习
运行效果： 源代码：1<!DOCTYPEhtml>2<htmllang="zh">3<head>4<metacharset="UTF-8">5<title>Google</title>6<styletype="text/css">78body{9font-family:"宋体";10}1112 查看详情
css简单样式练习
运行效果： 源代码：1<!DOCTYPEhtml>2<htmllang="zh">3<head>4<metacharset="UTF-8">5<title>春天</title>6<styletype="text/css">78*{9margin:0;10padding:0;11border:n 查看详情
css简单样式练习
运行效果： 源代码：1<!DOCTYPEhtml>2<htmllang="zh">3<head>4<metacharset="UTF-8">5<title>菜单</title>6<styletype="text/css">7*{8margin:0;9padding:0;10border:non 查看详情
css简单样式练习
运行效果： 源代码：1<!DOCTYPEhtml>2<htmllang="zh">3<head>4<metacharset="UTF-8">5<title>Sina</title>6<styletype="text/css">7*{8margin:0;9padding:0;10border:n 查看详情
css简单样式练习
运行效果： 源代码：1<!DOCTYPEhtml>2<htmllang="zh">3<head>4<metacharset="UTF-8">5<title>城东早春</title>6<styletype="text/css">7*{8margin:0;9padding:0;10border:n 查看详情
css简单样式练习
运行效果： 源代码：1<!DOCTYPEhtml>2<htmllang="zh">3<head>4<metacharset="UTF-8">5<title>传智播客</title>6<styletype="text/css">7*{8margin:0;9padding:0;10border:n 查看详情
css练习甘道夫-寻找宝贵(代码片段)
css练习javascript数学方法(代码片段)
1+x证书web前端开发css专项练习
官方QQ群1+x证书Web前端开发css专项练习http://blog.zh66.club/index.php/archives/192/ 查看详情
css3练习
读条的实现1.div{position:relative;border:1pxsolid#111;width:80px;height:60px}.divdiv{width:20px;height:20px;border-radius:50%;background:#111;position:absolute;}.divdiv:nth-of-type(1){animation:aa.4saltern 查看详情