笔记:面试准备之CSS篇

116 阅读1分钟

原文出处:“寒冬”三年经验前端面试总结(含头条、百度、饿了么、滴滴等)之CSS篇

盒模型

标准盒模型:margin + border + padding + width(content)

IE盒模型:margin + width(border + padding +  content)

box-sizing:content-box(标准)/ border-box(IE)

Flex

参考:阮一峰老师的博客

BFC

块级格式化上下文

清除浮动

父元素加样式:overflow:hidden

父元素加伪类:

content:'';
display: block;
clear: both;

垂直居中

flex——align-items & justify-content

absolute + transform:translate(-50%,-50%)

absolute + margin负值(子元素已知大小)

absolute + 各方向为0 + margin:0 auto(子元素已知大小)

写个三角形

标签:

width:0;
height:0;
border:10px solid transparent;
border-left-color:red;

伪类:

content:'';
font-size:0;
border:10px solid transparent;
border-left-color:red;

CSS3动画