前端面试题：css相关面试题

时间 2019-12-08

标签端面试题 css 相关面试栏目 CSS 繁體版

原文原文链接

CSS 选择器中，元素选择器和类选择器的区别是什么？css

元素选择器是最多见的 CSS 选择器，即，文档的元素就是最基本的选择器。选择器一般是某个 HTML 元素，好比 <p>、<h1>、<em>、<a>等，甚至能够是 <html> 元素自己。html

类选择器用于将样式规则与附带 class 属性的元素匹配，其中该 class 属性的值为类选择器中指定的值。使用类选择器时，首先须要定义样式类，其语法为：浏览器

.className { }布局

全部可以附带 class 属性的元素均可以使用此样式声明。只须要将 class 属性的值设置为“className”，则能够将类选择器的样式与元素关联。网站

在实际使用时，若是须要为某种元素定义样式，则每每使用元素选择器；若是要应用样式而不考虑具体设计的元素，最经常使用的方法就是使用类选择器。google

简要描述 CSS 中的定位机制。spa

CSS 中，除了默认的流定位方式之外，还有以下几种定位机制：浮动定位、相对定位、绝对定位和固定定位。设计

浮动定位是指将元素排除在普通流以外，而且将它放置在包含框的左边或者右边，可是依旧位于包含框以内。htm

1、首先，按照普通流和非普通流来分类：对象

　　①普通流：就是按照上下左右的顺序一行一行排列的，长度不够就会自动挤到下一行。

　　②非普通流：顾名思义就是脱离普通流的，在普通流上面是不占据位置的。css有position的样式，position包括：static，relative，absolute，fixed四种值。其中static是属于普通流；relative也是属于特殊的普通流，详细下面有介绍；absolute和fixed以及float就是属于非普通流的，加载的时候，也会顺序加载，可是会脱离普通流的位置。

2、分别介绍static,relative,absolute,fixed和float（经过top,left,right,bottom来设置相对定位）

　　①static：就是默认的普通流，不手动设置position样式的话，默认就是static；

　　②relative：叫相对定位，指的是相对他本身原来的位置的相对位置，而且原来的位置仍是占着的（因此说属于特殊的普通流），其余的元素不会填上去，可是设置好相对位置以后，他新的位置是不会挤压其余元素的，就像把该元素从原来的位置上抠出来，放在单独一层来布局。

　　③absolute:叫绝对定位，指的是①相对其父元素位置的绝对定位，可是他属于非普通流，②原来的位置是不会占着的，是单独的一层，脱离了普通流。除了以上两点，其余的和relative差很少。

　　④fixed：叫固定定位，指的是元素相对于浏览器窗口的定位（好比一些网站两边的广告），拉动滚动条，他也不会跟着动，也是属于非普通流，其余的跟relative差很少。

　　⑤float：叫浮动，是css单独的样式，有top，right，bottom，left四种经常使用值，以上四个是属于position的一种；float也是属于普通流，单会改变普通流。他只能和普通流在同一层，可是能够改变元素的位置，一样是占着位置的（和relative有点像），不会单独一层（而relative，absolute，fixed会单独一层，能够设置z-index属性来改变其先后位置）。使用float以后，元素则会脱离普通流，该元素则在普通流上再也不占用位置，普通流的元素则会填补上去，这样若是不去设置的话则会出现重叠覆盖的状况；若是想使用了float的元素也占着普通流上的位置，该如何办呢？这时候，能够把应用了float样式的元素紧接着的元素应用clear样式，clear样式包括：both，right，left三个值。both表示right和left的float都清除掉，另外两个同理。这样子则能够清除在此以前的非普通流，让他们也占着普通流上的位置，可是这只是占着位置，其实该元素是不存在于该位置的，该位置不存在任何元素（详细本身google理解），可是这样子的话，紧接着的那个元素想设置margin等，是会出现问题的，由于应用了float样式的元素霸占的那个位置实际上是什么东西也没有的，不存在边界，因此应用margin则不会以那个元素（应用了float的那个）为边界的，会跳过那个边界来计算，固然你也能够把margin设大点（也就是加上float元素的长度或者宽度）也能够达到效果。其实，能够在float后面的元素以前，单独加个 <div style="clear:both"> 清楚元素来专门用于清除浮动便可，接下来的元素应用margin则能够正常起效（补充：其实通常来讲，能够在样式表里面单独设置 .clear{clear：both;} 这样的样式来专门用于清除浮动，避免重复，代码会规优雅规范不少）。

display 属性和 visibility 属性的区别？

可使用 display 属性定义创建布局时元素生成的显示框类型。

1.若是将 display 属性设置为 block，可让行内元素（好比 <a> 元素）表现得像块级元素同样；

2.若是将 display 属性设置为 inline，可让块级元素（好比 <p> 元素）表现得像内联元素同样；

3.能够经过把 display 属性设置为 none，让生成的元素根本没有框。这样的话，该框及其全部内容就再也不显示，不占用文档中的空间。

在 DIV 设计中，使用 display:none 属性后，HTML 元素（对象）的宽度、高度等各类属性值都将“丢失”；而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（彻底透明），而它所占据的空间位置仍然存在，也便是说它仍具备高度、宽度等属性值。