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

布满荆棘的人生 2022-05-19 10:08 77阅读 0赞

## 请用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 框架

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

*  首先划分成头部、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>