Css面试题

1、css的居中方式

（1）margin：auto //宽度，水平居中

（2）绝对定位：position：absolute

(3)display:table-cell

(4)tranform:translate(x,y)//位移

2、 CSS 选择器有哪些，优先级呢

id 选择器，class 选择器，标签选择器，伪元素选择器，伪类选择器等同一元素引用了多个样式时，排在后面的样式属性的优先级高；样式选择器的类型不同时，优先级顺序为：id 选择器 > class 选择器> 标签选择器；标签之间存在层级包含关系时，后代元素会继承祖先元素的样式。如果后代元素定义了与祖先元素相同的样式，则祖先元素的相同的样式属性会被覆盖。继承的样式的优先级比较低，至少比标签选择器的优先级低； 带有!important 标记的样式属性的优先级最高； 样式表的来源不同时，优先级顺序为：内联样式> 内部样式 > 外部样式> 浏览器用户自定义样式 > 浏览器默认样式

3、 如何实现元素的垂直居中

 法一：父元素 display:flex,align-items:center;

法二：元素绝对定位，top:50%，margin-top：-（高度/2）

法三：高度不确定用 transform：translateY（-50%）

法四：父元素 table 布局，子元素设置 vertical-align:center;

4、怎么样让一个元素消失

参position 属性的值有哪些及其区别

5、 position 属性的值有哪些及其区别

参考回答： Position 属性把元素放置在一个静态的，相对的，绝对的，固定的位置中

Static：位置设置为 static 的元素，他始终处于页面流给予的位置，static 元素会忽略任何top,buttom,left,right 声明

Relative：位置设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此left：20 会将元素移至元素正常位置左边 20 个像素的位置

Absolute：此元素可定位于相对包含他的元素的指定坐标，此元素可通过left，top 等属性规定 Fixed：位置被设为 fiexd 的元素，可定为与相对浏览器窗口的指定坐标，可以通过left，top，right 属性来定位考回答： display:none; visibility:hidden; opacity: 0;

6、对 CSS 的新属性有了解过的吗？

参考回答： CSS3 的新特性中，在布局方面新增了 flex 布局，在选择器方面新增了例如first-of-type,nth-child 等选择器，在盒模型方面添加了 box-sizing 来改变盒模型，在动画方面增加了 animation，2d 变换，3d 变换等，在颜色方面添加透明，rbga 等，在字体方面允许嵌入字体和设置字体阴影，最后还有媒体查讯等

7、line-height 和 height 的区别

参考回答：

line-height （行高）一般是指布局里面一段文字上下行之间的高度，是针对字体来设置的，

height（盒子高度） 一般是指容器的整体高度。

8、相对布局和绝对布局，position:relative 和 obsolute。

参考回答：子绝父相

相对定位 relative： 如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。 在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

绝对定位 absolute： 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。absolute 定位使元素的位置与文档流无关，因此不占据空间。absolute 定位的元素和其他元素重叠。

9、display:none 和 visibilty:hidden 的区别

参考回答：

visibility：hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件

 display：none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉。

10、说一下块元素和行元素

参考回答：

块元素：独占一行，并且有自动填满父元素，可以设置 margin 和pading 以及高度和宽度

行元素：不会独占一行，width 和 height 会失效，并且在垂直方向的padding 和margin会失效。