前端面试题总结之HTML与CSS (四)

请用CSS 实现：一个矩形内容，有投影，有圆角，hover 状态慢慢变透明。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 300px;
            height: 200px;
            border-radius: 10px;
            box-shadow: 0 0 10px 4px rgba(13, 1, 1, 0.3);
            margin: 40px auto;
            background-color: #f00;
            transition: all 1s;
            cursor: pointer;
        }
        .box:hover{
            filter:alpha(opacity=0); /* IE */
            opacity: 0;
        }
    </style>
</head>
<body>
<div class="box">

</div>
</body>
</html>

html5\CSS3 有哪些新特性、移除了那些元素？如何处理HTML5 新标签的浏览器兼容问题？如何区分HTML 和HTML5？

HTML5 现在已经不是SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的增加。
* 绘画canvas 元素
用于媒介回放的video 和audio 元素
本地离线存储localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
CSS3 实现圆角，阴影，对文字加特效，增加了更多的CSS 选择器多背景rgba
新的技术webworker, websockt, Geolocation
- 移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
* 是IE8/IE7/IE6 支持通过document.createElement 方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5 新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim 框架

<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->

你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏品字布局如何设计?

首先划分成头部、body、脚部；。。。。。
实现效果图是最基本的工作，精确到2px；
与设计师，产品经理的沟通和项目的参与做好的页面结构，页面重构和用户体验
处理hack，兼容、写出优美的代码格式
针对服务器的优化、拥抱HTML5。

请谈一下你对网页标准和标准制定机构重要性的理解。

（无标准答案）网页标准和标准制定机构都是为了能让web 发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO 也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

知道css 有个content 属性吗？有什么作用？有什么应用？

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
最常见的应用是利用伪类清除浮动。
//一种常见利用伪类清除浮动的代码

.clearfix:after {
    content:""; //这里利用到了content 属性
    display:block;
    height:0;
    visibility:hidden;
    clear:both; 
}
.clearfix {
    *zoom:1;//触发ie的hasLayout属性
}

那么问题继续还有，知道css 计数器（序列数字字符自动递增）吗？如何通过css content 属性实现css 计数器？
答案：css 计数器是通过设置counter-reset 、counter-increment 两个属性、及counter()/counters()一个方法配合after / before 伪类实现。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            counter-reset: section;//counter-reset属性创建或重置一个或多个计数器。
        }
        h1{
            counter-reset: subsection;
        }
        h1:before{
            counter-increment: section;
            content: 'Section' counter(section) ".";
        }
        h2:before{
            counter-increment: subsection;
            content: counter(section) "." counter(subsection) "";
        }
    </style>
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h2>h22</h2>
<h2>h222</h2>

<h1>h111</h1>
<h2>h222</h2>
<h2>h222</h2>

<h1>h111</h1>
<h2>h222</h2>
<h2>h222</h2>
</body>
</html>