前端面试问题HTML+CSS（3）

41.行内元素有哪些?块级元素有哪些?CSS 的盒模型?

答 ：
块 级 元 素 ： div p h1 h2 h3 h4 form ul
行 内 元 素 : a b br i span input select Css 盒模型:内容，border ,margin，padding
42.前端页面有哪三层构成，分别是什么?作用是什么?

答：结构层 Html 表示层 CSS 行为层 js。
43.Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
（1）、<!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器

的解析器，用什么文档类型 规范来解析这个文档。
（2）、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。
44.行内元素有哪些？块级元素有哪些？ 空(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 h4…p
（3）知名的空元素：
< br>< hr>< img>< input>< link>< meta>鲜为人知的是：
< area>< base>< col>< command>
< embed>< keygen>< param>< source>< track>< wbr>

45.CSS 的盒子模型？

（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE 的 content 部分包含了 border 和
pading;
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
46.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> 元素的每个 < 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，单选框或复选框被选中。
47.如何居中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%;
}

48.浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？原因， 解决方法是什么，常用hack 的技巧 ？
*IE 浏览器的内核 Trident、 Mozilla 的 Gecko、google 的 WebKit、Opera 内核
Presto；
*png24 为的图片在 iE6 浏览器上出现背景，解决方案是做成PNG8.
*浏 览 器 默 认 的 margin 和 padding 不 同 。 解 决 方 案 是 加 一 个 全 局 的
*{margin:0;padding:0;}来统一。
*IE6 双边距bug:块属性标签float 后，又有横行的margin 情况下，在ie6 显示margin
比设置的大。
浮动 ie 产生的双倍距离 #box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE 会产生 20px 的距离，解决方案是在float 的标签样式控制中加入 ——
_display:inline;将其转化为行内属性。(_这个符号只有 ie6 会识别) 渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将 IE 游览器从所有情况中分离出来。
接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样 IE8 已经独立识别。
css
.bb{
background-color:#f1ee18;/所有识别/
.background-color:#00deff\9; /IE6、7、8 识别/
+background-color:#a200ff;/IE6、7 识别/
_background-color:#1e0bd1;/IE6 识别/
}
*IE 下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute()获取自定义属性;
Firefox 下,只能使用 getAttribute()获取自定义属性.
解决方法:统一通过 getAttribute()获取自定义属性.
*IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性; Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性.
*（条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。
*Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS
属性 -webkit-text-size-adjust: none; 解决.
超链接访问过后 hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和
active 了解决方法是改变 CSS 属性的排列顺序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

49.列出 display 的值，说明他们的作用。position 的值， relative 和
absolute 定位原点是？

1.block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
2.position 的值
*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed （老IE 不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
*relative
生成相对定位的元素，相对于其正常位置进行定位。
*static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。
*inherit 规定从父元素继承 position 属性的值。

51.对WEB 标准以及W3C 的理解与认识

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性；
52.css 的基本语句构成是?

选择器{属性 1:值 1;属性 2:值 2;……}
53.浏览器标准模式和怪异模式之间的区别是什么?

盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式

54.CSS 中可以通过哪些属性定义，使得一个DOM 元素不显示在浏览器可视范围内？
最基本的：
设置 display 属性为 none，或者设置 visibility 属性为 hidden
技巧性：
设置宽高为 0，设置透明度为 0，设置z-index 位置在-1000
55.行内元素和块级元素的具体区别是什么？ 行内元素的 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 元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
答案：< input> 、< img> 、< button> 、< textarea> 、< label>
56.什么是外边距重叠？重叠的结果是什么？

答案：
外边距重叠就是 margin-collapse。
在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：

1.两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2.两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3.两个外边距一正一负时，折叠结果是两者的相加的和。

58、描述一个"reset"的 CSS 文件并如何使用它。知道 normalize.css 吗？你了解他们的不同之处？

重置样式非常多，凡是一个前端开发人员肯定有一个常用的重置 CSS 文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的默认样式，如果你不处理，在不同的浏览器下会存在必要的风险，或者更有戏剧性的性发生。
你可能会用 Normalize 来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。
在这一方面，无法做每一个复位重置。它也确实有些超过一个重置，它处理了你永远都不用考虑的怪癖，像 HTML 的 audio 元素不一致或 line-height 不一致。
57.说display 属性有哪些？可以做什么？

display:block 行内元素转换为块级元素display:inline 块级元素转换为行内元素display:inline-block 转为内联元素
58.哪些css 属性可以继承？

可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height ;
59.css 优先级算法如何计算？

!important > id > class > 标 签
!important 比 内联优先级高
*优先级就近原则，样式定义最近者为准;
*以最后载入的样式为准;

60.b 标签和strong 标签,i 标签和 em 标签的区别？

后者有语义，前者则无。
61.有那些行内元素、有哪些块级元素、盒模型？

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 – 6 级标题
hr – 水平分隔线
isindex – input prompt menu – 菜单列表
noframes – frames 可选内容，（对于不支持 frame 的浏览器显示此区块内容）
noscript – ）可选脚本内容（对于不支持 script 的浏览器显示此内容）
ol – 排序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表
3.CSS 盒子模型包含四个部分组成：
内容、填充（padding）、边框（border）、外边界（margin）。

62.有哪些选择符，优先级的计算公式是什么？行内样式和！important 哪个优先级高？
#ID > .class > 标签选择符 !important 优先级高

63.我想让行内元素跟上面的元素距离 10px ，加 margin-top 和
padding-top 可以吗？

margin-top,padding-top 无效
64.CSS 的盒模型由什么组成？

内容，border ,margin，padding
65.说说display 属性有哪些？可以做什么？

display:block 行内元素转换为块级元素display:inline 块级元素转换为行内元素display:inline-block 转为内联元素
66.哪些css 属性可以继承？

可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height ;

67.css 优先级算法如何计算？

!important > id > class > 标 签
!important 比 内联优先级高
*优先级就近原则，样式定义最近者为准;
*以最后载入的样式为准;