前端攻城狮学习笔记七:常见前端面试题之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、图片均用版本控制工具进行管理,方便修改与恢复。
我能想到的就这么多,请大家继续补充。
小结
以上总结只是依据本人目前的水平给出的自己的看法,不确保严格正确,如果有误欢迎大家指出。
以上题目主要是选自淘宝2011年HTML&CSS面试题的剩余几题。如果大家有什么好的前端面试题,欢迎提供。
转载于:https://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html
前端攻城狮学习笔记七:常见前端面试题之HTML/CSS部分(二)相关推荐
- web前端攻城狮 学习笔记——HTML基础
开始学习web前端开发基础了,我是跟着清华大学在学堂在线的<Web前端攻城狮>学习的,把一些笔记记在这里,方便后期查阅. 1 HTML基础 HTML是超文本语言. 一段HTML代码: &l ...
- java web前端攻城狮 学习路线图
- 15个前端攻城狮必备的学习网站 | 你知道几个?(附视频介绍)
前端开发所需掌握知识点概要 HTML&CSS: 对Web标准的理解(结构.表现.行为).浏览器内核.渲染原理.依赖管理.兼容性.CSS语法.层次关系,常用属性.布局.选择器.权重.盒模型.Ha ...
- 活动报名 | 前端攻城狮该怎样跳脱“围城”的焦虑
活动报名 | 前端攻城狮该怎样跳脱"围城"的焦虑 原创: 京小云 京东云开发者社区 4天前 作为WEB2.0的产物,前端工程师这一相对较新的职业俨然变成了一颗?一样的存在--丰富 ...
- animejs走马灯_web前端攻城狮超爱的JS动画库插件—anime.js
作为一名web前端攻城狮,除了完成日常业务逻辑处理之外,也会去注重一些用户体验交互的问题.特别是如今web前端的发展很快,很多优秀js插件层出不穷.对于web前端开发者,也要会利用这些现有的js插件, ...
- 微信小游戏的前端攻城狮玩法
转自自己在开源中国上的博客:https://my.oschina.net/u/7247... 前言 公司群里经常有人会发一些微信小游戏,每次下面都会跟好多晒分截图.比如这个<看你有多色>的 ...
- 三国麻将攻城的java_Java 攻城狮学习线路图
图1 Java攻城狮学习线路图 01 轻轻的 轻轻的我走了 正如我轻轻的来 一切都是那么的轻 一切都是那么的自然 时光荏苒,来也匆匆,去也匆匆 一眨眼,已不再是学校温室里的巨婴 一不留神,已以小学生身 ...
- 一个不务正业的前端攻城狮
猿叔 一个不务正业的前端攻城狮 特别欢迎热衷于写作的在校学生 以及那些正在运营自己的微信公众号的喜欢写作的朋友积极投稿 希望投稿的文章最好是温暖治愈的爱情小故事 或者能够给予人启发的人生感悟 温暖,治 ...
- 适合网络攻城狮学习的Python——基本语法(字典)
字典与元素 1️⃣字典概念与元素 概念 定位元素 增加.修改元素 删除元素 2️⃣方法和函数 len() keys() values() items() pop() get() 3️⃣小结 再不努力, ...
最新文章
- form表单提交前进行ajax或js验证,校验不通过不提交
- 剑指offer:面试题17. 打印从1到最大的n位数
- Oracle Database 9i 10g 11g编程艺术 深入数据库体系结构 第2版pdf
- Linux 操作系统原理 — 多处理器架构
- MATLAB化坐标系(转载的)
- C++Doubly Linked List双向链表(附完整源码)
- sonar plugin DefaultMeasure与DefaultHighlighting
- C++多线程快速入门(五)简单线程池设计
- randomized algorithms 有哪些_毛毯分类有哪些 毛毯的种类
- elastic search与postgresql的数据同步
- mysql数据库模糊查询简介
- python办公实例100例-Python 100例(上)
- php和python-python与php比较
- Boot Camp 驱动
- Andoird开发--指南针(基于手机传感器)
- 【集训队作业】LYRC
- Vue全家桶基础设施环境搭建
- idea 2020,2021,2022石皮-解到2099年怎么搞
- 前端 Switch 开关功能
- 年终总结2019-2020
热门文章
- SQL2000中因为选定的用户拥有对象,所以无法除去该用户.
- SqlCommandBuilder
- .NET中的文件IO操作实例
- android开发环境 国内镜像 及Android SDK manager使用国内服务器方法
- input自适应_深度残差网络+自适应参数化ReLU(调参记录18)Cifar10~94.28%
- nodejs源码_格物致知记一次nodejs源码分析的经历
- 蓝桥杯历届试题 剪格子 (DFS)
- 深入解析 Dubbo 3.0 服务端暴露全流程
- Flagger on ASM——基于Mixerless Telemetry实现渐进式灰度发布系列 2 应用级扩缩容
- 阿里云帮助江苏省财政厅力推统一公共支付平台