html表元设置的属性重叠时,CSS面试题

1.有哪些方式可以对一个DOM设置它的CSS样式？

外部样式表。引入一个外部CSS文件；

内部样式表。将CSS代码放在

标签内部；

内联样式，将CSS样式直接定义在HTML元素内部；

2.CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器的可视范围内？

最基本的：

设置display属性为none，或者设置visiblity为hidden

技巧性：

设置高度为0， 设置透明度为0，设置z-index位置在-1000

3.超链接访问过后hover样式就不出现的问题时什么？如何解决？

被点击访问过的超链接样式不再具有hover和active了，解决方式是改变CSS属性的排列顺序：L-V-H-A(linked, visited, hover, active)。

4.什么是Css Hack?ie6,7,8的hack分别是什么？

针对不同的浏览器写不同的CSS Code的过程，就是CSS Hack。实例如下：

#test{

width: 300px;

height: 300px;

background-color: blue;

background-color: red\9; /*all ie*/background-color: yellow\0; /*ie8*/

+background-color: pink; /*ie7*/_background-color: orange; /*ie6*/:root #test{

background: purple\9; /*ie9*/}

@media all and {min-width: 0px} #test{background-color: black\0;} /*opera*/@media screen and {-webkit-min-device-pixel-ratio: 0 } {#test {background-color: gray}} /*chrome and safari*/}

@media可以针对不同的媒体类型定义不同的样式。特别是如果你需要设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器宽度和高度重新渲染页面。

5.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。

width、height、padding(内边距)、margin(外边距)都可控制。

内联元素(inline)特性：

宽度、高度、内边距的padding-top/padding-bottom和外边距的margin-top、margin-bottom都不可改变(也就是padding和margin的left和right是可以设置的)。

这里还有其他问题。浏览器还有默认的天生inline-block元素(拥有内在尺寸，可设置高宽，但不会自动换行)，有哪些元素是天生inline-block元素？

它们是、、、、 。

6.rgba()和opacity的透明效果有什么区别？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或起背景色。设置rgba透明的元素的子元素不会继承透明效果。

7.CSS中可以让文字在垂直和水平方向重叠的两个属性分别是什么？

垂直方向：line-height。设置成比字体高度还小就可以让两行重叠

水平方向：letter-spacing。设置为负值即可实现重叠。

8.如何垂直居中一个浮动元素？

下面代码分别实现了已知元素高度、未知元素高度、图片的垂直居中方法。

垂直居中一个浮动元素

#div1{background-color:#6699ff;width:200px;height:200px;position:absolute;top:50%;left:50%;margin-top:-100px;margin-left:-100px;

}#div2{width:200px;height:200px;background-color:#6699ff;margin:auto;position:absolute;left:0;top:0;right:0;bottom:0;

}#container{width:600px;height:600px;background:hotpink;display:table-cell;text-align:center;vertical-align:middle;

}

方法一：已知元素的高宽