chanong 说起CSS选择器，大家都知道有很多种，但如果真想掰着手指头数的话，可能需要数几分钟。 其实这么多选择器可以分为两类：
标签选择器（*为特例），可以是单个标签，也可以是上下文中的多个标签； 属性选择器（id和class是属性，特殊属性）； 2.1. 标签选择器 2.1.1 通用选择*
通用选择器* 大家应该都很熟悉了。 最常用的是*{:0; 框-:-框;}。 :0 我们在上一节中已经说过，box-:-box 将在后面的盒模型中详细介绍。
例如，当我们检测样式时，我们还可以看到它使用了 * 选择器：
单标签多标签
多标签选择器一般与html上下文相关，集中分类有以下几种
选择祖先的所有后代节点，如 div p{…} 选择父元素的所有子节点，如 div > p{…} 选择某个元素旁边的兄弟节点，如 li + li{…} 某个元素的所有兄弟节点，如span ~ a{...} 以上情况的组合应用（不要让组合太复杂，编码时可读性是第一要务）
我给大家列举一个典型的应用，如下图：
上图的效果应该比较常见，每个菜单之间有下划线。 我之前的实现是：给每个li加一个-，最后一个li去掉-。
其实完全没有必要这么麻烦。 下面的样式设置可以解决这个问题：
有趣的？
2.2. 属性选择器2.2.1特殊1：id选择器
基础知识，无需赘述。
根据许多CSS教程，id选择器和属性选择器是两个不同的类别。 为什么id选择器要放在属性选择器下面呢？ 因为css选择器是根据html节点的特性来设置的，所以id也是一个属性，只不过是一个特殊的属性。 每个html节点的id不能重复。
由于比较特殊且常用，所以id选择器被赋予单独的“#”，它本质上是一个属性选择器。 下面两行代码执行效果完全相同：
2.2.2 特殊2：类选择器
基础知识，无需赘述。
类也是一个特殊的属性。 之所以放在属性选择器下面，和上面提到的id是一样的。
2.2.3 属性选择器
属性选择器有两种情况：
仅按属性名称选择：img[title]{…} 按属性名称和属性值选择：input[type='text']{…}
这两个也比较基础，不再赘述。 不懂的朋友可以去基础教程补一下。
3. 伪类和伪元素
上面提到了几种选择器类型，其中任何一种都可以使用伪类和伪元素。
3.1. 伪类
伪类分为UI伪类和结构化伪类。
3.1.1 UI伪类
UI伪类相对简单且常用。 下面简单写几行代码，不再赘述。
结构化伪类（低版本 IE 中不可用）
先问大家一个问题：如何实现一个表格间隔显示背景色，如图：
最简单的方法是使用结构化伪类，只需一种样式设置即可实现。
结构化伪类有以下编写选项。 至于它们的意思，你可以从字面上理解：
伪元素
请记住，伪元素是一个非常重要的概念！ 其中 : 和 :after 非常常用。
首先，我们来看看 : 和 :after 发生了什么。
在上图中，我们可以看到我们可以在元素之前和之后添加内容。 这里的“内容”也可以用编码的方式来写，如下图：
另外，除了添加内容之外，还可以自定义执行内容的样式，如下图：
2、分别解释一下class选择器和id选择器的作用？
类选择器，按样式类选择元素：
例子：
.c1 {
color: red;
}
id选择器通过元素的ID值选择元素：例子：
#i1 {
color: red;
}
3、如何重置网页样式？
第一种方式
* {margin:0px; padding:0px;}
现在众多的设计师发现，这行代码虽然简单，但却让网页解析太慢，呵呵，当然了，自己是业余的，不用太在意。
于是出现了几种CSS重置方法：
第二种方式
NETTUTS上的 Jeffrey Way写了篇文章Weekend Quick Tip: Create Your Own Simple Reset.css File
释出自己用来重置CSS样式表的方法
body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul, ol,
li, dl, dt, dd, form, a, fieldset, input, th, td
{margin: 0; padding: 0; border: 0; outline: none;}
body{line-height: 1;font-size: 88% /* Decide for yourself if you want to include this. */;}
h1, h2, h3, h4, h5, h6{font-size: 100%;padding: .6em 0;margin: 0 15px;}
ul, ol{list-style: none;}
a{color: black;text-decoration: none;}
a:hover
{text-decoration: underline;}
.floatLeft{float: left;padding: .5em .5em .5em 0;}
.floatRight{float: right;padding: .5em 0 .5em .5em;}
这个方法适用于大多数的网页设计。
第三种方式
一部分人追求彻底抹去浏览器影响
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del { text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}
第四种方式
还有今天sofish提到的Yahoo的YUI提供的CSS重置文件
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img { border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;
font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
这些，没有谁好谁坏一分，大多数设计师并不推荐第一种方法，因为我国的抄袭美德，现在搜索到的CSS网页设计技巧，第一位却一定是这个。
4.对盒模型是怎么理解的？它们的属性有哪些？
HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，
这个模型称为盒子模型。 盒子模型通过四个边界来描述：margin（外边距），border（边框），padding（内填充），content（内容区域）
border边框的常用值：值说明 none 无边界。 虚线边框。 矩形虚线边框。 实心边框。
5. 什么是标准文档流程？
标准文档流程
说白了，就是一种“默认”状态。 文档流是指在元素排版布局过程中，元素从左到右、从上到下的自动流动排列。
最后将表单从上到下分为几行，每行中的元素按从左到右的顺序排列。
6、浮动箱有什么特点？ 浮动的优点？ 如何清除浮动？
元素浮动后，可以向左或向右移动，直到其外边缘接触到包含它的框或另一个浮动元素的边框。 元素浮动后，就会脱离正常的文档流，因此正常文档流中的盒子会显得好像浮动元素不存在一样。
浮动的优点：
浮动的缺点：
使用伪元素清除浮动：after（推荐）
示例
//在css中添加:after伪元素
.parent:after{
content:"";
visibility:hidden;
display:block;
width:100%;
height:0;
clear:both;
}
7.精灵图的好处是什么？
CSS Sprites 的优点：
1、减少图片的字节
2、减少了网页的http请求，从而大大的提高了页面的性能
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。
8.定位有几种？阐述一下“父相子绝”定位是怎样理解的？
如果要对子元素使用定位，则子元素应该绝对定位，而其父元素应该相对定位。 允许子元素相对于其父元素定位。
如果不这样做，子元素相对于主体或浏览器定位将会产生不良影响。
9. 什么样的盒子脱离了文档标准的流动？ 偏离文档标准流程的盒子有什么特点？
1. 浮动
浮动是 CSS 中最常用的选项，它具有三个属性。 关于漂浮，我们要强调的是，有一种东西永远不会单独漂浮。 漂浮总是一起漂浮。 如果你想漂浮，每个人都会漂浮。
1.1 浮动元素脱离标准文档流
1.1.1 总体说明：有两个盒子，一个盒子是浮动的，另一个盒子是不浮动的。 浮动框将脱离标准文档流，而非浮动框将成为标准文档流中的第一个框，因此两者将重叠。
1.1.2 概述：内联标签在标准文档流中无法设置宽度和高度，但使用float将其与文档流分离后，可以设置宽度和高度。 所有浮动标签都不区分内联标签和块级标签。 也就是说：元素一旦浮动，就可以并排放置，并且可以设置宽度和高度。 不管它是一个div还是一个span。
1.2 浮动元素相互粘连
以float向左浮动为例：
如果空间足够，那么我就靠二哥，如果空间不够，那就靠一号大哥。
如果没有足够的空间靠着一号大哥，你就自己贴在左边的墙上。
1.3 浮动元素具有“自循环”的效果
自包围效果是：浮动框可以覆盖文档标准流的第一个框，但不会覆盖里面的文字。 文本将显示在浮动框周围。
如果你在CSS代码中让div浮动，而p不浮动，那么p中的文字就会休眠，形成这种自循环的效果。
123 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字内容文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字内容文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字内容文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字内容文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字内容文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字内容文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字内容文本文本文本文本文本文本文本文本文本文本文本文本文本文本
2、绝对定位
3、固定定位
4、父子关系：儿子占据父亲内容的宽度和高度，与父亲内容无关。
10.z-index的规则是什么？ 11.属性值有哪些？ 描述一下它们的意思？
我在这里解释一下小米的功课： 1.不需要完成整个网页，只需将其设为“小米闪购区”即可
2、其实大家可以发现，小米闪购下的区域结构布局基本类似。
3.前端课程内容不同。 有太多的属性和太多的东西需要记住。 如果不小心，整个网页可能无法显示。
这对大家来说也是有好处的。 没有一点耐心，你就不可能取得伟大的成就。 磨练一下你的脾气，对你以后的发展会有很大的帮助。
回答：
z-index 用于控制元素重叠时的堆叠顺序。
适用于：已经定位的元素（即://fixed）。
一般的理解是，价值越高，价值越高。 看起来很简单，但是当 z-index 应用于复杂的 HTML 元素层次结构时，它的行为可能难以理解甚至不可预测。 由于z-index的堆叠规则非常复杂，下面我们一一解释。
先解释一个术语：
：翻译为“堆叠上下文”。 每个元素只属于一个堆叠上下文，元素的z-index描述了该元素的“z轴”在同一个堆叠上下文中的呈现顺序。
z 索引值：
默认值自动：
当页面上生成新盒子时，其默认 z-index 值为 auto，这意味着该盒子不会自行生成新的本地，而是与父盒子处于相同的堆叠上下文中。
正/负整数
该整数是当前框的 z-index 值。 z-index值为0也会生成一个local，这样盒子的父盒子的z-index就不会与其子盒子进行比较，相当于隔离了父盒子的z-index和子盒子的z-index子框的索引。
接下来，我们将从最简单的不使用 z-index 的情况开始，一步步进行。
微信扫一扫打赏
支付宝扫一扫打赏
