HTML
1. HTML 和 XHTML 的差别
- XHTML 元素必须被正确的进行其那套
- XHTML 元素必须被关闭
- 标签名必须用小写字母
- XHTML 文档必须拥有根元素
2. 面试题:请阐述 table 的缺点
- a. 太深的嵌套,例如 table > tr > td > h3,会导致搜索引擎读取困难,增加了冗余代码量。
- b. 灵活性差,如要设置 tr 的 border 属性,必须通过 td。
- c. 代码臃肿,当在 table 中套用 table 时,代码阅读会显得混乱。
- d. colspan 与 rowspan 的使用可导致文档顺序混乱。
- e. 不够语义化。
3. iframe 的作用?
用法
- iframe 是用来在网页中插入第三方页面,早期主要用于导航栏等相同部分,避免重复下载。
优点
- 便于修改,模拟分离,如在信息管理系统中使用。
- 现在基本不推荐使用,除非有特殊需求。
缺点
- iframe 创建比 DOM 元素慢 1-2 个数量级。
- iframe 会阻塞页面加载,导致用户体验下降。
- 对 SEO 不友好,可以考虑使用动态语言的 Include 机制或 AJAX 填充内容。
4. 请简述 src 和 href 的区别
- 当浏览器遇到 href,会并行下载资源而不会停止当前文档的处理。
- 当浏览器遇到 src,会暂停其他资源的下载和处理,直至该资源加载或执行完毕。
CSS
1. 什么是盒模型?
- 标准盒模型:
box-sizing: content-box
。组成:内容 + 边框 + 内边距 + 外边距。
2. CSS 中的选择器都有哪些?
- id 选择器(#box)
- 类选择器(.one)
- 标签选择器(div)
- 后代选择器(#box div)
- 子选择器(.one > one_1)
- 相邻同胞选择器(.one + .two)
- 群组选择器(div,p)
- 伪类选择器:
:link, :visited, :active, :hover, :focus, :first-child
- 伪元素选择器:
:first-letter, :first-line, :before, :after
- 属性选择器:
[attribute], [attribute=value], [attribute~=value], [attribute|=value]
3. 选择器的权重问题
!important
> 行内样式 > id 选择器 > 类选择器 > 标签选择器 > 通配符 > 继承。
5. 常见的浏览器内核有哪些?
- Trident:如 IE, 360, 搜狗浏览器。
- Gecko:如 Netscape6, Firefox。
- Presto:Opera7 及以上。
- Webkit:如 Safari, Chrome。
6. 行内元素和块状元素的区别?行内快元素的兼容性使用?(IE8以下)
-
行内元素:会在水平方向排列,不能包含块级元素,
width
无效,height
无效(可以设置line-height
),margin
上下无效,padding
上下无效。 -
块级元素:各占据一行,垂直方向排列。从新行开始结束接着一个断行。
-
兼容性:
display:inline-block;
display:inline;
zoom:1;
7. 页面导入样式时,使用link和@import有什么区别?
link
属于HTML标签,除了加载CSS外,还能用于定义RSS,定义rel
连接属性等作用;而@import
是CSS提供,只能加载CSS;- 页面被加载的时,
link
会同时被加载,而@import
引用的CSS会等到页面被加载完再加载; @import
是CSS2.1提出的,只在IE5以上才能被识别,而link
是HTML标签,无兼容问题;
8. display
有哪些值?说明它们的作用。
block
块类型。默认宽度为父元素宽度,可设置宽高,换行显示。none
缺省值。像行内元素类型一样显示。inline
行内元素类型。默认宽度为内容宽度,不可设置宽高,同行显示。inline-block
默认宽度为内容宽度,可以设置宽高,同行显示。list-item
像块类型元素一样显示,并添加样式列表标记。table
此元素会作为块级表格来显示。inherit
规定应该从父元素继承display
属性的值。
9. 标签上title
与alt
属性的区别是什么?
Alt
当图片不显示时,用文字代表,有助于浏览器优化,主要用于图片的文字说明。Title
为该属性提供信息。
10. 样式重置经常会重置哪些标签?
i, em { font-style: normal; }
li { list-style: none; }
a { text-decoration: none; color: #000; }
p, h1, body, ul, ol, li, dl, dt, dd { margin: 0; padding: 0; }
input { outline: 0; margin: 0; }
input[type=button], input[type=submit], input[type=reset] { box-sizing: content-box; }
b, strong { font-weight: normal; }
11. 如何解决浮动塌陷问题?
- 给父元素添加高度。
clear:both;
- 使用BFC的特性:
overflow:hidden;
- 给父元素添加
float:left/right;
position: fixed;
display: table/table-cell;
12. 什么是BFC?
BFC(块格式化上下文)的生成条件:
float
的值不为none
;overflow
的值不为visible
;position
的值为fixed
/absolute
;display
的值为table-cell
/table-caption
/inline-block
/flex
/inline-flex
13. position
属性的选项
absolute
: 绝对定位;相对于页面的左上角;相对于脱离了文档流的父元素定位。relative
: 相对定位;相对于原位置的左上角定位,并且不会让出原来的位置。fixed
: 固定定位;相对于窗口的左上角定位。sticky
: 粘性定位;滚动到指定的某个位置后,会固定再指定的位置。
14. 如何让一个元素出现再页面的正中间?
-
使用定位:
css
position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;
-
使用弹性盒子:
css
.father { display: flex; justify-content: center; align-items: center; }
-
使用定位:
css
position: fixed; left: 50%; top: 50%; margin-top: -高度的一半; margin-left: -宽度的一半;
15. 想要让一个元素,宽度100%,高度100%显示
方法一:
css
html, body {
height: 100%;
}
.box {
width: 100%;
height: 100%;
background-color: pink;
}
方法二:
css
.box {
width: 100vw;
height: 100vh;
background-color: pink;
}
16. CSS3新增了哪些内容?
- 圆角
- 背景渐变
- 背景裁切
- 背景定位
- 2D(旋转,平移,缩放)
- 3D(旋转,平移,缩放)
- 动画效果
- 过渡
- 文字阴影和盒子阴影
- 自定义引入字体
- 选择器(如属性选择器)
- 媒体查询