牛客网HTML/CSS专项练习错题汇总

有关浏览器的内核判断

主要分为四类：-o-/-ms-/-moz-/-webkit-

通过js的dom.style.XxxTransition进行相应的校验判断:

    var div = document.createElement('div');
    var style = div.style;
    if (style.webkitTransition) {
        return '-webkit-';
    }
    if (style.MozTransition) {
        return '-moz-';
    }
    if (style.oTransition) {
        return '-o-';
    }
    if (style.msTransition) {
        return '-ms-';
    }
    return '';

还有一种方式，就是获取一个dom元素的所有css属性，然后进行解析获取对应的内核类型；相比之下，第一种比较简单；可以参考源文档：http://www.cnblogs.com/snandy/archive/2015/10/02/4848567.html

文本换行的设置需要设置哪两个属性？

word=break和white-space

word-break：实现单词之间的换行与不换行，其属性值有三个：normal（浏览器默认的换行规则）/break-all（允许在单词内进行换行）/keep-all（只能在半角空格或者连字符处进行换行）

white-space：设置如何处理元素内的空白，有六个属性值：normal（浏览器的默认处理行为）/pre（空白会被保留，类似于html中的pre预文本标签）/nowrap（文本不会换行，知道遇到br标签为止）/pre-wrap（保留空白符序列，同时依旧进行正常的换行形式）/pre-line（合并空白符序列，但是保留换行符）/inherit（从父元素中继承该值）

CSS的样式的继承属性分类

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、 page-bread-before和unicode-bidi。

所有元素可继承：visibility和cursor。

内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction。

块状元素可继承：text-indent和text-align。

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。

表格元素可继承：border-collapse。

参考文档： http://www.cnblogs.com/thislbq/p/5882105.html

HTML5中用hgroup标签对网页或区段section的标题进行组合

<hgroup>
    <h1>hello world</h1>
    <h2>list title</h2》
<hgroup>

假设一个屏幕分辨率为1024*768，如何定义一个居中的占屏幕一般大小的表格

<TABLE ALIGN=”CENTER” WIDTH=”50%”></TABLE>

<TABLE ALIGN=”CENTER” WIDTH=”512″></TABLE>

<DIV ALIGN=”CENTER”><TABLE WIDTH=”512″></TABLE></DIV>

<CENTER><TABLE WIDTH=”50%”></TABLE></CENTER>
不过center标签在html5之后就不推荐使用了

有关列表的定义

ul -> li 
ol -> li
table ->tr -> td
dl -> dt -> dd

其中dl/dt/dd的形式为:

；dl定义了一个定义列表，dt定义一个术语的名字，dd给出了该术语的描述信息

CSS样式属性的权重值

第一等：style内联样式，权值1000；

第二等：id样式，权值100；

第三等：css类选择器，权值10；

第四等：比啊齐纳元素选择器，权值为1；

而通配符选择器权值为0；

页面的reflow渲染与repaint重绘

reflow渲染：对dom元素结构进行渲染；同时他会自动触发repaint页面重绘；它会改变自身和所有父元素，这种开销是非常昂贵的，页面元素越多，性能的下降会越明显；

repaint重绘：当进行重绘时，元素的外观会被改变，不过页面重绘不会影响dom结构的渲染；

display属性值会产生reflow和repaint；而visibility元素只会产生repaint而不会产生reflow

css的单位值归纳

主要分为四种：px/em/rem/%

px：相对于长度的绝对值单位，像素px是相对于屏幕分辨率而言的

em：相对于当前对象内的文本的字体尺寸而言，如果当前对象内的文字的字体没有进行设置，则相对于浏览器的默认字体尺寸，任意浏览器的默认字体为16px

rem：css3新增的一个单位值，与em的区别在于设置字体时，相对的是html的根元素的字体颜色，这样就可以只需修改根元素的字体就可以调整所有的单位值了，避免了一些字体大小逐层符合引起的连锁反应；目前除了IE8及以下版本外的浏览器均支持给属性；

%：百分比的单位值设置，相对于当前元素的父元素的对应属性的宽度和高度的值进行设置

CSS的盒模型

CSS的盒模型分为margin/border/padding/content，其中padding表示盒子的边框与内容之间的距离，这部分的内容是透明的，可以作为背景显示的一部分

HTML5新增的表单属性

keygen、datalist、output；其中keygen用于提供一种用于验证用户的可靠方法；datalist规定输入框的选项列表；output用于不同类型的输出