CSS 面试总结

1. CSS盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，包括：margin+border+padding+content

• 标准盒模型：一个块的总宽度=width(content)+padding+border+margin
• IE盒模型：一个块的总宽度=width(content+padding+border)+margin
  box-sizing：
• content-box：height和width分别应用到元素的内容框，即标准盒模型
• border-box：content+padding+border
• inherit：继承父元素的box-sizing

2. visibility=hidden opacity=0 display=none（隐藏页面中某个元素的方法）

• display:none; // 把元素隐藏起来，并且会改变布局，可以理解在页面中把该元素删除掉

• visibility:hidden; //把元素隐藏起来了，但是不会改变页面布局，不会触发该元素已经绑定的事件

• opacity:0; //可见度为0

• position:移到可见区域外

• z-index:采用其他元素进行遮挡 涂层遮盖

3. position属性

• fixed
  可定为与相对浏览器窗口的置顶坐标，可通过left，top，right属性来定位
• relative
  可将其移至相对于其正常位置的地方
  无论是否进行移动，元素仍然占据原来的空间，移动元素会导致它覆盖其他框
• absolute
  可定位与相对包含他的元素（最近的已定位父元素，如果没有，则相对于）的指定坐标，可通过left，top等属性规定
  元素的位置与文档流无关，因此不占据空间。定位的元素和其他元素重叠
• static
  始终处于页面流给予的位置，会忽略任何top、button、left、right或者z-index声明
• sticky
  元素先按照普通文档流定位，然后相对于该元素在流中的flow root（BFC）和containing block（最近的块级祖先元素）定位。而后，元素定位表现为在跨越特定阈值前为相对定位，之后为绝对定位。
• inheritbi
  规定从父元素继承position属性的值

4. 浮动的清除

	
	
		
'box1'>
			
'son1'>
			
'son2'>
		
		
'box2'>
	

上边的代码受浮动的影响，浮动元素不占位置，box1中的元素均为浮动元素，所以box2盒子在标准刘中，则会上移，所以需要清除浮动的影响。

• 添加额外的元素

  
  
  	
  'box1'>
  		
  'son1'>
  		
  'son2'>
  		
  'clear'>
  	
  	
  'box2'>
  
  

  好处：通俗易懂，书写方便
  缺点：添加许多无意义的标签，结构化较差
• 父级添加overflow属性方法
  好处：代码简洁
  缺点：内容增多时候容易造成不会自动换行导致内容被隐藏调，无法显示需要溢出的元素
• 使用after伪元素清除浮动，为空元素的升级版

  .clearfix:after {
  	content: '.';
  	display: block; // 转换为块级元素
  	height: 0;
  	visibility: hidden;
  	clear: both; // 清除浮动
  }
  .clearfix {
  	*zoom: 1; //兼容性问题 * 代表ie6 7能识别的特殊符号
  }
  // 同时给父元素添加该样式
  'box1 clearfix'>
  ...
  
  

  空元素的升级版，不用单独添加标签
  优点：符合闭合浮动思想，结构语义化正确
  缺点：由于ie6 7不支持:after，需要使用*zoom:1触发hasLayout
• 使用before和after双伪元素清除浮动
  优点：代码更简洁
  缺点：由于ie6 7不支持:after，需要使用*zoom:1触发hasLayout

5. css3新特性

布局方面：新增了flex布局
选择器方面：新增了first-of-type，nth-child等选择器
盒模型方面：添加了box-sizing改变盒模型
动画方面：添加了animation，2d变换，3d变换等
颜色方面：添加透明，rgba等
字体方面：允许嵌入字体和设置字体阴影
还有媒体查讯等

6. css选择器及其优先级

• id选择器

• class选择器

• 标签选择器

• 伪类选择器

  • 链接伪类选择器 :hover :active :visited :link
  • 结构（位置）选择器 :first-child :last-child :nth-child(n) :nth-last-child(n)
  • 目标伪类选择器 “target”当前活动状态只有一个

• 伪元素选择器 ::before ::after ::selection

• 属性选择器

  优先级
  - 标签选择器 0，0，0，1
  - 伪元素选择器，属性选择器，伪类选择器，类选择器 0，0，1，0
  - id选择器 0，1，0，0
  - 行内样式 1，0，0，0
  - 每个!import的贡献值 无穷
  注意：优先级之间的叠加不存在进位，高位优先级永远高于低位

7. css动画的实现 和 使用js动画和css动画的区别

8. BFC是什么

块级格式化上下文，用于清除浮动，防止margin重叠
BFC区域不会与float box重叠
BFC是页面上的一个独立容器，子元素不会影响到外面
计算BFC的高度时，浮动元素也会参与计算
生成BFC的元素：
- 根元素
- float不为none的元素
- position为fixed和absolute的元素
- display为 inline-block、table-cell、table-caption、flex、inline-flex的元素
- overflow不为visible的元素

9. z-index的定位方法

z-index属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素会处于较低顺序元素之前。z-index可以为负值，且z-index只能在定位元素上奏效，改属性设置一个定位元素沿z轴的位置。
属性值有：

• auto：默认，堆叠顺序与父元素相等
• number
• inherit：从父元素继承z-index属性的值

10. display属性

• none
• block
  block元素会单独占一行，多个block元素会各自新起一行，默认情况下：block元素宽度自动填满其父元素宽度。可设置height，width（会换行），margin，padding属性
• inline-block
  将对象呈现为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。可使得该元素既具有block的宽度高度特性又具有inline的同行特性。
• inline
  inline元素不会单独占一行，多个相邻的行内元素会排列在同一行内，直到一行排列不下，才会新换一行，宽度随内容变化而变化。设置width和height无效。水平方向的padding-left，padding-right，margin-left，margin-right产生边距想过，竖直方向上不产生边距效果。
• flex
  flex（flexible box）布局，弹性布局，用来为盒状模型提供最大的灵活性，指定容器display:flex即可
  其属性可分为容器属性和元素属性
  • 容器属性
    • flex-direction：决定主轴的方向
      • [row | cloumn]
    • flex-wrap：决定换行规则
      • [nowrap 默认 | wrap | reverse]
    • flex-flow：< flex-direction >||< flex-wrap >
    • justify-content：对其方式，水平主轴对齐方式
      • [flex-start | flex-end | center | space-between | space-around]
    • align-items：单行对其方式，竖直轴线方向
      • [stretch 默认 | center | flex-start | flex-end]
    • align-content：多行对其方式，前提是设置display:flex; flex-direction:row; flex-wrap: wrap;
      • [stretch 默认 | center | flex-start | flex-end | space-between | space-around]
  • 元素属性
    • order：定义项目的排列顺序，顺序越小，排列越靠前，默认为0
    • flex-grow：定义项目的放大比例，即使存在空间，也不会放大
    • flex-shrink：定义了项目的缩小比例，当空间不足的情况下会等比例的缩小，如果定义某个item的值为0，则为不缩小
    • flex-basis：定义了在分配多余的空间，项目占据的空间
    • flex：flex-grow || flex-shrink || flex-basis，默认“0 1 auto”
    • align-self：允许单个项目与其他项目不一样的对齐方式，可以覆盖align-items；默认属性为auto，继承父元素的align-items

11. 垂直居中

• 父元素固定宽高，利用定位及设置子元素margin值为自身的一半。
• 父元素固定宽高，子元素设置position：absolute；margin：auto平均分配margin
• 利用transform属性。子元素设置position：absolute；left：50%；top：50%；transform：translate（-50%，-50%）
• 将父元素设置程display：table；子元素设置为单元格display：table-cell
• 弹性布局display：flex。设置align-items：center；justify-content：center