css3面试题总结

盒子水平垂直居中方法

纯flex布局父级盒子开启display flex ,justify-content:center,align-item:center
子盒子开启绝对定位，top和left设置50%，margin-top和margin-left设置负的自身高度和宽度的一半，需要计算盒子宽高，不方便
子盒子开启绝对定位，top和left设置50%，transform:translate(-50%,-50%)此方法不用刻意计算盒子宽高
父盒子开启flex，子盒子设置margin:auto
子盒子开启绝对定位，设置top,left,right,bottom都为0，margin:auto

盒模型

w3c标准盒模型，是默认的盒模型，content-box,设置的宽高为content内容的宽高，实际上的宽高需要加上padding和border
怪异盒模型/c3盒模型/ie盒模型，border-box，设置的宽高即为实际的宽高，内容content的宽高会被padding和border给压缩，主要表现在ie浏览器，其他浏览器也保留了该盒模型

flex:1的意思

flex:1用来表示父级盒子开启弹性盒子布局时子盒子的占比，该属性是以下三个属性的简写：flex-grow,flex-shrink,flex-basis
flex-grow:当所有子盒子的宽度总和小于父盒子的宽度时，父盒子的剩余空间可以利用该属性来分配子盒子的扩大占比
flex-shrink:当子盒子们的宽度总和大于父盒子的宽度时，子盒子们宽度比父盒子大出来的部分可以用该属性来分配各个子盒子的缩小占比
flex-basis:是盒子的宽度基准宽度，当width和该属性同时存在时width会失效，以flex-basis为准
flex:1===flex-grow:1+flex-shrink:1+flex-basis:0%

css3新属性

c3盒子模型
flex布局
transition过渡动画
tansform2D转换
3D转换
background-size背景缩放
border-radius圆角
border边框图片
input新类型：search e-mail等等

对bfc的理解

bfc即 block formatting context块级格式化上下文，拥有该属性后就会创造出一个与外界隔离的渲染区域，该渲染区域中的布局和内容不会影响到外部，外部也不会影响到内部

如何触发：

overflow:除了visible以外的属性
html根元素
float除了none以外的属性
diplay:inline-block flex等
position为absolute和fixed

解决什么问题：

上下两个盒子分别设置下外边距margin-bottom和上外边距margin-top会重叠，只会显示较大的那一个，让其中一个盒子触发bfc即可解决
清除浮动，当子盒子开启浮动，而父盒子没有高度时，父盒子高度会消失，此时给父盒子开启bfc就可使父盒子高度正常
实现自适应布局，假设两个盒子，当一个固定宽度的盒子开启左浮动给另一个盒子开启bfc即可防止发生左盒子盖在右边盒子上，而是左边固定，右边盒子自适应变化

如何清除浮动

定高法，给盒子设置固定高度
添加一个空白盒子设置style='clear:both'
为父元素添加overflow:hidden
设置一个去除浮动clearfix样式类

  content: "";  			/*设置内容为空*/
  height: 0;    			/*高度为0*/
  line-height: 0;			/*行高为0*/
  display: block;			/*将文本转为块级元素*/
  visibility: hidden;	/*将元素隐藏*/
  clear: both; 				/*清除浮动*/
}

.clearfix {
  zoom: 1; 				/*为了兼容IE*/
}

由于flex布局的稳定性和适应性强已经成为主流布局方式，浮动布局使用率在逐步降低

css选择器优先级

行内样式>id选择器>类选择器>标签选择器

px,em,rem的区别

px是绝对单位。em和rem是相对单位 em是相对父级字号大小，如果自身定义了字号大小按照自身来算，一般用于首行缩进 rem是相对html跟元素字号大小，一般用于移动端适配，是css3新增单位

伪类和伪元素的区别

伪类：

结构伪类:first-child ,:last-child,:nth-child,:nth-of-type等
状态伪类：:hover,:active,:visited,:link,:focus等伪类和类权重相同

伪元素： ::before,::after用于创造不存在于dom树中的元素，同样可以添加样式区别：伪类是用来匹配元素特殊状态的伪元素是用来匹配元素隶属元素的，不存在于dom树中

css3面试题重点部分小结