HTML

1. 列举常见的块级元素和行内元素（各5个以上）。
   • 块级：
     • div , from , h1-h6 , ol , ul , p , table
   • 行内：
     • a , em(强调) , input , img , span , textarea

CSS

1. CSS有哪些选择器？
   • 标签选择器（如：body,div,p,ul,li）
   • 类选择器（如：class="head",class="head_logo"）
   • ID选择器（如：id="name",id="name_txt"）
   • 全局选择器（如：*号）
   • 组合选择器（如：.head , .head_logo,注意两选择器用空格键分开）
   • 后代选择器（如：div p,注意两选择器用空格键分开）
   • 伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）

2. CSS基础选择器的权重

   • 优先级
     • !important > 行内样式 > id选择器 > （属性选择器 == class选择器） > 标签选择器 > 全局选择器
   • 权重
     • !important（正无穷），行间样式（1000），id选择器（100），属性选择器||class选择器||伪类（10），标签选择器||伪元数（1），通配符选择器（0）

3. 列举position的值及说明相对于哪个位置定位的。

   • fixed 固定定位，相对于浏览器窗口进行定位
   • absolute 绝对定位， 相对于值不为 static 的第一个父元素进行定位
   • relative 相对定位, 相对于其正常位置进行定位
   • static 默认值，没有定位，元素出现在正常的流中
   • inherit 规定从父元素继承 position 属性的值

4. display有哪些值？说明它们的作用

   • 其中常用的的有none、inline、block、inline-block
   • none： 元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden， 是保留元素的空间的
   • inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline， 设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding
   • block： 将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行
   • inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height

5. CSS哪些样式可以继承？哪些不可继承？

   • 可继承
     • 所有元素可继承：visibility和cursor
     • 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
     • 块状元素可继承：text-indent和text-align
     • 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image
     • 表格元素可继承：border-collapse
   • 不可继承
     • 不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi

6. display: none; 和 visibility: hidden;的区别分别是什么？

   • display: none不占用原来的位置，而visibility: hidden保留原来的位置
   • 为什么display: none不占用原来的位置，但可以用js操作元素节点呢？
     • 根据浏览器的渲染原理，浏览器会解析HTML标签生成DOM Tree，解析CSS生成CSSOM，然后将DOM Tree和CSSOM合并生成Render Tree，元素在Render Tree中对应0或多个盒子，然后浏览器以盒子模型的信息布局和渲染界面。而设置为display: none的元素则在Render Tree中没有生成对应的盒子模型，因此后续的布局、渲染工作就没有了，至于DOM操作还是可以的。

7. 如何让超出宽度的文字显示省略号？

   • 关键是:text-overflow: ellipsis;
   • <code>
     div.titleholder {
     font-size: 8px;
     width: 100;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
     }
     </code>

8. 行内元素和块元素的特征是什么？

   • 块元素特点：
     • 独占一行
     • 元素的宽高和内外边距都可以设置
     • 宽度如果不设置就是父级元素的100%
     • 常见的块元素有以下几种：p div table h1-h6 ul ol li
   • 行内元素特点：
     • 和其他元素可以在同一行
     • 不能设置宽高，不能设置内外边距
     • 宽度就是图片或文字的宽度，不可以改变
     • 常见的行内元素有以下几种：span img br input

9. 编写一段代码，使一个子元素在父元素内水平垂直居中（最少两种）

10. 编写一段代码，实现一个三栏布局（左右固定200px，中间自适应）

    （圣杯布局与双飞翼布局）