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

元素选择器是最常见的 CSS 选择器，即，文档的元素就是最基本的选择器。选择器通常是某个 HTML 元素，比如 <p>、<h1>、<em>、<a>等，甚至可以是 <html> 元素本身。

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

.className { }

所有能够附带 class 属性的元素都可以使用此样式声明。只需要将 class 属性的值设置为“className”，则可以将类选择器的样式与元素关联。

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

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

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

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

一、首先，按照普通流和非普通流来分类：

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

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

二、分别介绍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 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

前端面试题：css相关面试题的更多相关文章

  1. 【web前端面试题整理03】来看一点CSS相关的吧

    前言 昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了, ...

  2. 常见前端面试题之HTML/CSS部分

    转自http://www.cnblogs.com/jscode/archive/2012/07/10/2583856.html Doctype是什么?如何触发严格模式与混杂模式模式?区分它们有何意义? ...

  3. 前端面试题（HTML/CSS）

    (前端面试题大全,持续更新) 常用的块级元素和行内元素有哪些?说说他们的特点? 浮动产生的原因?清除浮动? 说说一下盒模型 float和position一起用是什么效果 rem用过吗?做不同手机的适配 ...

  4. 前端面试题-CSS优先级

    一.选择器优先级 浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值.优先级是基于不同种类选择器组成的匹配规则. 二.优先级计算 优先级就是分配给指定的CSS声明的一个 ...

  5. 2010年腾讯前端面试题学习（jquery,html,css部分）

    看了牛人写的回忆文章,里面有2010年腾讯的前端面试题,里面涉及到不少基础性的问题,js部分已学习,这是jquery,html和css部分,学习一下:) 原文地址:https://segmentfau ...

  6. web前端面试题HTML/CSS部分

    web前端面试题HTML/CSS部分 前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面“内容是什么”的问题 ...

  7. 金三银四求职季,前端面试题小梳理(HTML、CSS、JS)

    好久没写学习记录,最近太多事,又到一年求职季,都说金三银四求职季,自己也做一下最近学习的一些前端面试题梳理,还是个小白,写的不对请指正,不胜感激. HTML篇 html语义化 用语义化的代码标签书写, ...

  8. 前端面试题总结（二）CSS篇

    前端面试题总结(二)CSS篇 一.link和@import的区别? link属于HTML标签,可以引入出css以外的事务,如RSS,而@import是css提供的,只能加载css文件. link会在页 ...

  9. 前端面试题-CSS选择器

    一.CSS选择器作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素,但不只是在 CSS 中,JavaScript 对 CSS 的选择器也是支持的,比如 document.document. ...

随机推荐

  1. win10 uwp 反射

    本文在h神的指导下完成. 反射是强大的好用的,我们可以添加新功能不修改之前的代码,通过使用反射得到. 本文下面和大家说如何做一个和WPF一样的反射功能,如何才能获的 UWP 程序集所有类. 先来说下反 ...

  2. Java设计模式（四）——再谈观察者模式

    在本系列的上一篇文章中,我们讨论了JDK对于观察者模式的一套实现.今天我们将要从另一个角度来探索Tomcat中是如何利用观察者模式加载各个组件.不过今天的任务不是解释Tomcat,所以我会单独把重点抽 ...

  3. VMware Tools安装方法及共享文件夹设置方法

    正确安装好VMware Tools后,可以实现主机与虚拟机之间的文件共享, 可以设置共享文件夹,以及在主机与虚拟机之间直接进行复制黏贴的操作. 安装方法: 选择"虚拟机"-> ...

  4. 类的封装（property）

    封装 封装程序的主要原因:保护隐私:而封装方法的主要原因是:隔离复杂的执行过程 property的特性 将一个类的函数定义成特性以后,对象再去使用的时候obj.name,根本无法察觉自己的name是执 ...

  5. jdbc链接hive报错：java.lang.ClassNotFoundException: org.apache.thrift.transport.TTransport

    写了个jdbc连接hive2的demo,结果报错:java.lang.ClassNotFoundException: org.apache.thrift.transport.TTransport,实际 ...

  6. Spring + Fastweixin 微信开发

    这篇文章转自<http://www.qtdebug.com/spring-weixin/> 微信有两种模式,编辑模式和开发者模式,有些功能是互斥的,不可以同时使用,微信开发需要在开发者模式 ...

  7. hdu 1011 Starship Troopers(树形DP入门)

    Starship Troopers Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Other ...

  8. 爆炸快求1~n有多少素数

    这个求一千亿以内的素数大约用6780ms #include <stdio.h> #include <iostream> #include <string.h> #i ...

  9. centos 6.9安装zabbix 3.0

    Linux下常用的系统监控软件有Nagios.Cacti.Zabbix.Monit等,这些开源的软件,可以帮助我们更好的管理机器,在第一时间内发现,并警告系统维护人员. 今天开始研究下Zabbix,使 ...

  10. eclipse禁用svg文件Validation

    1.打开window>preferences>validation找到xml validator 2.点击xml validator最右侧的按钮打开xml校验规则窗口,选中exclude ...