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. 浅谈oracle树状结构层级查询之start with ....connect by prior、level及order by

    浅谈oracle树状结构层级查询 oracle树状结构查询即层次递归查询,是sql语句经常用到的,在实际开发中组织结构实现及其层次化实现功能也是经常遇到的,虽然我是一个java程序开发者,我一直觉得只 ...

  2. C＃ 通配符转正则

    可以使用下面代码把通配符转正则字符串 public static class WildcardRegexString { /// <summary> /// 通配符转正则 /// < ...

  3. win10 uwp 弹起键盘不隐藏界面元素

    本文主要讲,在我们使用手机输入的时候,会因为手机的虚拟键盘隐藏了一些界面的元素.我们有一个简单的方法让虚拟键盘不隐藏界面元素. 我们需要的界面元素是在显示了虚拟键盘后的空间能全部显示,如果不能的话,还 ...

  4. jfinal使用配置文件注意事情

    使用Popkit @Override public void configConstant(Constants me) { me.setViewType(ViewType.JSP); PropKit. ...

  5. mybatis 的mapper配置文件sql语句中, 有时用到 大于, 小于等等

    一, 用<![CDATA[   ]]>标识,例如: <if test="create_timeStart != null and create_timeStart != ' ...

  6. hibernate的集合映射（详细笔记）

  7. 推荐一款不错的反编译软件：Reflector

    只需要把要反编译的dll拖放到程序窗口就可以看到code了.是不是很简单,快来试试吧.不只是可以反编译个人写的code,.Net库一样可以查看代码.想学习.Net核心代码的可以试试看.

  8. Leetcode题解（十）

    29.Divide Two Integers 题目 题目要求不用乘除和取模运算,实现两个整数相除: 我的第一想法就是把除法变成减法来做,这也是最初除法的定义,其实现代码如下: class Soluti ...

  9. HDU 6121 Build a tree（找规律+模拟）

    Build a tree Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Others)To ...

  10. [转载]ACM搜索算法总结（总结）

    原文地址:ACM搜索算法总结(总结)作者:GreenHand 搜索是ACM竞赛中的常见算法,本文的主要内容就是分析它的 特点,以及在实际问题中如何合理的选择搜索方法,提高效率.文章的第一部分首先分析了 ...