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. Bootstrap 禁用滚动条

    Bootstrap中禁用滚动条的方法 逻辑: 当点击弹窗按钮后,js会为body元素添加一个modal-open的类,该类主要内容如下 .modal-open .modal { overflow-x: ...

  2. GET 和 POST 比较整理

    差异 上传文件只能使用 POST GET 传输数据有大小限制 GET 传输的数据类型不灵活:GET是使用url来传输数据,那么比如空格字符以及类似&这样的字符就不方便传输.(当然可以使用发送前 ...

  3. NOR和NAND

    NOR和NAND NOR和NAND是现在市场上两种主要的非易失闪存技术.Intel于1988年首先开发出NOR flash技术,彻底改变了原先由EPROM和EEPROM一统天下的局面.紧接着,198? ...

  4. AOP的实现的几种方式

    1.静态代理,实现代码如下,实际上是对装饰器模式的一种应用 interface UserManager { public void addUser(); } class UserManagerImpl ...

  5. MongoDB自动增长

    MongoDB 没有像SQL一样有自动增长的功能,如果我们需要实现ObjectId自动增长功能,可以通过编程的方式来实现.步骤如下: 1. 创建counters集合: db.createCollect ...

  6. 最近折腾老机器：还是 Xp 最好！

    闲来无事,折腾机器. -------------------------------------------------------------- 硬件: CPU:amd x2450 Memory:6 ...

  7. C++ regex库的三种正则表达式操作

    关于正则表达式的语法和字符含义,网上已经有很不错的博客教学,我当初参考的是 读懂正则表达式就这么简单 - Zery - 博客(http://www.cnblogs.com/zery/p/3438845 ...

  8. C++ stl 运用（深层）

    1.multiset(set差不多) (1)erase删除,删除指针和键值是不同的. 键值的话是删除所有,指针的话是那个位置的值. (2)统计单个键值个数. (3)对于q.begin(),q.end( ...

  9. Leetcode题解（十五）

    42.Trapping Rain Water 题目 这道题目参考http://www.cnblogs.com/felixfang/p/3713197.html 观察下就可以发现被水填满后的形状是先升后 ...

  10. Codeforces Round #443 (Div. 2) C. Short Program

    C. Short Program time limit per test 2 seconds memory limit per test 256 megabytes input standard in ...