web前端面试题HTML/CSS部分
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部分的更多相关文章
- [WEB面试题] web前端面试题HTML+CSS第一弹,个人整理部分面试题汇总
以下内容仅供参考,网络整理而来 1.XHTML和HTML是什么有什么不同的区别 HTML是一种基本的WEB网页设计语言 XHTML可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTM ...
- 2016最全的web前端面试题及答案整理
面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...
- web前端面试题库
web前端面试题及答案 1.常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera. (Q2) ...
- 第136天:Web前端面试题总结(理论)
Web前端面试题总结 HTML+CSS理论知识 1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服 ...
- 金三银四,磨砺锋芒;剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上
金三银四,磨砺锋芒:剑指大厂,扬帆起航(2020年最全大厂WEB前端面试题精选)上 引言 元旦匆匆而过,2020年的春节又接踵而来,大家除了忙的提着裤子加班.年底冲冲冲外,还有着对于明年的迷茫和期待! ...
- 好程序员分享Web前端面试题汇总JS篇之跨域问题
为什么80%的码农都做不了架构师?>>> 好程序员分享Web前端面试题汇总JS篇之跨域问题,接着上一篇文章我们继续来探讨web前端面试必备面试题. 跨域解决方案 1. 通过jso ...
- 【web前端面试题整理02】前端面试题第二弹袭来,接招!
前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...
- 【重点--web前端面试题总结】
前端面试题总结 HTML&CSS: 对Web标准的理解.浏览器内核差异.兼容性.hack.CSS基本功:布局.盒子模型.选择器优先级及使用.HTML5.CSS3.移动端适应. JavaScri ...
- 前端面试题:CSS实现水平垂直居中
这是一个挺常见的前端面试题,但是没有做过总结.有的时候可能会使用完了,很长一段时间不去使用,会慢慢忘记.所以,温故而知新,还是很有必要的. 一.绝对定位元素的居中实现 这一种工作中用的应该是最多的,兼 ...
随机推荐
- Webbrowser指定IE内核版本(更改注册表)
如果电脑上安装了IE8或者之后版本的IE浏览器,Webbrowser控件会使用IE7兼容模式来显示网页内容.解决方法是在注册表中为你的进程指定引用IE的版本号. 比如我的程序叫做a.exe 对于32位 ...
- QueryString to Dictionary<string, string>
public class ModelConvertHelper<T> where T : new() {// 此处一定要加上new() public static IList<T&g ...
- tips:可变参数列表
tips:可变参数列表! 先来看看以往我们要传递许多参数时是怎么做的: java: public static void main(String []args){} c: int main(int a ...
- Solr高效利用:Solr实现SQL的查询与统计
1.如何高效使用Solr查询功能 ?2.单个字段分组统计如何实现? 3.IN条件查询有几种方式? 4.多个字段分组统计是否只支持count? Cloudera公司已经推出了基于Hadoop平台的查询统 ...
- MySQL表中的数据类型
数据类型:在表中数据类型主要是限制字段必须以什么样的数据类型传值. 一 整型 整数类型:TINYINT SMALLINT MEDIUMINT INT BIGINT总共有五种,name我们一般用到的也就 ...
- 模拟python中的Yield伪并发
并发,在操作系统中,是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机上运行,但任一个时刻点上只有一个程序在处理机上运行. #Yield伪并发 _author_= ...
- day25类的组合多态封装
类的组合多态与封装类的组合 1. 什么是组合 组合指的是某一个对象拥有一个属性,该属性的值是另外一个类的对象 2. 为何要用组合 通过为某一个对象添加属性(属性的值是另外一个类的对象)的方式,可以 ...
- 【Eclipse】将Tab替换为空格
工作中由于TAB和空格的占位不一样,在比对代码的时候,总是对齐方式不正确. 所以,就网搜了下Tab替换空格的方式,还不错哦,记录下来. 操作如下: 1.点击 window->preference ...
- 使用python操作excel表格
首先 pip install xlrd 安装相关模块 其次:使用方法: 1 导入模块 import xlrd 2 打开excel文件读取数据 worksheet=xlrd.open_workbook ...
- pyautogui控制鼠标键盘自动填写数据
import os import pyautogui import time, os import pyperclip # 复制 pyautogui.FAILSAFE = False class Au ...