web前端面试题HTML/CSS部分

前端页面有哪三层构成，分别是什么？作用是什么？

　　1、结构层：由 HTML 或 XHTML 之类的标记语言负责创建，仅负责语义的表达。解决了页面“内容是什么”的问题。

　　2、表示层：由CSS负责创建，解决了页面“如何显示内容”的问题。

　　3、行为层：由脚本负责。解决了页面上“内容应该如何对事件作出反应”的问题。

css的基本语句构成是什么？

　　选择符{属性1:值1;属性2:值2;...}等。

主流的浏览器分别是什么内核？

　　IE：Trident内核

　　Mozilla FireFox：Gecko内核

　　Chrome、Safari：Webkit内核

　　Opera：Presto内核

经常遇到的浏览器兼容性有哪些？如何解决？

　　1、浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

　　2、IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。解决方案是在float的标签样式控制中加入 display:inline;将其转化为行内属性。测试代码如下：

<html><head>
    <title>Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style type="text/css">
        .one{
            float: left;
            width: 150px;
            height:150px;
            background:#EEE;
            margin: 5px 0 5px 150px;
        }
    </style></head><body>
    <div class="one">Double Margin Bug(150*150)</div></body></html>

　　正常的应该是：

　　但在IE6中是这样的：

　　加上display:inline;后才正常。

　　3、在ie6，ie7中元素高度超出自己设置高度。原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的。解决方案是加上overflow:hidden或设置line-height为更小的高度。测试代码：

.one{
    height:5px;
    width:100px;
    background:#F60;
}

　　HTML没变，还是<div class="one"></div>，在IE6下显示为：

　　这个一看就知道不止5px，CSS改为下面两种之一就可以了：

.one{
    height:5px;
    width:100px;
    overflow:hidden;
    background:#F60;
}/*--或--*/
.one{
    height:5px;
    width:100px;
    font-size:2px;
    line-height:2px;
    background:#F60;
}

　　注意这里加了line-height:2px后还要加上font-size才行。效果如图：

　　4、min-height在IE6下不起作用。解决方案是添加 height:auto !important;height:xxpx;其中xx就是min-height设置的值。

　　5、透明性IE用filter:Alpha(Opacity=60)，而其他主流浏览器用 opacity:0.6;

　　6、a(有href属性)标签嵌套下的img标签，在IE下会带有边框。解决办法是加上a img{border:none;}样式。

　　7、input边框问题。去掉input边框一般用border:none;就可以，但由于IE6在解析input样式时的BUG(优先级问题)，在IE6下无效。

　　ie6的默认CSS样式，涉及到border的有border-style:inset;border-width:2px;浏览器根据自己的内核解析规则，先解析自身的默认CSS，再解析开发者书写的CSS，达到渲染标签的目的。IE6对INPUT的渲染存在bug，border:none;不被解析，当有border-width或border-color设置的时候才会令IE6去解析border-style:none;。

　　解决方案是用:border:0或border:0 none;或border:none:border-color:transparent;，推荐用第三种方案。

　　8、父子标签间用margin的问题，表现在有时除IE(6/7)外的浏览器子标签margin转移到了父标签上，IE6&7下没有转移。测试代码：

<body>
    <style type="text/css">
        .box1{
            height:150px;
            background:#CCC;
        }
        .box1_1{
            height:50px;
            margin-top:50px;
            background:#AAA;
        }
    </style>
    <div class="box1">
        <div class="box1_1">box1_1</div>
    </div></body>

　　chrome & FireFox & IE8 & IE9下的效果为：

　　IE6 & IE7 下的效果：

　　对于这两种显示效果，我倒认为IE6&IE7是正确的，不知道是否有朋友能给出解释。

　　解决办法就是父子标签间的间隔建议用padding，兄弟标签间用margin。

　　9、假设两块div，第一块浮动而第二块没有浮动，IE6下第二块就会跑到第一块边上，并且二者之间还留有间距，但标准浏览器中是第二块重合于第一块。测试代码：

<body>
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            border:1px solid #CCC;
        }
        .one{
            float:left;
            height:50px;
        }
    </style>
    <div class="one">One</div>
    <div class="two">Two</div></body>

　　正常应该是：

　　IE6中是：

　　解决办法是改变设计思路，如果真有两个div重合的需求，可以用下面的代码实现：

<body>
    <style type="text/css">
        div{
            width:100px;
            height:100px;
            border:1px solid #CCC;
        }
        .parent{
            position:relative;
        }
        .one{
            position:absolute;
            left:0;
            top:0;
        }
    </style>
    <div class="parent">
        <div class="one">One</div>
        <div class="one">Two</div>
    </div></body>

　　10、父子关系的标签，子标签浮动导致父标签不再包裹子标签。测试代码：

<body>
    <style type="text/css">
        .parent{
            background:#888;
            border:5px solid #888;
        }
        .one{
            float:left;
            width:100px;
            height:100px;
            background:#F60;
        }
    </style>
    <div class="parent">
        <div class="one">One</div>
    </div></body>

　　在IE、Chrome、Firefox下都是下面的效果：

　　可以看到父元素并没有包裹子元素，这是因为float造成的，解决方案是清除浮动就行了，用下面的代码可以解决：

<body>
    <style type="text/css">
        .parent{
            background:#888;
            border:5px solid #888;
            zoom:1;/*--for IE--*/
        }
        .parent:after{ /*--for other broswer--*/
            content:".";
            display:block;
            line-height:0;
            clear:both;
            visibility:hidden;
        }
        .one{
            float:left;
            width:100px;
            height:100px;
            background:#F60;
        }
    </style>
    <div class="parent">
        <div class="one">One</div>
    </div></body>

　　现在效果是：

　　最后关于float力荐两篇文章：CSS float浮动的深入研究、详解及拓展(一)、CSS float浮动的深入研究、详解及拓展(二)

如何居中一个浮动元素?

　　父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。

<!DOCTYPE html><html><head>
    <title>Demo</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        .p{
            position:relative;
            left:50%;
            float:left;
        }
        .c{
            position:relative;
            float:left;
            right:50%;
        }
    </style></head><body>
    <div class="p">
        <h1 class="c">Test Float Element Center</h1>
    </div></body></html>

你如何管理CSS文件、JS与图片？

　　1、对各个项目中CSS，JS里的稳定的通用代码进行提取，形成公共文件，然后利用CDN等资源进行缓存，减轻服务器压力。

　　2、去掉JS、CSS里的冗余代码，对代码进行精减。

　　3、对JS、CSS进行压缩合并，减少请求次数。

　　4、对页面上的小图标，背景等图片进行合并，减少请求次数。

5、JS、CSS、图片均用版本控制工具进行管理，方便修改与恢复。

web前端面试题HTML/CSS部分的更多相关文章

  1. [WEB面试题] web前端面试题HTML+CSS第一弹，个人整理部分面试题汇总

    以下内容仅供参考,网络整理而来 1.XHTML和HTML是什么有什么不同的区别 HTML是一种基本的WEB网页设计语言 XHTML可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTM ...

  2. 2016最全的web前端面试题及答案整理

    面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...

  3. web前端面试题库

    web前端面试题及答案   1.常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera.    (Q2) ...

  4. 第136天：Web前端面试题总结（理论）

    Web前端面试题总结 HTML+CSS理论知识 1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服 ...

  5. 金三银四，磨砺锋芒；剑指大厂，扬帆起航（2020年最全大厂WEB前端面试题精选）上

    金三银四,磨砺锋芒:剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上 引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待! ...

  6. 好程序员分享Web前端面试题汇总JS篇之跨域问题

    为什么80%的码农都做不了架构师?>>>   好程序员分享Web前端面试题汇总JS篇之跨域问题,接着上一篇文章我们继续来探讨web前端面试必备面试题. 跨域解决方案 1. 通过jso ...

  7. 【web前端面试题整理02】前端面试题第二弹袭来，接招！

    前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...

  8. 【重点--web前端面试题总结】

    前端面试题总结 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScri ...

  9. 前端面试题：CSS实现水平垂直居中

    这是一个挺常见的前端面试题,但是没有做过总结.有的时候可能会使用完了,很长一段时间不去使用,会慢慢忘记.所以,温故而知新,还是很有必要的. 一.绝对定位元素的居中实现 这一种工作中用的应该是最多的,兼 ...

随机推荐

  1. 2018北美部分CS项目学费

    yearly cost from official website USC 城里 24credit about 49k + cost of room&food BU 城里 NEU 65k 城里 ...

  2. gulp 配置达到实现import export支持

    gulp.task('tojs', () => { return gulp.src('./es/**/*.js') .pipe(babel({ babelrc: false, plugins: ...

  3. 图片路径中含有中文在jsp下不能正常显示的问题

    图片路径中含有中文在jsp下不能正常显示的问题~ 这里其实涉及到get请求编码和url编码的问题. jsp页面: 当路径中存在中文的时候,最简单的解决办法是改变tomcat的编码: 在conf/ser ...

  4. vue实现未登录跳转到登录页面

    环境:vue 2.9.3; webpack;vue-router 目的:实现未登录跳转 例子:直接在url地址栏输入...../home,但是这个页面要求需要登陆之后才能进入,判断的值就通过登陆之后给 ...

  5. call与apply简单介绍

    var pet={ word:'...', speak:function(say){ console.log(say+' '+this.word) } } //pet.speak('speak')// ...

  6. elasticsearch无故关闭，Log无报错

    可以看到图中的关闭log之前没有任务报错,这也让博主非常抓狂,这看着就像是人为关闭的,于是博主在群里问是不是有人动过该服务,确认没人关闭后,百度无果,社区上也没找到有关信息,最后灵光一闪,猜测是不是因 ...

  7. (转)SVN搭建(附下载地址)

    原文地址:http://blog.csdn.net/jiminull/article/details/7763795 一.SVN服务端 1.VisualSVN Server下载: http://dow ...

  8. 【Linux】【secureCRT】下载，安装，激活攻略

    以前公司使用的是SSH访问Linux服务器,今天争取了能看到数据,问了同事使用的是secureCRT,然后自己就装了一个. 下载地址:https://www.vandyke.com/download/ ...

  9. elasticssearch+kibanna入门（撰写中）

    看到一篇elasticssearch+kibanna的文章,觉得很好,不过例子是python的,所以使用java自己安装一下: https://mp.weixin.qq.com/s?__biz=MjM ...

  10. Android自定义View学习（二）

    绘制顺序 参考:HenCoder Android 开发进阶:自定义 View 1-5 绘制顺序 绘制过程 包括 背景 主体(onDraw()) 子 View(dispatchDraw()) 滑动边缘渐 ...