1. 对 web 标准以及 W3C 的理解与认识?
标签闭合, 标签小写, 不乱嵌套, 提高搜索机器人搜索几率, 使用外链 CSS 和 js 脚本, 结构行为表现的分离, 文件下载与页面速度更快, 内容能被更多的用户所访问, 内容能被更广泛的设备所访问, 更少的代码和组件, 容易维护, 改版方便, 不需要变动页面内容, 提供打印版本而不需要复制内容, 提高网站易用性;
定制这些标准主要是为了提高网页加载速度, 便于开发. 同时这也是一种商业手法, 目的是让制造商重视并重新定位规范, 在新的浏览器和网络设备中完全地支持那些规范, 有利于整个行业的发展.
2. xhtml 和 html 有什么区别?
HTML 与 XHTML 是一种语言的不同阶段, 有点类似于文言文和白话文之间的关系. 在 XHTML 中标记名称, 属性名称必须小写, 标记必须严格嵌套, 必须封闭. 而 HTML 是一种基本的 WEB 网页设计语言, 定义为超文本标记语言.
3. Doctype? 严格模式与混杂模式 - 如何触发这两种模式, 区分它们有何意义?
用于声明文档使用那种规范 (html/Xhtml) 一般为严格过度基于框架的 html 文档.
加入 XMl 声明可触发, 解析方式更改为 IE5.5 拥有 IE5.5 的 bug.
4. 行内元素有哪些? 块级元素有哪些? CSS 的盒模型?
块级元素: div ph1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css 盒模型: 内容, border,margin,padding
5. CSS 引入的方式有哪些? link 和 @import 的区别是?
内联内嵌外链导入
区别: 同时加载
前者无兼容性, 后者 CSS2.1 以下浏览器不支持
Link 支持使用 javascript 改变样式, 后者不支持.
6. CSS 选择符有哪些? 哪些属性可以继承? 优先级算法如何计算? 内联和 important 哪个优先级高?
标签选择符类选择符 id 选择符
继承不如指定 Id>class > 标签选择
后者优先级高
7. 前端页面有哪三层构成, 分别是什么? 作用是什么?
结构层 Html(作用:)表示层 CSS 行为层 js
8. css 的基本语句构成是?
选择器{属性 1: 值 1; 属性 2: 值 2;......}
9. 你做的页面在哪些流览器测试过? 这些浏览器的内核分别是什么?
Ie(Ie 内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
10. 说出几种 IE6BUG 的解决方法
1. 双边距 BUG float 引起的使用 display
2.3 像素问题使用 float 引起的使用 dislpay:inline-3px
3. 超链接 hover 点击后失效使用正确的书写顺序 link visited hover active
4.Iez-index 问题给父级添加 position:relative
5.Png 透明使用 js 代码改
6.Min-height 最小高度! Important 解决'
7.select 在 ie6 下遮盖使用 iframe 嵌套
8. 为什么没有办法定义 1px 左右的宽度容器(IE6 默认的行高造成的, 使用 over:hidden,zoom:0.08line-height:1px)
9.ie 6 不支持! important
11. img 标签上 title 与 alt 属性的区别是什么?
Alt 当图片不显示是用文字代表.
Title 为该属性提供信息
12. 描述 cssreset 的作用和用途.
Reset 重置浏览器的 css 默认属性浏览器的品种不同, 样式不同, 然后重置, 让他们统一
13. 解释 csssprites, 如何使用, 他的优点是什么?
Css 精灵把一堆小的图片整合到一张大的图片上, 减轻服务器对图片的请求数量
14. 浏览器标准模式和怪异模式之间的区别是什么?
盒子模型渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式
15. 你如何对网站的文件和资源进行优化? 期待的解决方案包括:
文件合并
文件最小化 / 文件压缩
使用 CDN 托管
缓存的使用
16. 什么是语义化的 HTML?
直观的认识标签对于搜索引擎的抓取有好处
17. 清除浮动的几种方式, 各自的优缺点
1. 使用空标签清除浮动 clear:both(理论上能清楚任何标签,,, 增加无意义的标签)
2. 使用 overflow:auto(空标签元素清除浮动而不得不增加无意代码的弊端,, 使用 zoom:1 用于兼容 IE)
3. 是用 afert 伪元素清除浮动 (用于非 IE 浏览器) 先来简单讲讲 after, 所谓 after, 就是指标签的最后一个子元素的后面. 于是呢, 我们可以用 CSS 代码生成一个具有 clear 属性的元素, 其中的关键样式就是 content 了. 或许您从网上看到的 content 里面的内容是 "." 一个点, 我了很多次, 貌似随便写什么东西都没有问题.
- 18. css hack
- <!--[if IE 6]--><![end if]-->
- _marging\\IE 6
- +margin\\IE 7
Marging:0auto \9 所有 Ie
Margin \0\\IE 8
19. 超链接访问过后 hover 样式就不出现的问题?
解决方法是改变 CSS 属性的排列顺序: L-V-H-A.
例子:<style>
a:link{ background:red;}
a:hover{background:blue;}
a:visited{background:green;}
a:action{background:white;}
</style>
20. IE6 的双倍边距 BUG
给当前元素添加样式, 使当前元素不为块, 如: display:inline;display:list-item 这样在元素浮动的时候就不会在 ie6 下面产生双倍边距的问题了.
拓展: 这个 bug 是如何出现的?
当块级元素有浮动样式的时候, 给元素添加 margin-left 和 margin-right 样式, 在 ie6 下就会出现双倍边距.
21. 为什么 FF 下文本无法撑开容器的高度?
因为标准浏览器中固定高度值的容器是不会象 IE6 里那样被撑开的.
想固定高度, 又想能被撑开需要怎样设置呢?
办法就是去掉 height 设置 min-height:200px; 这里为了照顾不认识 min-height 的 IE6 可以这样定义:
- {
- height:auto!important;
- height:200px;
- min-height:200px;
- }
22. 为什么 web 标准中 IE 无法设置滚动条颜色了?
滚动条的颜色一直以来就只支持 IE 的浏览器, 就是 IE 浏览器 https://www.baidu.com/s?wd=IE浏览器&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1Y3m1N9rHFBuj6vuy7hmH0z0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHDkPW6dn1m3 的专有属性, 火狐等都是不支持的.
解决办法是将 body 换成 html.
注: 原来样式 < style type="text/css">
- body { scrollbar-face-color:#f6f6f6;scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff;scrollbar-darkshadow-color:#fff; }
- </style>
23. 为什么无法定义 1px 左右高度的容器?
IE6 下这个问题是因为默认的行高 (大概 10px) 造成的, 解决的方法也有很多, 例如: overflow:hidden | zoom:0.08 | line-height:1px.
24. 怎么样才能让层显示在 FLASH 之上呢?
解决的办法是给 FLASH 设置透明.
25. 怎样使一个层垂直居中于浏览器中?
针对于已知大小元素. 首先使用百分比的绝对定位, 此时只是层的左上角顶点居于浏览器中间, 要想使层的中心位于浏览器中间就要使层的左上角顶点向上, 向左移动高度, 宽度的一半(与外补丁负值的方法, 负值的大小为其自身宽度高度除以二).
例子:
- <styletype="text/css">
- .center{ background:red;
- width:200px;
- height:300px;
- position:absolute;
- top:50%;
- left:50%;
- margin:-150px 0 0 -100px;}
- </style>
- </head>
- <body>
- <div class="center">层垂直居中于浏览器</div>
- </body>
26. firefox 嵌套 div 标签的居中问题的解决方法
假定有如下情况:
- <div id="a"style="width:200px;border:1px solid red;text-align:center;">
- <div id="b"style="width:30px;"> </div>
- </div>
如果要实现 b 在 a 中居中放置, 一般只需用 CSS 设置 a 的 text-align 属性为 center. 这样的方法在 IE 里看起来一切正常; 但是在 Firefox 中 b 却会是居左的.
解决办法就是除了需要在 a 中设置 text-align 属性为 center 之后, 还需要设置 b 的横向 margin 为 auto. 例如设置 b 的 CSS 样式为: margin: 0auto;
所以, 设置如下就可以实现居中:
- <div id="a"style="width:200px;border:1px solid red;text-align:center;">
- <div id="b"style="width:30px;margin:0auto"> </div>
- </div>
27. 网页制作中有哪几种样式设置方法? 各有何特点?
28. 用户自定义的类和 ID 在定义和使用时有什么区别?
定义时, 类以英文形式的句点 "." 为起始标志, ID 以 "#" 为起始标志; 使用时, 类可以在一个页面中被多个不同的元素引用, 而 ID 在一个页面中只能被引用一次.
29. float 元素的父元素不能指定 clear 属性?
如果对 float 的元素的父元素使用 clear 属性, 周围的 float 元素布局就会混乱. 这是 MacIE 的著名的 bug, 倘若不知道就会走弯路.
30. 简述一下 src 与 href 的区别.
href 表示超文本引用(hypertext reference), 在 link 和 a 等元素上使用. src 表示来源地址, 在 img,script,iframe 等元素上.
src 的内容, 是页面必不可少的一部分, 是引入. href 的内容, 是与该页面有关联, 是引用. 区别就是, 引入和引用.
31. 知道的网页制作会用到的图片格式有哪些?
主流的用于网页的图像格式有 JPG,PNG,GIF 等
JPG: 压缩率高, 文件小, 最常用.
PNG: 支持无损压缩, 色彩损失小, 保真度高, 文件稍大.
GIF: 支持动画显示, 但只支持 256 色显示, 目前已经被 FLASH 大量取代.
32. 每个 HTML 文件里开头都有个很重要的东西, Doctype, 知道这是干什么的吗?
<!DOCTYPE> 声明位于文档中的最前面, 处于 <html> 标签之前. 告知浏览器的解析器, 用什么文档类型, 规范来解析这个文档.
33. 行内元素有哪些? 块级元素有哪些? CSS 的盒模型?
行内元素有: ab span img input select strong(强调的语气) 块级元素有: div ul olli dl dt dd h1 h2 h3 h4...p. 内容(content), 填充(内边距 padding), 边框(border), 边界(外边距 margin).
拓展: 知名的空元素:<br><hr><img><input><link><meta>
34. css 层叠是什么? 介绍一下.
CSS 是 Cascading Style Sheet 的缩写. 译作层叠样式表单. 是用于 (增强) 控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.
35. position 值都有哪些, css3 都有哪些新内容...
absolute
生成绝对定位的元素, 相对于 static 定位以外的第一个父元素进行定位.
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定.
fixed
生成绝对定位的元素, 相对于浏览器窗口进行定位.
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定.
relative
生成相对定位的元素, 相对于其正常位置进行定位.
因此,"left:20" 会向元素的 LEFT 位置添加 20 像素.
static 默认值. 没有定位, 元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明).inherit 规定应该从父元素继承 position 属性的值.
Css3 属性:
第 1 选择器
第 2 RGBA 和透明度
第 3 多栏布局
第 4 多背景图
第 5 Word Wrap
第 6 文字阴影
第 7 @font-face 属性
第 8 圆角(边框半径)
第 9 边框图片
第 10 盒阴影
第 11 盒子大小
第 12 媒体查询
第 13 语音
36. 在新窗口打开链接的方法是?
target=_bank
拓展: 为什么要清除浮动?
CSS 的 float 属性, 作用就是改变块元素对象的默认显示方式, HTML 标签设置了 float 属性之后, 它将不再独自占据一行, 从而可以实现多个元素同处一行的效果, 所以需要在样式定义的后面进行清除浮动.
通过指定 CSS 属性 float 的值, 从而使元素向左或向右浮动, 然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间. CSS 的 float 属性, 作用就是改变块元素对象的默认显示方式, HTML 标签设置了 float 属性之后, 它将不再独自占据一行, 从而可以实现多个元素同处一行的效果. Float 的功能很强大, 但是如果没有好好掌握而使用很可能会成为你调试样式的噩梦.
使用 Float 样式, 如果没有清除浮动, 那么有浮动元素的父元素容器将无法自动撑开. 如果没有清除内部浮动, 此时会导致浮动的父元素无法自动撑开到本身应有的高度. 也就是说: 当一个元素是浮动的, 如果没有关闭浮动时, 其父元素不会包含这个浮动元素, 因为此时浮动元素从文档流中脱离.
来源: http://www.bubuko.com/infodetail-2690705.html