devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

前端面试题总结之HTML与CSS (三)_前端面试导航故障

作者：知新_RL | 2024-07-17 10:27:57

赞

踩

前端面试导航故障

请用Css 写一个简单的幻灯片效果页面

<!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>
        .box{
            width: 400px;
            height: 300px;
            margin: 30px auto;
            overflow: hidden;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-animation: slide 20s linear infinite;
            -o-animation: slide 20s linear infinite;
            animation: slide 20s linear infinite;
        }
        @keyframes slide {
            0%{
                background-image: url(./img/1.jpg);
            }
            25%{
                background-image: url(./img/2.jpg);
            }
            50%{
                background-image: url(./img/3.jpg);
            }
            65%{
                background-image: url(./img/4.jpg);
            }
            90%{
                background-image: url(./img/5.jpg);
            }
        }
    </style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44

css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？

垂直方向：line-height
水平方向：letter-spacing
那么问题来了，关于letter-spacing 的妙用知道有哪些么？
答案:可以用于消除inline-block 元素间的换行符空格间隙问题。

如何垂直居中一个浮动元素？

// 方法一：已知元素的高宽
#div1{
    background-color:#6699FF;
    width:200px;
    height:200px;
    position: absolute; //父元素需要相对定位
    top: 50%;
    left: 50%;
    margin-top:-100px ; //二分之一的height，width
    margin-left: -100px;
}


那么问题来了，如何垂直居中一个<img>?（用更简便的方法。）
#container //<img>的容器设置如下
{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

描述一个”reset”的CSS 文件并如何使用它。知道normalize.css 吗？你了解他们的不同之处？

重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置CSS 文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。你可能会用Normalize 来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了
一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像HTML 的audio 元素不一致或line-height 不一致。

Sass、LESS 是什么？大家为什么要使用他们？

CSS 预处理器。他是CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
例如Less 是一种动态样式语言. 将CSS 赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行(支持IE 6+, Webkit, Firefox)，也可一在服务端运行(借助Node.js)。
为什么要使用它们？
- 结构清晰，便于扩展。
- 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
- 可以轻松实现多重继承。
- 完全兼容CSS 代码，可以方便地应用到老项目中。LESS 只是在CSS 语法上做了扩展，所以老的CSS 代码也可以与LESS 代码一同编译。

Link 属于html 标签，而@import 是CSS 中提供的
在页面加载的时候，link 会同时被加载，而@import 引用的CSS 会在页面加载完成后才会加
载引用的CSS
@import 只有在ie5 以上才可以被识别，而link 是html 标签，不存在浏览器兼容性问题
Link 引入样式的权重大于@import 的引用（@import 是将引用的样式导入到当前的页面中）

IE 的双边距BUG：块级元素float 后设置横向margin，ie6 显示的margin

比设置的较大。解决：加入 _display：inline

HTML 与XHTML——二者有什么区别？

  1. 所有的标记都必须要有一个相应的结束标记
  2. 所有标签的元素和属性的名字都必须使用小写
  3. 所有的XML 标记都必须合理嵌套
  4. 所有的属性必须用引号”” 括起来
  5. 把所有< 和& 特殊符号用编码表示
  6. 给所有属性赋一个值
  7. 不要在注释内容中使用”–”
  8. 图片必须有说明文字

html 常见兼容性问题？

1.双边距BUG float 引起的使用display
2.3 像素问题使用float 引起的使用dislpay:inline -3px
3.超链接hover 点击后失效使用正确的书写顺序link visited hover active
4.Ie z-index 问题给父级添加position:relative
5.Png 透明使用js 代码改
6.Min-height 最小高度！Important 解决’
7.select 在ie6 下遮盖使用iframe 嵌套
8. 为什么没有办法定义1px 左右的宽度容器（ IE6 默认的行高造成的， 使用over:hidden,zoom:0.08 line-height:1px）
9.IE5-8 不支持opacity，解决办法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; /* for IE
8*/
}

IE6 不支持PNG 透明背景

解决办法: IE6 下使用gif 图片

Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

（1）、 声明位于文档中的最前面，处于 标签之前。告知浏览器的
解析器，用什么文档类型规范来解析这个文档。
（2）、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

（1）CSS 规范规定，每个元素都有display 属性，确定该元素的类型，每个元素都有默认的display 值，比如div 默认display 属性值为“block”，成为“块级”元素；span 默认display 属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul
ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：

<br><hr><img><input><link><meta>
  • 1

鲜为人知的是： 

<area><base><col><command>
<embed><keygen><param><source><track><wbr>
  • 1
  • 2

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增伪类有那些？

  • 1.id 选择器（ # myid）
    2.类选择器（.myclassname）
    3.标签选择器（div, h1, p）
    4.相邻选择器（h1 + p）
    5.子选择器（ul < li）
    6.后代选择器（li a）
    7.通配符选择器（ * ）
    8.属性选择器（a[rel = “external”]）
    9.伪类选择器（a: hover, li: nth - child）
  • 可继承： font-size font-family color, UL LI DL DD DT;
  • 不可继承：border padding margin width height ;
  • 优先级就近原则，样式定义最近者为准;
  • 载入样式以最后载入的定位为准;
    优先级为:
    !important > id > class > tag
    important 比内联优先级高
    CSS3 新增伪类举例：
    p:first-of-type 选择属于其父元素的首个

    元素的每个

    元素。
    p:last-of-type 选择属于其父元素的最后

    元素的每个

    元素。
    p:only-of-type 选择属于其父元素唯一的

    元素的每个

    元素。
    p:only-child 选择属于其父元素的唯一子元素的每个

    元素。
    p:nth-child(2) 选择属于其父元素的第二个子元素的每个

    元素。
    :enabled、:disabled 控制表单控件的禁用状态。
    :checked，单选框或复选框被选中。
    50、如何居中div,如何居中一个浮动元素?
    给div 设置一个宽度，然后添加margin:0 auto 属性
    div{
    width:200px;
    margin:0 auto;
    }
    居中一个浮动元素
    确定容器的宽高宽500 高300 的层
    设置层的外边距
    .div {
    Width:500px ; height:300px;//高度可以不设
    Margin: -150px 0 0 -250px;
    position:relative;相对定位
    background-color:pink;//方便看效果
    left:50%;
    top:50%;
    }

absolute 的containing block 计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的position 值不为static 的元素，然后再判断：
（1）若此元素为inline 元素，则containing block 为能够包含这个元素生成的第一个和最后一个inline box 的padding box (除margin, border 外的区域) 的最小矩形；
（2）否则,则由这个祖先元素的padding box 构成。
如果都找不到，则为initial containing block。
补充：
（1）static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
（2） absolute: 向上找最近的定位为absolute/relative的元素
（3） fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block

position 跟display、margin collapse、overflow、float 这些特性相互叠加后会怎么样？

什么是Css Hack？ie6,7,8 的hack 分别是什么？

答案：针对不同的浏览器写不同的CSS code 的过程，就是CSS hack。
示例如下：

#test {
width:300px;
height:300px;
background-color:blue; /*firefox*/
background-color:red\9; /*all ie*/
background-color:yellow\0; /*ie8*/
+background-color:pink; /*ie7*/
_background-color:orange; /*ie6*/ }
:root #test { background-color:purple\9; } /*ie9*/
@media all and (min-width:0px){ #test {background-color:black\0;} } /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test
{background-color:gray;} } /*chrome and safari*/
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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

新特性：
1. 拖拽释放(Drag and drop) API
2. 2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation
移除的元素：
1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
2. 对可用性产生负面影响的元素：frame，frameset，noframes；
支持HTML5 新标签：
1. IE8/IE7/IE6 支持通过document.createElement 方法产生的标签，可以利用这一特性
让这些浏览器支持HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当
然最好的方式是直接使用成熟的框架、使用最多的是html5shim 框架）：

HTML5 存储类型有什么区别？

答：Media API、Text Track API、Application Cache API、User Interaction、Data Transfer
API、Command API、Constraint Validation API、History API

用H5+CSS3 解决下导航栏最后一项掉下来的问题

 box-sizing: border-box;
  • 1

CSS3 新增伪类有那些？

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。
p:only-child 选择属于其父元素的唯一子元素的每个

元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/839416
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号