前端面试题总结 HTML+CSS篇(一)

介绍一下dldtdd标签

dl是列表标签,dt和dd须出现在dl中,其中,dt是上层项目,dl是下层项目。在浏览器渲染时,二者差别体现在dd会因为-webkit-margin-start属性而距离dt的左边有一定的边距。

行内元素、块级元素、空元素都有哪些?

如果不考虑html5的语义化标签,那么
行内元素有:

imginputaspanistrongselectbuttonlabeltextarea

块级元素有:
divuloldllidddtblockquotep

空元素是指单个标签,中间没有内容的元素,包括:
inputimgbrhrmetalink

css如何实现垂直水平居中?

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS垂直居中</title>
<style>
    .wrapper{
        width: 500px;
        height: 500px;
        background-color: #666;
        /*方式一,方式二 绝对定位的方式*/
        /*position: relative;*/
        /*方式三 基于属性计算*/
        /*overflow: hidden;*/
        /*方式四: 基于vertical-align属性*/
        /*text-align: center;*/
        /*方式五: 使用弹性盒子*/
        /*display: flex;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        /*方式六 基于块级内联元素的特性*/
        line-height: 550px; /*.wrapper.height+1/2*box.height*/
        text-align: center;
    }

    .box{
        width: 100px;
        height: 100px;
        background-color: red;
        /*方式一*/
        /*position: absolute;*/
        /*left:0;*/
        /*right: 0;*/
        /*top:0;*/
        /*bottom:0;*/
        /*margin: auto;*/
        /*方式二*/
        /*position: absolute;*/
        /*left: 50%;*/
        /*top: 50%;*/
        /*margin-left: -50px; !*1/2的width*!*/
        /*margin-top: -50px; !*1/2的height*!*/
        /*方式三*/
        /*margin: calc(50% - 50px) auto;*/
        /*方式四*/
        /*display: inline-block;*/
        /*vertical-align: middle;*/
        /*margin: 0 auto;*/
        /*方式六*/
        display: inline-block;
    }

    /*方式四的辅助元素*/
    /*.help{*/
        /*width: 0;*/
        /*height: 100%;*/
        /*display: inline-block;*/
        /*vertical-align: middle;*/
    /*}*/
</style>
</head>
<body>
<div class="wrapper">
    <div class="box"></div>
    <!--方式四-->
    <!--<div class="help"></div>-->
</div>
</body>
</html>

请简述href和src的区别

href指向网络资源所在位置,建立和当前元素或文档的连接,常用于a标签和link标签。
src指向外部文档,指向的内容将会嵌入到文档中当前标签所在位置。在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。
总而言之,我们在可替换的元素上使用src,然而把href用于在涉及的文档和外部资源之间建立一个引用关系。

请简述link和@import的区别

(1)link是XHTML标签,除了加载CSS外,还可以定义RSS( 真正简易联合,被设计用来展示选定的数据)等其他事务;@import属于CSS范畴,只能加载CSS。

(2)link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

(3)link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

(4)link支持使用Javascript控制DOM去改变样式;而@import不支持。

什么是CSS hack?有什么作用?

通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号,以达到应用不同的CSS样式的目的。Hack一般又分为三种,条件Hack(if ie)、属性级Hack(_color)、选择符Hack(* + html)

请简述px,rem和em有什么区别?

px是绝对尺寸单位,其值是固定的。而em和rem是字体相对尺寸单位,其值并不固定。em会继承父级元素的字体大小,而rem则是相对于html根元素确定的。

什么是优雅降级、什么是渐进增强?

渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

浏览器的内核分别是什么?

IE: trident内核
Firefox:gecko内核

Safari:webkit内核

Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

Chrome:Blink(基于webkit,Google与Opera Software共同开发)

说说对BFC的理解

BFC,块级格式化上下文,一个创建了新的BFC的盒子是独立布局的,盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向(和布局方向有关系)的 margin 会发生折叠。W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行布局,以及与其他元素的关系和相互作用。

table布局的缺点?

(1)首先,table布局会占用更多的字节,从而影响下载速度
(2)table布局编写起来麻烦耗时,即不利于设计思维,也影响开发者阅读体验。
(3)稍加改动就会造成大量的重排操作,且不利于浏览器的顺序渲染。

IT文库 » 前端面试题总结 HTML+CSS篇(一)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址