1.Doctype 的作用?严格模式与混杂模式的区别?区分
(1)<!DOCTYPE> 声明位于文档中的最前面的位置,处于标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。(重点:告诉浏览器按照何种规范解析文档)
(2)严格模式下:页面排版及 JS 解析是以该浏览器支持的最高标准来执行
(3)混杂模式:不严格按照标准执行,主要用来兼容旧的浏览器,向后兼容 防止站点无法工作
(4).DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现
2.Quirks 模式是什么?它和 Standards 模式有什么区别?
从 IE6 开始,引入了 Standards 模式,标准模式中,浏览器尝试给符合标准的文档在规范上
的正确处理达到在指定浏览器中的程度。
在 IE6 之前 CSS 还不够成熟,所以 IE5 等之前的浏览器对 CSS 的支持很差, IE6 将对 CSS
提供更好的支持,然而这时的问题就来了,因为有很多页面是基于旧的布局方式写的,而如 果 IE6 支持 CSS 则将令这些页面显示不正常,如何在即保证不破坏现有页面,又提供新的
渲染机制呢?
在写程序时我们也会经常遇到这样的问题, 如何保证原来的接口不变, 又提供更强大的功能,
尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支,即当某
个参数为真时,我们就使用新功能,而如果这个参数 不为真时,就使用旧功能,这样就能
不破坏原有的程序,又提供新功能。IE6 也是类似这样做的,它将 DTD 当成了这个"参数",
因为以前的页面大家都不会去写 DTD,所以 IE6 就假定 如果写了 DTD,就意味着这个页面 将采用对 CSS 支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是 Quirks
模式(怪癖模式,诡异模式,怪异模式)。 区别:总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型:在 W3C 标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,
而在 Quirks 模式下,IE 的宽度和高度还包含了 padding 和 border。
设置行内元素的高宽:在 Standards 模式下,给等行内元素设置 wdith 和 height 都
不会生效,而在 quirks 模式下,则会生效。
设置百分比的高度:在 standards 模式下,一个元素的高度是由其包含的内容来决定的,如
果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用
margin:0 auto 设置水平居中:使用 margin:0 auto 在 standards 模式下可以使元素水平
居中,但在 quirks 模式下却会失效。
(还有很多,答出什么不重要,关键是看他答出的这些是不是自己经验遇到的,还是说都是
看文章看的,甚至完全不知道。)
- img 的 alt 与 title 有何异同? strong 与 em 的异同?
a:alt(alt text):为不能显示图像、窗体或 applets 的用户代理(UA),alt 属性用来指
定替换文字。替换文字的语言由 lang 属性指定。(在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
strong:粗体强调标签,强调,表示内容的重要性
em:斜体强调标签,更强烈强调,表示内容的强调点
4. 你能描述一下渐进增强和优雅降级之间的不同吗?
渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功
能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器
进行兼容。
区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个
非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰
减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
"优雅降级"观点
"优雅降级"观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为 "过时"或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段,并把测试对象限
定为主流浏览器(如 IE、Mozilla 等)的前一个版本。
在这种设计范例下,旧版的浏览器被认为仅能提供"简陋却无
妨 (poor, but passable)" 的浏览体验。你可以做一些小的调整来适应某个特定的浏 览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被
直接忽略。
"渐进增强"观点
"渐进增强"观点则认为应关注于内容本身。
内容是我们建立网站的诱因。有的网站展示它,有的则收集它,有的寻求,有的操作,还有 的网站甚至会包含以上的种种,但相同点是它们全都涉及到内容。这使得"渐进增强"成为 一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其"分级式浏览器
支持 (Graded Browser Support)"策略的原因所在。
那么问题来了。现在产品经理看到 IE6,7,8 网页效果相对高版本现代浏览器少了很多圆角, 阴影(CSS3),要求兼容(使用图片背景,放弃 CSS3),你会如何说服他?
5. css的引入方式有哪些?CSS 中 link 和@import 的区别是:
1.内联 内嵌 外链 导入
2.Link 属于 html 标签,而@import 是 CSS 中提供的
区别 :同时加载
前者无兼容性,后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式,后者不可
在页面加载的时候,link 会同时被加载,而@import 引用的 CSS 会在页面加载完成后才会加载引用的 CSS
@import 只有在 ie5 以上才可以被识别,而 link 是 html 标签,不存在浏览器兼容性问题
Link 引入样式的权重大于@import 的引用(@import 是将引用的样式导入到当前的页面中)
link 和@import区别
两者都是外部引用的css方式:
区别1:link是XHTML标签,除了加载css外,还可以定义css等其他事物;@import属于css范畴只能加载css
区别2:link引入css时,再页面加载的同时加载;@import需要页面完全载入以后加载
区别3:link是XHTML标签.无兼容问题;@import是在css2.1提出的,低版本浏览器不支持
区别4:link支持使用JacaScript控制DOM去改变样式,而@import不支持
7. 为什么利用多个域名来存储网站资源会更有效?
CDN 缓存更方便
突破浏览器并发限制
节约 cookie 带宽
节约主域名的连接数,优化页面响应速度
防止不必要的安全问题
8. 请谈一下加粗样式你对网页标准和标准制定机构重要性的理解。
网页标准和标准制定机构都是为了能让 web 发展的更’健康’,开发者遵循统一的标准,降
低开发难度,开发成本,SEO 也会更好做,也不会因为滥用代码导致各种 BUG、安全问题,
最终提高网站易用性。
9. 请描述一下 cookies,sessionStorage 和 localStorage 的区别?
sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话
中的页面才能访问并且当会话结束后数据也随之销毁。因此 sessionStorage 不是一种持久 化的本地存储,仅仅是会话级别的存储。而 localStorage 用于持久化的本地存储,除非主
动删除数据,否则数据是永远不会过期的。
web storage 和 cookie 的区别
Web Storage 的概念和 cookie 相似,区别是它是为了更大容量存储设计的。Cookie 的大小
是受限的,并且每次你请求一个新的页面的时候 Cookie 都会被发送过去,这样无形中浪费
了带宽,另外 cookie 还需要指定作用域,不可以跨域调用。
除此之外,Web Storage 拥有 setItem,getItem,removeItem,clear 等方法,不像 cookie
需要前端开发者自己封装 setCookie,getCookie。但是 Cookie 也是不可以或缺的:Cookie 的作用是与服务器进行交互,作为 HTTP 规范的一部分而存在 ,而 Web Storage 仅仅是为
了在本地"存储"数据而生。
- 有哪项方式可以对一个 DOM 设置它的 CSS 样式?
外部样式表,引入一个外部 css 文件
内部样式表,将 css 代码放在 标签内部
内联样式,将 css 样式直接定义在 HTML 元素内部
- CSS 都有哪些选择器?
派生/标签选择器(用 HTML 标签申明)
id 选择器(用 DOM 的 ID 申明)
类选择器(用一个样式类名申明)
属性选择器(用 DOM 的属性申明,属于 CSS2,IE6 不支持,不常用,不知道就算了)
除了前 3 种基本选择器,还有一些扩展选择器,包括
后代选择器(利用空格间隔,比如 div .a{ })
群组选择器(利用逗号间隔,比如 p,div,#a{ })
那么问题来了,CSS 选择器的优先级是怎么样定义的?
基本原则: 一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。
复杂的计算方法:
用 1 表示派生选择器的优先级
用 10 表示类选择器的优先级
用 100 标示 ID 选择器的优先级
div.test1 .span var 优先级 1+10 +10 +1
span#xxx .songs li 优先级 1+100 + 10 +1
#xxx li 优先级 100 +1
那么问题来了,看下列代码,
标签内的文字是什么颜色的?
123
答案:red。与样式定义在文件中的先后顺序有关,即是后面的覆盖前面的,与在中的先后关系无关。
css选择符有哪些?哪些属性是可以继承?优先级算法如何计算?内联和important哪个优先级高?
通用选择器 *
类别选择器 .class
id选择器 #id
标签选择器 element
后代选择器 子代选择器 并集选择器 交集选择器
伪类选择器(:link :visited :active :hover :focus)
结伪类(:first-child :last-child :nth-child(length) :nth-last-child(length))
属性可以继承:line-height color font text
所有元素可以继承的:visibility和cursor
终极块级元素可继承的:text-indent text-align
内联元素可以继承的letter-spacing white-space line-height color
font,font-family,font-size,font-style,font-variant,font-weight,text-decoration,text-transform,direction
列表元素可以继承的:
list-style, list-style-type, list-style-position, list-style-image
浏览器默认 继承的样式 通配符 标签选择器 类选择器 id选择器 行内样式 important
- CSS 中可以通过哪些属性定义,使得一个 DOM 元素不显示在浏览器可视范
围内?
最基本的设置 display 属性为 none,或者设置 visibility 属性为 hidden
技巧性:
设置宽高为 0,设置透明度为 0,设置 z-index 位置在-1000em
- 超链接访问过后 hover 样式就不出现的问题是什么?如何解决?
答案: 点击访问过的超链接样式不在具有 hover 和 active 了,解决方法是改变 CSS 属性的 被
排列顺序: L-V-H-A(link,visited,hover,active)
- 什么是 Css Hack?ie6,7,8 的 hack 分别是什么?
答案:针对不同的浏览器写不同的 CSS code 的过程,就是 CSS hack。
示例如下:
#test{
width:300px; height:300px;
background-color:blue; /firefox/ background-color:red\9; /all ie/
background-color:yellow; /ie8/
+background-color:pink; /ie7/
_background-color:orange; /ie6/ }
:root #test { background-color:purple\9; } /ie9/
@media all and (min-width:0px)
{ #test {background-color:black;} } /opera/
@media screen and (-webkit-min-device-pixel-ratio:0)
{ #test {background-color:gray;} } /chrome and safari/
- 行内元素和块级元素的具体区别是什么?行内元素的 padding 和 margin 可设置吗?
块级元素(block)特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)和外边
距的 top/bottom(margin-top/margin-bottom)都不可改变(也就是 padding 和 margin 的
left 和 right 是可以设置的),就是里面文字或图片的大小。
那么问题来了,浏览器还有默认的天生 inline-block 元素(拥有内在尺寸,可设置高宽,
但不会自动换行),有哪些?
答案: 、 、 、 、
- 什么是外边距重叠?重叠的结果是什么?
外边距重叠/外边距塌陷就是 margin-collapse。
在 CSS 当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一
个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折叠
外边距。
折叠结果遵循下列计算规则:
两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
两个外边距一正一负时,折叠结果是两者的相加的和。
- rgba()和 opacity 的透明效果有什么不同?
rgba()和 opacity 都能实现透明效果,但最大的不同是 opacity 作用于元素,以及元素内的
所有内容的透明度,
而 rgba()只作用于元素的颜色或其背景色。(设置 rgba 透明的元素的子元素不会继承透明
效果!)
25. css 中可以让文字在垂直和水平方向上重叠的两个属性是什么?
垂直方向:line-height
水平方向:letter-spacing
那么问题来了,关于 letter-spacing 的妙用知道有哪些么?
答案:可以用于消除 inline-block 元素间的换行符空格间隙问题。
- 如何垂直居中一个浮动元素?
// 方法一:已知元素的高宽
#div1{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素需要相对定位
top: 50%;
left: 50%;
margin-top:-100px ; margin-left: -100px;
}
//方法二:未知元素的高宽
#div1{
width: 200px; height: 200px;
//二分之一的 height,width
background-color: #6699FF;
margin:auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
//父元素需要相对定位
那么问题来了,如何垂直居中一个<img>?(用更简便的方法。)
#container //<img>的容器设置如下
{
display:table-cell;
text-align:center;
vertical-align:middle;
}
- px 和 em 的区别。
px 和 em 都是长度单位,区别是,px 的值是固定的,指定是多少就是多少,计算比较容易。
em 得值不是固定的,并且 em 会继承父级元素的字体大小。
浏览器的默认字体高都是 16px。 以未经调整的浏览器都符合: 1em=16px。
所 那么 12px=0.75em,
10px=0.625em。
- 描述一个"reset"的 CSS 文件并如何使用它。知道 normalize.css 吗?你了解他们的不同之处?
重置样式非常多, 凡是一个前端开发人员肯定有一个常用的重置 CSS 文件并知道如何使用它们。 他们是盲目的在做还是知道为什么这么做呢?原因是不同的浏览器对一些元素有不同的
默认样式, 如果你不处理, 在不同的浏览器下会存在必要的风险,或者更有戏剧性的性发生。
你可能会用 Normalize 来代替你的重置样式文件。它没有重置所有的样式风格,但仅提供了 一套合理的默认样式值。既能让众多浏览器达到一致和合理,但又不扰乱其他的东西(如粗体的标题)。 在这一方面,无法做每一个复位重置。它也确实有些超过一个重置,它处理了你永远都不用考虑的怪癖,像 HTML 的 audio 元素不一致或 line-height 不一致。
- Sass、LESS 是什么?大家为什么要使用他们?
他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。
例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性,如变量,继承,运算, 函
数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox),也可一在服务端运行
(借助 Node.js)。
为什么要使用它们?
结构清晰,便于扩展。
可以方便地屏蔽浏览器私有语法差异。这个不用多说,封装对浏览器语法差异的重复处理,
减少无意义的机械劳动。
可以轻松实现多重继承。
完全兼容 CSS 代码,可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展,所
以老的 CSS 代码也可以与 LESS 代码一同编译。
- display:none 与 visibility:hidden 的区别是什么?
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是,使用 CSS display:none 属性后,HTML 元素(对象)的宽度、高度等各种属性值都将 “丢失”;而使用 visibility:hidden 属性后,HTML 元素(对象)仅仅是在视觉上看不见(完
全透明),而它所占据的空间位置仍然存在。
32. 简介盒子模型:
CSS 的盒子模型有两种:IE 盒子模型、标准的 W3C 盒子模型模型
盒模型:内容、内边距、外边距(一般不计入盒子实际宽度)、边框
- 为什么要初始化样式?
由于浏览器兼容的问题,不同的浏览器对标签的默认样式值不同,若不初始化会造成不同浏
览器之间的显示差异
但是初始化 CSS 会对搜索引擎优化造成小影响
- BFC 是什么?
BFC(块级格式化上下文),一个创建了新的 BFC 的盒子是独立布局的,盒子内元素的布局
不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向发生 margin 重叠
的问题
BFC 是指浏览器中创建了一个独立的渲染区域,该区域内所有元素的布局不会影响到区域外
元素的布局,这个渲染区域只对块级元素起作用
- html 语义化是什么?
当页面样式加载失败的时候能够让页面呈现出清晰的结构
有利于 seo 优化,利于被搜索引擎收录(更便于搜索引擎的爬虫程序来识别)
便于项目的开发及维护,使 html 代码更具有可读性,便于其他设备解析。
- IE 的双边距 BUG:块级元素 float 后设置横向 margin,ie6 显示的 margin 比设置的较大。
解决:加入_display:inline
- HTML 与 XHTML——二者有什么区别?
1 所有的标记都必须要有一个相应的结束标记
2. 所有标签的元素和属性的名字都必须使用小写
3. 所有的 XML 标记都必须合理嵌套
4. 所有的属性必须用引号 “” 括起来
5. 把所有 < 和 & 特殊符号用编码表示
6. 给所有属性赋一个值
7. 不要在注释内容中使用 “–”
8. 图片必须有说明文字
- html 常见兼容性问题?
1.双边距 BUG float 引起的 使用 display
2.3 像素问题 使用 float 引起的 使用 dislpay:inline -3px
3.超链接 hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index 问题 给父级添加 position:relative
5.Png 透明 使用 js 代码 改
6.Min-height 最小高度 !Important 解决’
7.select 在 ie6 下遮盖 使用 iframe 嵌套
8. 为 什 么 没 有 办 法 定 义 1px 左 右 的 宽 度 容 器 ( IE6 默 认 的 行 高 造 成 的 , 使 用
over:hidden,zoom:0.08 line-height:1px)
9.IE5-8 不支持 opacity,解决办法:
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 /
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”; / for IE
8*/
}
10. IE6 不支持 PNG 透明背景,解决办法: IE6 下使用 gif 图片
40. 对 WEB 标准以及 W3C 的理解与认识
答:标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、
结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更 广泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提
供打印版本而不需要复制内容、提高网站易用性。
- 行内元素有哪些?块级元素有哪些?CSS 的盒模型?
答:块级元素:div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css 盒模型:内容,border ,margin,padding
- 前端页面有哪三层构成,分别是什么?作用是什么?
答:结构层 Html 表示层 CSS 行为层 js。
- Doctype 作用? 严格模式与混杂模式-如何触发这两种模式,区分它们有何意义?
(4)、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。
- 行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
(1)CSS 规范规定,每个元素都有 display 属性,确定该元素的类型,每个元素都有默认
的 display 值,比如 div 默认 display 属性值为"block",成为"块级"元素;span 默认
display 属性值为"inline",是"行内"元素。
(2)行内元素有:a b span img input select strong(强调的语气) 块级元素有:div ul
ol li dl dt dd h1 h2 h3 h4p
(3)知名的空元素:
鲜为人知的是:
- CSS 的盒子模型?
(1)两种, IE 盒子模型、标准 W3C 盒子模型;IE 的 content 部分包含了 border 和 pading;
(2)盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border).
IE模型中:
CSS中的宽(width)=内容(content)的宽+(border+padding)*2
CSS中的高(height)=内容(content)的高+(border+padding)*2
W3C模型中:
CSS中的宽(width)=内容(content)的宽
CSS中的高(height)=内容(content)的高
- CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算? CSS3 新增
伪类有那些?
1.id 选择器( # myid)
2.类选择器(.myclassname)
3.标签选择器(div, h1, p)
4.相邻选择器(h1 + p)
5.子选择器(ul < li)
6.后代选择器(li a)
7.通配符选择器( * )
8.属性选择器(a[rel = “external”])
9.伪类选择器(a: hover, li: nth - child)
- 可继承: font-size font-family color, UL LI DL DD DT;
- 不可继承 :border padding margin width height ;
- 优先级就近原则,样式定义最近者为准;
- 载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3 新增伪类举例:
p:first-of-type 选择属于其父元素的首个元素的每个
元素。 p:last-of-type 选择属于其父元素的最后
元素的每个
元素。 p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked,单选框或复选框被选中。
- 如何居中 div,如何居中一个浮动元素?
给 div 设置一个宽度,然后添加 margin:0 auto 属性
div{
width:200px;
margin:0 auto;
}
居中一个浮动元素
确定容器的宽高 宽 500 高 300 的层
设置层的外边距
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px; position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
- 列出 display 的值,说明他们的作用。position 的值, relative 和 absolute 定位
原点是?
- block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示,但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示,并添加样式列表标记。
- position 的值
*absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
*fixed (老 IE 不支持)
生成绝对定位的元素,相对于浏览器窗口进行定位。
- relative
生成相对定位的元素,相对于其正常位置进行定位。
- static 默认值。没有定位,元素出现在正常的流中
*(忽略 top, bottom, left, right z-index 声明)。
- inherit 规定从父元素继承 position 属性的值。
- absolute 的 containing block 计算方式跟正常流有什么不同?
lock-level boxes
一个 block-level element (‘display’ 属性值为 ‘block’, ‘list-item’ 或是 ‘table’)
会生成一个 block-level box,这样的盒子会参与到 block-formatting context (一种布
局的方式) 中。
block formatting context
在这种布局方式下,盒子们自所在的 containing block 顶部起一个接一个垂直排列,水平
方向上撑满整个宽度 (除非内部的盒子自己内部建立了新的 BFC)。
containing block
一般来说,盒子本身就为其子孙建立了 containing block,用来计 算内部盒子的位置、大小,而对内部的盒子,具体采
用哪个 containing block 来计算,需要分情况来讨论:
若此元素为 inline 元素,则 containing block 为能够包含这个元素生成的第 一个和最后一个 inline box 的 padding box (除 m argin, border 外的区域)
的最小矩形;
否则则由这个祖先元素的 padding box 构成。
根元素所在的 containing block 被称为 initial containing block,在我们 常用的浏览器环境下,指的是原点与 canvas 重合,大小和 viewport 相同的矩
形;
对于 position 为 static 或 relative 的元素,其 containing block 为祖先
元素中最近的 block container box 的 content box (除 margin, border,
padding 外的区域);
对于 position:fixed 的元素,其 containing block 由 viewport 建立;
对于 position:absolute 的元素,则是先找到其祖先元素中最近的 position
属性非 static 的元素,然后判断:
如果都找不到,则为 initial containing block。
- 对 WEB 标准以及 W3C 的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、结
构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广 泛的设备所访问、更少的代码和组件,容易维 护、改版方便,不需要变动页面内容、提供
打印版本而不需要复制内容、提高网站易用性;
- css 的基本语句构成是?
选择器{属性 1:值 1;属性 2:值 2;}
- 浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式
- CSS 中可以通过哪些属性定义,使得一个 DOM 元素不显示在浏览器可视范
围内?
最基本的:
设置 display 属性为 none,或者设置 visibility 属性为 hidden
技巧性:
设置宽高为 0,设置透明度为 0,设置 z-index 位置在-1000
- 行内元素和块级元素的具体区别是什么?行内元素的 padding 和 margin 可设置吗?
块级元素(block)特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的 top/bottom(padding-top/padding-bottom)
和外边距的 top/bottom(margin-top/margin-bottom)都不可改变 就是 padding 和 margin (也
的 left 和 right 是可以设置的),就是里面文字或图片的大小。
那么问题来了,浏览器还有默认的天生 inline-block 元素(拥有内在尺寸,可设置高
宽,但不会自动换行),有哪些?
答案: 、 、 、 、
- 什么是外边距重叠?重叠的结果是什么?
答案:
外边距重叠就是 margin-collapse。
在 CSS 当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合
成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为
折叠外边距。
折叠结果遵循下列计算规则:
- 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
- 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。 3. 两个外边距一正一负时,折叠结果是两者的相加的和。
58、描述一个"reset"的 CSS 文件并如何使用它。知道 normalize.css 吗?你了解他们的不
同之处?
重置样式非常多, 凡是一个前端开发人员肯定有一个常用的重置 CSS 文件并知道如何使
用它们。 他们是盲目的在做还是知道为什么这么做呢?原因是不同的浏览器对一些元素有不 同的默认样式,如果你不处理,在不同的浏览器下会存在必要的风险,或者更有戏剧性的性
发生。
你可能会用 Normalize 来代替你的重置样式文件。它没有重置所有的样式风格,但仅提
供了一套合理的默认样式值。 既能让众多浏览器达到一致和合理, 但又不扰乱其他的东西 (如
粗体的标题)。
在这一方面,无法做每一个复位重置。它也确实有些超过一个重置,它处理了你永远都
不用考虑的怪癖,像 HTML 的 audio 元素不一致或 line-height 不一致。
57. 说 display 属性有哪些?可以做什么?
display:block 行内元素转换为块级元素
display:inline 块级元素转换为行内元素
display:inline-block 转为内联元素
- 哪些 css 属性可以继承?
可继承: font-size font-family color, ul li dl dd dt;
不可继承 :border padding margin width height ;
- css 优先级算法如何计算?
!important > id > class > 标签
!important 比 内联优先级高
*优先级就近原则,样式定义最近者为准;
*以最后载入的样式为准;
- b 标签和 strong 标签,i 标签和 em 标签的区别?
后者有语义,前者则无。
- 有那些行内元素、有哪些块级元素、盒模型?
1.内联元素(inline element) 也就是行内元素
a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体(不推荐) big - 大字体 br - 换行 em - 强调 font - 字体设定(不推荐) i - 斜体 img - 图片 input - 输入框 label - 表格标签 s - 中划线(不推荐) select - 项目选择 small - 小字体文本 span - 常用内联容器,定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本
u - 下划线 var - 定义变量
2、块级元素
address - 地址 blockquote - 块引用 center - 举中对齐块
dir - 目录列表 div - 常用块级容易,也是 css layout 的主要标签
dl - 定义列表 fieldset - form 控制组 form - 交互表单 h1 - 大标题 h2 - 副标题h3 - 3 级标题 h4 - 4 级标题 h5 - 5 级标题 h6 - 6 级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表
noframes - frames 可选内容,(对于不支持 frame 的浏览器显示此区块内容)
noscript - )可选脚本内容(对于不支持 script 的浏览器显示此内容)
ol - 排序表单 p - 段落 pre - 格式化文本 table - 表格 ul - 非排序列表
3.CSS 盒子模型包含四个部分组成:
内容、填充(padding)、边框(border)、外边界(margin)。
- 有哪些选择符,优先级的计算公式是什么?行内样式和!important 哪个优先级高?
#ID > .class > 标签选择符 !important 优先级高
-
我想让行内元素跟上面的元素距离 10px,加 margin-top 和 padding-top 可以吗?
margin-top,padding-top 无效 -
CSS 的盒模型由什么组成?
内容,border ,margin,padding 65. 说说 display 属性有哪些?可以做什么?
display:block 行内元素转换为块级元素
display:inline 块级元素转换为行内元素
display:inline-block 转为内联元素
- 哪些 css 属性可以继承?
可继承: font-size font-family color, ul li dl dd dt;
不可继承 :border padding margin width height ;
- css 优先级算法如何计算?
!important > id > class > 标签
!important 比 内联优先级高
-
优先级就近原则,样式定义最近者为准;
-
以最后载入的样式为准;