CSS 面试题大全看这一篇就够了（持续更新......）

css盒子模型？？

在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素内容（content）、内边距（padding）、边框（border）、外边距（margin），这四个部分构成了css中元素的盒子模型

• W3C定义的盒子模型包括margin、border、padding、content ，元素的width = content的宽度
• IE盒子模型与W3C的盒子模型唯一区别就是元素的宽度，元素的width = content + padding + border

个人认为W3C定义盒子模型与IE定义的盒子模型，IE定义的比较合理，元素的宽度应该包含border（边框）和padding（填充），这个和我们现实生活的盒子是一样的，W3C也认识到自己的问题了，所以在CSS3中新增了一个样式box-sizing，包含两个属性content-box 和 border-box。

拓展：
对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效
对于相邻的块级元素margin-bottom和margin-top 取值方式

• 都是正数： 取最大值
• 都是负数： 取最小值
• 上面是正数，下面是负数或者 上面是负数，下面是正数： 正负相加

css3新特性？？？

选择器

• E:nth-child(n) 选择器匹配其父元素的第n个子元素，不论元素类型，n可以使数字，关键字，或公式
• E:nth-of-type(n) 选择与之其匹配的父元素的第N个子元素
• E:frist-child 相对于父级做参考，“所有”子元素的第一个子元素，并且“位置”要对应
• E:frist-of-type 相对于父级做参考，“特定类型”（E）的第一个子元素
• E:empty 选择没有子元素的每个E元素
• E:target 选择当前活动的E元素
• ::selection 选择被用户选取的元素部分
• 属性选择器 E[abc*="def"] 选择adc属性值中包含子串"def"的所有元素

文本

• text-shadow:2px 2px 8px #000;参数1为向右的偏移量，参数2为向左的偏移量，参数3为渐变的像素，参数4为渐变的颜色
• text-overflow：规定当文本溢出包含元素时发生的事情 text-overflow:ellipsis(省略)
• text-wrap：规定文本换行的规则
• word-break 规定非中日韩文本的换行规则
• word-wrap：对长的不可分割的单词进行分割并换行到下一行
• white-space：规定如何处理元素中的空白 white-space:nowrap 规定段落中的文本不进行换行

边框

• border-raduis 边框的圆角
• border-image 边框图片

  	.border-image {
  	    border-image-source:url(images/border.png);
  	    boder-image-slice:27;
  	    border-image-width:10px;
  	    border-iamge-repeat:round; (round平铺) 平铺效果不作用于四角，只适应与四边  
  	}
  

背景

• rgba
• backgrounnd-size:cover/contain，其中background-size：cover，会使“最大”边进行缩放，另一边同比缩放，铺满容器，超出部分会溢出。background-size:contain，会使“最小”边进行缩放，另一边同比缩放，不一定铺满容器，会完整显示图片
  渐变
• linear-gradient

  background-image:linear-gradient(90deg,yellow 20%,green 80%)
  

• radial-gradient

  background-iamge:radial-gradient(120px at center center,yellow,green)
  

多列布局

• column-count
• column-width
• column-gap
• column-rule
  过渡
• transition
• transition-property:width //property为定义过渡的css属性列表，列表以逗号分隔
• transition-duration:2s; //过渡持续的时间
• transition-timing-function:ease
• transition-delay:5s //过渡延迟5s进行
  动画、旋转
• animation
• transform ：translate（x,y) rotate(deg) scale(x,y)
• translate
• scale
• rotate
• skew（倾斜）
  flex布局 …
  @media媒体查询 …

元素定位有哪些？？？

position为元素定位属性

包含以下属性值

• static 默认值（没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明））
• absolute 绝对定位（相对位置为父元素为非static的第一个父元素进行定位。）
• fixed 固定定位(IE6不支持)（相对于浏览器窗口进行定位）
• relative 相对定位（相对于其正常（默认布局）位置进行定位。）

注

• 所有的定位如果left、top、right、bottom属性都为默认值，则为默认定位
• absolute定位会脱离文档，浮动起来，多个层重叠可以使用z-index属性改变层叠顺序
• absolute定位忽略padding，相对位置为相对定位容器的左上角内边框

::before 与 :before的区别？？

相同点：

• 都可以用来表示伪类对象，用来设置对象前的内容
• :before和::before写法是等效的
  不同点：
• :before是Css2的写法，::before是Css3的写法
• :before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好

注

• 伪类对象要配合content属性一起使用
• 伪类对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入
• 伪类对象的特效通常要使用:hover伪类样式来激活

  .test:hover::before { /* 这时animation和transition才生效 */ }
  

清除元素浮动？？

• clear: both
  实例1用div

  <div class="box">
  	 <div class="div"></div>
  	 <div class="clear"></div>
  </div>
  

  .box { 
  	width:300px;
  	margin:0 auto;
  	border:10px solid #000;
  }
  .div { 			
  	width:200px;
  	height:200px;
  	background:red;
  	float:left;
  }
  .clear { 
  	height:0px;
  	font-size:0;
  	clear:both;
  	overflow: hidden;
  }
  

  实例2用< br clear=“all” >

  <div class="box">
   	<div class="div"></div>
     	<br clear="all"/>
  </div>
  

  .box { 
  	width:300px;
  	margin:0 auto;
  	border:10px solid #000;
  }
  .div { 			
  	width:200px;
  	height:200px;
  	background:red;
  	float:left;
  }
  

  实例3用伪类对象::after+zoom:1(推荐使用)

  <div class="box clear">
  	 <div class="div"></div>
  </div>
  

  .box { 
  	margin:0 auto;
  	border:10px solid #000;
  }
  .div { 			
  	width:200px;
  	height:200px;
  	background:red;
  	float:left;
  }
  .clear {
  	zoom:1;
  }
  .clear:after{		
  	display:block;	
  	clear:both;
  	content:"";
  	visibility:hidden;
  	height:0
  }
  

• overflow

  <div class="box">
  	<div class="div"></div>
  </div>
  

  .box { 
  	width:100px;
  	margin:0 auto;
  	border:10px solid #000;
  	overflow:auto; //或者hidden
  }
  .div { 			
  	width:200px;
  	height:200px;
  	background:red;
  	float:left;
  }
  

• display
  注意：父元素不能水平居中，在父元素使用text-align:center解决

  <div class="box">
  	<div class="div"></div>
  </div>
  

  .box { 
  	width:100px;
  	margin:0 auto;
  	border:10px solid #000;
  	display:inline-block;
  }
  .div1 { 			
  	width:200px;
  	height:200px;
  	background:red;
  	float:left;
  }
  

• 父级元素浮动
  注意：父元素不能水平居中，可以使用定位解决
  position: relative;
  left: 50%;
  margin-left: -150px;

  <div class="box">
  	<div class="div"></div>
  </div>
  

  .box { 
  	width:100px;
  	margin:0 auto;
  	border:10px solid #000;
  	float:left;
  }
  .div1 { 			
  	width:200px;
  	height:200px;
  	background:red;
  	float:left;
  }
  

CSS垂直水平居中的几种方法？？

就简单举几个栗子，不一一详细代码解释（偷个懒~）…

• margin：0 auto + line-height: xxx
• position元素已知宽度，绝对定位 + margin反向偏移
• position 绝对定位 + transform：translate(-50%, -50%) 元素未知宽度用-百分数否则用具体px值
• position 绝对定位 设置margin:auto;并设置top、left、right、bottom的值相等即可，不一定要都是0
• flex布局 justify-content: center(水平) align-items: center(垂直)
• position给子元素相对定位，在通过transform: translateY(-50%) + margin: 0 auto
• 利用inline-block的vertical-align: middle去对齐, 为父元素添加after伪元素

什么是 BFC???

BFC（Block Formatting Context）即“块级格式化上下文”，IFC（Inline Formatting Context）即行内格式化上下文。常规流（也称标准流、普通流）是 一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化 上下文，你可以把 BFC 想象成一个大箱子，箱子外边的元素将不与箱子内的元素 产生作用。

如何产生 BFC

CSS3 触发 BFC 方式则可以简单描述为：在元素定位非 static，relative 的情况 下触发，float 也是一种定位方式。

• float 的值不为 none
• overflow 的值不为none
• display 的值为 table-cell, table-caption, inline-block 中的任何一个
• position 的值不为 relative 和 static

BFC 的作用与特点

• 不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖； 如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个重叠的现象。 常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态，当 float 不为 none 时，position 为 absolute、fixed 时元素将脱离标准流。

页面布局的方式有哪些？

双飞翼、多栏、弹性、流式、瀑布流、响应式布局…

• 双飞翼布局

  经典三列布局，也叫做圣杯布局【Holy Grail of Layouts】是 Kevin Cornell 在 2006 年提出的一个布局模型概念，在国内最早是由淘宝 UED 的工程师传播开 来，在中国也有叫法是双飞翼布局，它的布局要求有几点：

  • 三列布局，中间宽度自适应，两边定宽；
  • 中间栏要在浏览器中优先展示渲染；
  • 允许任意列的高度最高；
  • 要求只用一个额外的 DIV 标签；
  • 要求用最简单的 CSS、最少的 HACK 语句；
    在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位， 以后布局是有局限性的，而且宽度控制要改的地方也多。在淘宝 UED（User Experience Design）探讨下，增加多一个 div 就可以不用相对布局了，只用到 了浮动和负边距，这就是我们所说的双飞翼布局。

• 多栏布局

  • 栏栅格系统：就是利用浮动实现的多栏布局，在 bootstrap 中用的非常多。
  • 多列布局：栅格系统并没有真正实现分栏效果（如 word 中的分栏），CSS3 为了满足这个要求增加了多列布局模块

• 弹性布局（Flexbox）

  CSS3 引入了一种新的布局模式——Flexbox 布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局， 即使它们的大小是未知或者动态的，这里简称为 Flex。
  Flexbox 布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大 小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现 元素位置的定义以及重置元素的大小。

  • 屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
  • 可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间）， 从而调整伸缩项目的大小；
  • 可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之 前、之后或之间；
  • 可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
  • 可以控制元素在页面上的布局方向； f、可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排 序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

• 瀑布流布局

  瀑布流布局是流式布局的一种。是当下比较流行的一种网站页面布局，视觉表现 为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是 Pinterest，逐渐在国内流行开 来。
  优点：

  • 有效的降低了界面复杂度，节省了空间：我们不再需要臃肿复杂的页码导航 链接或按钮了。
  • 对触屏设备来说，交互方式更符合直觉：在移动应用的交互环境当中，通过 向上滑动进行滚屏的操作已经成为最基本的用户习惯，而且所需要的操作精准程 度远远低于点击链接或按钮。
  • 更高的参与度：以上两点所带来的交互便捷性可以使用户将注意力更多的集 中在内容而不是操作上，从而让他们更乐于沉浸在探索与浏览当中。
    缺点：
  • 有限的用例： 无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。 例如，在电商网站当中，用户时常需要在商品列表与详情页面之间切换，这种情 况下，传统的、带有页码导航的方式可以帮助用户更稳妥和准确的回到某个特定 的列表页面当中。
  • 额外的复杂度： 那些用来打造无限滚动的 JS 库虽然都自称很容易使用，但你总会需要在自己的 产品中进行不同程度的定制化处理，以满足你们自己的需求;另外这些 JS 库在浏 览器和设备兼容性等方面的表现也参差不齐，你必须做好充分的测试与调整工 作。
  • 再见了，页脚： 如果使用了比较典型的无限滚动加载模式，这就意味着你可以和页脚说拜拜了。 最好考虑一下页脚对于你的网站，特别是用户的重要性;如果其中确实有比较重 要的内容或链接，那么最好换一种更传统和稳妥的方式。千万不要耍弄你的用户，当他们一次次的浏览到页面底部，看到页脚，却因为自 动加载的内容突然出现而无论如何都无法点击页脚中的链接时，他们会变的越发 愤怒。
  • 集中在一页当中动态加载数据，与一页一页的输出相比，究竟那种方式更利 于 SEO，这是你必须考虑的问题。对于某些以类型网站来说，在这方面进行冒险 是很不划算的。
  • 关于页面数量的印象： 其实站在用户的角度来看，这一点并非负面;不过，如果对于你的网站来说，通 过更多的内容页面展示更多的相关信息(包括广告)是很重要的策略，那么单页无 限滚动的方式对你并不适用。

• 流式布局（Fluid）

  固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页 的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限 定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。

• 响应式布局

  响应式布局是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简而言之，就 是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概 念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且 随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越 多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
  优点：

  • 面对不同分辨率设备灵活性强
  • 能够快捷解决多设备显示适应问题
    缺点：
  • 兼容各种设备工作量大，效率低下
  • 代码累赘，会出现隐藏无用的元素，加载时间加长
  • 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
  • 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况