css基础知识整理 面试题

CSS

1.哪些方式可以对一个DOM设置他的css样式？

外部样式表。引入一个外部CSS文件；
内部样式表。将CSS代码放在标签内部；
内联样式，将CSS样式直接定义在HTML元素内部；

2.css选择器有哪些？选择器的优先级？

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。HTML页面中的元素就是通过CSS选择器进行控制的。
1.标签选择器(如：body,div,p,ul,li)
　　2.类选择器(如：class=“head”,class=“head_logo”)
　　3.ID选择器(如：id=“name”,id=“name_txt”)
　　4.全局选择器(如：*号)
　　5.组合选择器(如：.head .head_logo,注意两选择器用空格键分开)
　　6.后代选择器 (如：#head .nav ul li 从父集到子孙集的选择器)
　　7.群组选择器 div,span,img {color:Red} 即具有相同样式的标签分组显示
　　8.继承选择器(如：div p,注意两选择器用空格键分开)
　　9.伪类选择器(如：就是链接样式,a元素的伪类，4种不同的状态：link visited active hover。)
　　10.字符串匹配的属性选择符(^ $ 三种，分别对应开始、结尾、包含)
　　11.子选择器 (如：div>p ,带大于号>)
　　12.CSS 相邻兄弟选择器器 (如：h1+p,带加号+)
!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承> 浏览器默认属性
3.什么是css hack? ie 6,7,8的hack分别是什么？6,7,8,9 _ ,+, \0 ,\9
例： #test{
width: 300px;
height: 300px;
background-color: blue;
background-color: red\9; / all ie /
background-color: yellow\0; / ie8 /
+background-color: pink; / ie7 /
_background-color: orange; / ie6 /
:root #test{
background: purple\9; / ie9 */
}

        @media all and {min-width: 0px} #test{background-color: black\0;} /* opera */
        @media screen and {-webkit-min-device-pixel-ratio: 0 } {#test {background-color: gray}} /* chrome and safari */
    }

@media可以针对不同的媒体类型定义不同的样式。特别是如果你需要设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器宽度和高度重新渲染页面。
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，让它能够同时兼容不同的浏览器,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

4.透明效果 rgba()和opacity的区别

首先来看rgba:
R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间。
再看opacity:
后面的取值为从 0.0 （完全透明）到 1.0（完全不透明）。
两者的区别：opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。
opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或背景色。设置rgba透明的元素的子元素不会继承透明效果。

5.px与em区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高度都是16px。所以未经调整的浏览器都符合：1em=16px。那么12px=0.75em, 10px = 0.625em。
px是像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
rem是CSS3新增的一个相对单位（root em，根em），这个单位引起了广泛关注。
这个单位与em有什么区别呢？
区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

6.描述一个“reset”的css文件并如何使用它。知道normalize.css吗？你了解他们的不同之处吗?

重置样式非常多，凡是一个前端开发人员肯定会有一个常用的重置css文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？
原因是不同的浏览器对一些元素有不同的的默认样式，如果你不处理，在不同浏览器下回存在必要的风险，或者更有戏剧性发生。
你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供一套合理的默认样式值。既能够让众多浏览器达到一致和合理，但不扰乱其他的东西（如粗体的标题）。

7.CSS的content属性有什么作用？什么应用？

知道。CSS的content属性专门应用在before/after伪元素上，用来插入生成内容。
最常见的应用是利用伪类清除浮动：
//一种常见利用伪类清除浮动的代码
.clearfix:after {
content:"."; //这里利用到了content属性
display:block;
height:0;
visibility:hidden;
clear:both; }
.clearfix {
*zoom:1;
}
after伪元素通过content在元素的后面生成一个点的块级元素，再利用clear: both清除浮动。

8.字体 虚线 下划线

Font-size dotted text-decoration

1.行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

块级元素（block）特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示。
width、height、padding（内边距）、margin(外边距)都可控制。
内联元素（inline）特性：
宽度、高度、内边距的padding-top/padding-bottom和外边距的margin-top、margin-bottom都不可改变（也就是padding和margin的left和right是可以设置的）。
这里还有其他问题。浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些元素是天生inline-block元素？
它们是<input>、<img>、<button>、<textare>、<label> 。

2.CSS中可以让文字在垂直和水平方向重叠的两个属性分别是什么？

垂直方向：line-height。设置成比字体高度还小就可以让两行重叠
水平方向：letter-spacing。设置为负值即可实现重叠。

3.Sass、Less是什么？大家为什么要使用他们？

他们是CSS预处理器。他是CSS上的一种抽象层。它们是一种特殊的语法、语言编译成CSS。
例如Less是一种动态样式语言。将CSS赋予了动态语言的特性，如变量，继承，运算，函数。Less即可以在客户端上运行（支持IE6+,Webkit,Firefox），也可以在服务端运行（借助Node.js）。
Sass变量必须是$开始，而Less变量必须使用@符号开始。
为什么要使用它们？
1结构清晰，便于扩展。
2可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无异议的机械劳动。
3可以轻松实现多重继承。
4完全兼容CSS代码，可以方便地应用到老项目中。Less只是在CSS语法上做了扩展，所以老的CSS代码也可以与Less代码一同编译。

4.display:none和visiblity:hidden的区别是什么？

display:隐藏对应元素但不挤占该元素原来的空间。
visiblity: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用CSS display:none属性后，HTML元素（对象）的宽度、高度等各种属性都将“丢失”；而使用visibility:hidden属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置任然存在。

5.盒子模型在不同浏览器上的区别

http://www.cnblogs.com/ylliap/p/6119740.html
盒子模型有两种，分别是IE盒子模型和标准W3C盒子模型。

w3c盒子模型的范围包括margin、border、padding、content，并且content部分不包含其他部分。
IE盒子模型的范围也包括margin、border、padding、content，

和标准w3c盒子模型不同的是：ie盒子模型的content部分包含了border和padding。

IE盒模型的宽度或者高度计算方式为：
width/height = content + padding + border，
W3C盒模型的宽度或者高度计算方式为：
width/height = content。
例如：
一个盒子的margin为20px，border为1px，padding为10px，content的宽为200px、高为50px，加入用标准盒子模型解释，那么这个盒子需要占据的位置为：
宽：202 + 1 * 2 + 10 2 + 200 = 262px, 高：20 * 2 + 1 * 2 + 10 * 2 + 50 = 112px。
盒子的实际大小为：宽12 + 10 * 2 + 200 = 222px,高1 2 + 10 * 2 + 50 = 72px。
假如用IE盒子模型，那么盒子需要占据的位置为：
宽：20 * 2 + 200 = 240px,高：20 * 2 + 50 = 70px。
盒子的实际大小：宽200px,高50px。
一般推荐使用W3C盒子模型，怎样才算是选择了标准W3C盒子模型呢？
就是在网页上加DOCKTYPE声明。如果不加，那么各个浏览器会根据自己的行为去理解网页。

CSS3增加了box-sizing属性，值包括content-box|border-box|inherit。
默认值为content-box。如果值为content-box，那元素遵循的是W3C盒模型；如果值为border-box，那元素遵循的是IE盒模型；如果值为inherit，该属性的值应该从父元素继承。
在我们的重置样式文件中一般也会重置这个属性，把box-sizing设置成border-box方便于排版。

---

学习css布局

1.display

display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。

block
常用的块级元素包括div、 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

inline
span 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。

none
另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。
display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和 visibility 属性不一样。把 display 设置成 none 元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden; 还会占据空间。

其他 display 值
还有很多的更有意思的 display 值，例如 list-item 和 table 、 inline-block 和 flex 。

---

2.margin: auto;

#main {
  width: 600px;
  margin: 0 auto; 
}
<div id="main">

设置块级元素的 width 可以防止它从左到右撑满整个容器。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。

当浏览器窗口比元素的宽度还要窄时，浏览器会显示一个水平滚动条来容纳页面

使用 max-width 替代 width 可以使浏览器更好地处理小窗口的情况。

---

3.盒模型

设置一个元素为 box-sizing: border-box; 时，此元素的内边距和边框不再会增加它的宽度

想要页面上所有的元素都有如此表现，把以下CSS代码放在页面上

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

4.position例子

5.float

Float 可用于实现文字环绕图片

6.clear

clear属性被用于控制浮动

需要用 left 值才能清除元素的向左浮动。你还可以用 right 或 both 来清除向右浮动或同时清除向左向右浮动。

clear:both; clear就是清除,both指的是左浮动,右浮动都要清除.意思就是:清除别人对我的影响.

7.清除浮动

 .clearfix {
  overflow: auto;
  zoom: 1;
}
1. clear:both
2. 伪类清除
.clearfix:after { 
	content:"."; 
	display:block; 
	height:0; 
	visibility:hidden; 
	clear:both;
 } 

延伸： https://stackoverflow.com/questions/211383/what-methods-of-clearfix-can-i-use
实例：http://zh.learnlayout.com/float-layout.html

8.百分比宽度

百分比是一种相对于包含块的计量单位。它对图片很有用：如下我们实现了图片宽度始终是容器宽度的50%。

9.媒体查询

使用百分比宽度来布局，然后在浏览器变窄到无法容纳侧边栏中的菜单时，把布局显示成一列：
响应式实例

10.inline-block布局

你可以使用 inline-block 来布局。有一些事情需要你牢记：

vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
你需要设置每一列的宽度
如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙

11.column

这里有一系列新的CSS属性，可以帮助你很轻松的实现文字的多列布局

12.flexbox