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 3dmax 激活后反复激活和激活码无效问题

    我也是遇到这个问题在网上找答案,像什么断网,清理注册表,删除某个.dat文件 各种试了好多都没管用 弄这个弄了五六个小时才总算成功 心累 现在我总结一下这些方法  我是第一条成功的 其他的我试着都没用 ...

  2. 详解变量声明加 var 和不加 var 的区别

    在全局作用域中声明变量加 var 关键字和不加 var ,js 引擎都会将这个变量声明为全局变量,在实际运行时,两种声明方式的变量的行为也是几乎一致的.但是在全局作用域下是否声明一个变量的 时候加va ...

  3. 常用的HTTP状态码

    成功的状态码: 200 – 服务器成功返回网页 304 – 未修改 失败的状态码: 404 – 请求的网页不存在 503 – 服务器暂时不可用 500 – 服务器内部错误 下面的不是很常用,记住上面那 ...

  4. shell script测试命令（test)

    shell script测试命令(test) test命令 检查系统上面某些文件或者相关的属性 常用选项 test -e :检查该文件名是否存在 例:检查/dmtsai是否存在 [root@local ...

  5. C# To JAVA Converter Cracked ( 破解版 )

    C# To JAVA Converter v17.10.6  Cracked by X-Cracker 简介 C# To Java converter是一款将C#代码片段或者C#项目转换为JAVA的工 ...

  6. 【ASP.NET MVC 学习笔记】- 20 ASP.NET Web API

    本文参考:http://www.cnblogs.com/willick/p/3441432.html 1.ASP.NET Web API(本文简称Web API),是基于ASP.NET平台构建REST ...

  7. LeetCode 122. Best Time to Buy and Sell Stock II （买卖股票的最好时机之二）

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  8. C语言编写一个简单游戏

    感悟:这算是一个起点吧,我都大二了,还这么菜,才开始写游戏,这个游戏很简单,利用随机数猜大小! #include <stdlib.h> #include <stdio.h> # ...

  9. python去除读取文件中多余的空行

    今天在写登录程序练习的时候,黑名单文件中多了几行空行.导致运行的时候报错:IndexError: list index out of range 代码 brackData = open(brackDa ...

  10. hibernate的session详解