首页 > 代码库 > web典型理论题整理HTML+CSS部分
web典型理论题整理HTML+CSS部分
1.css选择符有哪些？属性继承？优先级算法如何计算？css3新增伪类有哪些？
css选择符：id选择器(# myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、通配符选择器( * )、属性选择器(a[rel = "external"])、伪类选择器(a: hover, li:nth-child)
可继承样式：font-size、font-family、color、text-indent
不可继承样式：border、padding、margin、width、 height
优先级算法： 优先级就近原则，同权重情况下样式定义最近者为准; 载入样式以最后载入的定位为准;!important > id > class > tag； important 比 内联优先级高，但内联比 id 要高
CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
CSS3新特性：
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是 ::selection.
媒体查询，多栏布局
border-image
2.列出display的值，说明他们的作用
none 隐藏；block 块显示；inline 内嵌 ；table 表格显示；list-item 项目列表
3.position的值有哪些？relative和absolute定位的原点是？
absolute 生成绝对定位的元素，相对于定位以外的第一个祖先元素进行定位。
fixed生成绝对定位的元素，相对于浏览器窗口进行定位。
relative生成相对定位的元素，相对于其在普通流中的位置进行定位。
inherit 规定从父元素继承 position 属性的值。
4.Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
5.H5有哪些新特性？移除了哪些元素？
新特性：
内容元素，article、footer、header、nav、section。
表单控件，calendar、date、time、email、url、search。
控件元素，webworker, websockt, Geolocation。
移出的元素：
显现层元素：basefont，big，center，font, s，strike，tt，u。
性能较差元素：frame，frameset，noframes。
6.如何处理H5新标签的浏览器兼容性问题？如何区分HTML和HTML5?
处理兼容问题有两种方式：
IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
使用是html5shim框架
DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。
7.CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可
8.iframe的缺点？
9.列举几种页面优化方案？
10.bootscript是什么？能做什么？
11.描述一下css的animation和transition各自的特点？
12.实现双栏布局，左边固定不动，右面根据屏幕自适应（不用JS）
13.在移动端制作WEBapp优化页面的方案？
14.如何让一个元素水平垂直居中？
15.页面布局的方式？
16.设置超出文本宽度自动显示省略号？
17.css script是什么？优缺点？
前端大框
1.前端有哪几个层面组成？作用是什么？
2.从前端出发做好SEO需要考虑什么？
3.浏览器cookie的理解？
web典型理论题整理HTML+CSS部分