css面试题

1 必考：两种盒模型分别说一下。

1 标准盒模型：box-sizing: content-box
	width = content-width
	height = content-height
2 怪异盒模型：box-sizing: border-box
	width = content-width + padding-width + border-width
	height = content-height + padding-height + border-height
	优势：无论如何改动border，margin与padding的值，都不会导致box总尺寸发生变化，布局写起来更方便

2 必考：如何垂直居中

垂直居中
垂直居中

如果 .parent 的 height 不写，你只需要 padding: 10px 0; 就能将 .child 垂直居中；
如果 .parent 的 height 写死了，就很难把 .child 居中，以下是垂直居中的方法。
忠告：能不写 height 就千万别写 height。

1 table自带功能
  <table class="parent">
    <tr>
      <td class="child">
      一串文字
      </td>
    </tr>
  </table>

2 100% 高度的 afrer before 加上 inline block

div 装成 table

margin-top -50%

translate -50%

absolute margin auto

对需要水平垂直居中的元素写css:

position  : absolute;
top       : 50%;
left      : 50%;
transform : translate(-50%,-50%);

flex
对父级元素写css:单行居中：
display         : flex;
justify-content : center;
align-items     : center;

多行垂直居中：
display         : flex;
justify-content : center;
flex-wrap       : wrap/wrap-reverse;
align-items     : center;

居中

单行文本在盒子里垂直居中。
	水平方向：text-align: center;
	垂直方向居中：让行高与容器高度一致line-height: 行高px;	行高：显示一行所需的高度。
多行文本在盒子垂直居中。盒子不给高度，用上下padding挤出来。
	水平方向：text-align: center;
	垂直方向居中：通过padding设置高度padding:90px 0;
文本水平方向居中。
盒子在父盒子内水平居中。
	行内元素：text-align: center;
	块元素：margin: 0 auto;
	行内块：text-align: center;
盒子在父盒子内垂直居中。
	行内元素：line-height: 300px;
	块元素：
			如果已知父容器高度，设置margin-top，但是不要塌陷margin-top: 100px
				水平垂直居中：margin: 100px auto;
			如果父容器高度不确定，设置父元素padding: 200px 0;
	行内块：line-height: 300px;注意，垂直居中的时候，要更改图片的对齐方式：
			vertical-align: middle;
表格居中：td标签添加属性align="center

借助表格特性，可以将单行文本，多行文本，行内元素，块元素，行内块元素等，实现居中
模拟表格居中
.demo{
	width: 600p;
	height: 600px;
	border: 10px solid pink;
	/*模拟表格*/
	display: table-cell;
	/*水平居中*/
	text-align:center;
	/*垂直居中*/
	vertical-align:middle;/*对齐方式为居中对齐*/
}

<div class="ickt">
	hello
	<br>
	hello world;
	<span>span</span>
	<div>div</div>
	<img ....>
</div>

垂直居中
1 行内inline元素	
	line-height的值等于height的值
2 absolute定位元素
	1 top: 50% + margin-top负值，高度的一半，需要知道元素的尺寸
	2 left: 50%; top: 50%; transform: translate(-50%, -50%);	不需要知道盒子的尺寸
	3 top: 0; left: 0; bottom: 0; right: 0; margin: auto;	会自动分配外边距，不存在兼容性，不需要知道元素尺寸

3 必考：flex 怎么用，常用属性有哪些？

flex
align-items和align-content

4 必考：BFC 是什么？

BFC 全称为 块格式化上下文 (Block Formatting Context)。BFC的布局规则如下：
1 内部的盒子会在垂直方向，一个个地放置；
2 盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
3 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
4 BFC的区域不会与float重叠；
5 BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
6 计算BFC的高度时，浮动元素也参与计算。

BFC
BFC

5 CSS 选择器优先级

1 越具体优先级越高
2 写在后面的，覆盖写在前面的
3 !important最高，少用

选择器优先级

6 清除浮动说一下

浮动会造成父级标签塌陷问题
解决方法:
	1 父级标签设置高度
	2 伪元素选择器清除浮动,给父级标签加上下面这个类值
		.clearfix:after{
            content: '';
            display: block;
            clear: both;  清除浮动clear
        }