第5模块闯关CSS练习题

1.列举你知道的css选择器?

说道css选择器，大家都知道有许多种，但是真要你去掰着手指头数一数的话，你可能需要数几分钟。其实这么多选择器，完全可以分为两类：

1. 标签选择器（*是特殊情况），可但标签，也可上下文多标签；
2. 属性选择器（id和class都是属性，特殊的属性）；

2.1.    标签选择器

2.1.1 通用选择 *

　　通用选择器 * 大家应该都比较熟悉了，最常用的就是 *{margin:0; box-sizing:border-box;}。mragin:0咱们在上一节已经说过，box-sizing:border-box将在后面的盒子模型那块再详细描述。

　　例如，我们在检测bootstrap3的样式时，也可以看到它用到了 * 选择器：

　　

 单标签

 多标签

　　多标签选择器一般和html上下文有关，它有以下集中分类

1. 选择一个祖先的所有子孙节点，例如 div p{…}
2. 选择一个父元素的所有子属节点，例如 div > p{…}
3. 选择某一个元素紧挨着的兄弟节点，例如 li + li{…}
4. 选择某一个元素的所有同胞节点，例如 span ~ a{…}
5. 以上各种情况的组合应用（不要组合过于复杂，编码讲求可读性第一）

　　给大家列举一个比较典型的应用，如下图

　　

　　上图中的效果应该比较常见，在各个菜单之间加下划线。我之前的实现是：每个li都加一个border-bottom，在把最后一个li的border-bottom去掉。

　　其实完全没必要这样麻烦，下面一个样式设置即可解决：

　　

　　有点意思吧？

2.2.    属性选择器

2.2.1 特殊1：id选择器

　　基础知识，不再赘述。

　　按照许多css教程上讲的，id选择器和属性选择器是不同的两个类别，为什么要把id选择器放在属性选择器下面的呢？因为css选择器是根据html节点的特性来设置的，id也是一个属性，只是它是一个比较特殊的属性，每个html节点的id不能重复。

　　由于特殊，而且比较常用，所以就单独给id选择器一个“#”，本质上就是一个属性选择器。下面两行代码的执行效果完全相同：

　　

2.2.2 特殊2：class选择器

　　基础知识，不再赘述。

　　class也是一个特殊的属性，之所以把它放在属性选择器下，和上文将的id一样。

2.2.3 属性选择器

　　属性选择器有两种情况：

1. 只通过属性名选择：img[title]{…      }
2. 通过属性名和属性值选择：input[type=’text’]{…}

　　这两个也是比较基础的，再次也就不再详细展开了，不了解的朋友可以去看看基础教程补补课。

3. 伪类和伪元素

　　上文提到了若干种选择器类型，伪类和伪元素可针对任何一种选择器使用。

3.1.    伪类

　　伪类分为UI伪类和结构化伪类。

3.1.1 UI伪类

　　UI伪类都比较简单常用，我下面简单写几句代码，就不再详细说了。

　　

 结构化伪类（IE低版本不行）

　　先问大家一个问题：如何实现一个表格间隔显示背景颜色，如图：

　　

　　最简单的方式莫过于使用结构化伪类，一句样式设置即可实现。

　　

　　结构化伪类有如下书写选项，至于什么意思，从字面意思即可理解：

　　

   伪元素

　　记住，伪元素是一个非常重要的概念！其中，:before和:after 非常常用。

　　首先，咱们先看看:before和:after是怎么回事儿。

　　

　　上图中，我们可以看到，可以为元素前后添加内容。这里的“内容”还可以写成unicode编码的方式，如下图：

      

　　另外，除了可以添加内容外，你还可以自定义执行内容的样式，如下图：

　　

2.分别阐述类选择器和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	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

5.什么是标准文档流？

标准文档流

说白了就是一个“默认”状态。文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。

并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。

6.浮动盒子的特点？浮动的好处？如何清除浮动？

元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。元素浮动以后会脱离正常的文档流，所以文档的普通流中的框就变现的好像浮动元素不存在一样。

浮动的好处：

• 在图片周围包含文字 
  

• 创建网页布局 
  

  浮动的缺点：

• 无法撑起父元素。

• 同级别的兄弟元素会围绕在周围。

使用伪元素清除浮动:after（推荐使用）

示例

//在css中添加:after伪元素
.parent:after{
    content:"";
    visibility:hidden;
    display:block;
    100%;
    height:0;
    clear:both;
}

<div class="parent">
    <div class="f"></div>
</div>

7.精灵图的好处是什么？
CSS Sprites 的优点： 
1、减少图片的字节 
2、减少了网页的http请求，从而大大的提高了页面的性能 
3、解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。 
4、更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

8.定位有几种？阐述一下“父相子绝”定位是怎样理解的？

如果要对一个子元素使用定位，那么应该是子元素是绝对定位，它的父元素为相对定位。让子元素 以其父元素为标准来定位。

如果不这么做，子元素就会相对body或浏览器定位产生不好的效果。

9.什么样的盒子脱离了文档标准流？脱离文档标准流的盒子的特点是怎样的？

1、浮动

　　浮动是CSS中用到的最多的一个选项，他有三个性质。关于浮动我们要强调一点，永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。

　　1.1 浮动元素脱离标准文档流

　　　　1.1.1 大概描述：有两个盒子，一个盒子浮动，一个盒子不浮动。浮动的盒子会脱离标准文档流，不浮动的盒子会在标准文档流中成为第一个，所以两者出现覆盖现象。

　　　　

　　　　1.1.2 大概描述：一个行内标签在标准文档流中是不能设置宽高的，但是使用float使其脱离文档流之后，就可以对其设置宽高了。所有浮动的标签不会去区分行内标签和块级标签。也就是说： 一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。

　　1.2 浮动的元素互相贴靠　

　　　　以float向左浮动为例：

　　　　如果有足够空间，那么就会靠着2哥。如果没有足够的空间，那么会靠着1号大哥。

　　　　如果没有足够的空间靠着1号大哥，自己去贴左墙。

　　　　

　　1.3 浮动元素有“自围”的效果

　　　　自围效果就是：浮动的盒子可以遮盖文档标准流的第一个盒子，但是不会遮盖里面的文字，文字会围绕浮动的盒子显示。

　　　　在CSS代码中让div浮动，p不浮动，那么p中的文字就睡形成这种自围效果。

<div>
    <img src="images/1.jpg" alt="" />
</div>
<p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>

　　　　

2、绝对定位

3、固定定位

4、父子关系：儿子就是占用父亲内容的宽高，和父亲的padding没有关系。

10.z-index的规则是怎样的？ 11.display属性值有哪些？分别描述他们的意思？

在这里说明一下 小米的作业 1.不用把整个网页做完，做到“小米闪购区域即可”

2.其实大家能发现，小米闪购下面的区域结构布局基本类似。

3.前端的课程内容跟python不同，属性太多，记得东西太多，一旦不小心，可能整个网页都显示不出来

这也是对大家有好处，没点耐心你成不了大事，磨磨自己的性子，对自己以后未来的发展有好大帮助。

答：

z-index用来控制元素重叠时堆叠顺序。

适用于：已经定位的元素（即position:relative/absolute/fixed）。

一般理解就是数值越高越靠上，好像很简单，但是当z-index应用于复杂的HTML元素层次结构，其行为可能很难理解甚至不可预测。因为z-index的堆叠规则很复杂，下面一一道来。

首先解释一个名词：

stacking context:翻译就是“堆叠上下文”。每个元素仅属于一个堆叠上下文，元素的z-index描述元素在相同堆叠上下文中“z轴”的呈现顺序。

z-index取值：

默认值auto：

当页面新生成一个box时，它默认的z-index值为auto，意味着该box不会自己产生一个新的local stacking context，而是处于和父box相同的堆叠上下文中。

正/负整数

这个整数就是当前box的z-index值。z-index值为0也会生成一个local stacking context，这样该box父box的z-index就不会和其子box做比较，相当于隔离了父box的z-index和子box的z-index。

接下来从最简单的不使用z-index的情况开始将，循序渐进。