前端面试准备-------CSS（一）

本文是根据知乎爱前端不爱恋爱 提供的目录整理供大家学习，后将持续更新
1、盒模型
2、flex
3、css单位
4、css选择器
5、bfc 清除浮动
6、层叠上下文
7、常见页面布局
8、响应式布局
9、css预处理，后处理
10、css3新特性
animation和transiton的相关属性
animate和translate
11、display哪些取值
12、相邻的两个inline-block节点为什么会出现间隔，该如何解决
13、meta viewport 移动端适配
14、CSS实现宽度自适应100%，宽高16:9的比例的矩形
15、rem布局的优缺点
16、画三角形
17、1像素边框问题

一、盒模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：Margin(外边距)，边Border(边框)，Padding(内边距) ，和Content(内容)。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

1.标准模型和IE模型
标准模型所指的宽高是Content(内容)的宽高。
IE模型是Content(内容)+Padding(内边距)+Border(边框)加起来的宽高。
通过css设置box-sizing属性，来设置标准模型和IE模型

/* 标准模型 */
box-sizing:content-box;

 /*IE模型*/
box-sizing:border-box;

深入理解CSS盒模型

二、Flex

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。

.box{
  display: flex;
}

注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

以下6个属性设置在容器上。
flex-direction属性决定主轴的方向
flex-wrap属性定义，如果一条轴线排不下，如何换行。
flex-flow是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下6个属性设置在项目上。
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
深入了解Flex

三、css单位

1.尺寸

单位	描述
%	百分比
in	英寸
cm	厘米
mm	mm
em	1em 等于当前的字体尺寸。2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。
ex	一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt	磅 (1 pt 等于 1/72 英寸)
pc	12 点活字 (1 pc 等于 12 点)
px	像素 (计算机屏幕上的一个点)
rem	相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。
vw	viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh	viewpoint height，视窗高度，1vh等于视窗高度的1%。

2.颜色

单位	描述
(颜色名)	颜色名称 (比如 red)
rgb(x,x,x)	RGB 值 (比如 rgb(255,0,0))
rgb(x%, x%, x%)	RGB 百分比值 (比如 rgb(100%,0%,0%))
#rrggbb	十六进制数 (比如 #ff0000))

四、css选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

选择器	例子	例子描述	CSS版本
.class	.intro	选择 class=“intro” 的所有元素。	1
#id	#firstname	选择 id=“firstname” 的所有元素。	1
element	p	选择所有p元素。	1
element,element	div,p	选择所有div元素和所有 p元素。	1
element element	div p	选择 div元素内部的所有p元素。	1

更多选择器用法

五、BFC清除浮动

BFC（Block Formatting Context）即“块级格式化上下文”，用来处理文档脱离文档流的问题。它是指一个独立的块级渲染区域，只有Block-level BOX参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

清除浮动的方法有3个，分别如下：
1、尾部添加div

<div>
    <ul style="float:left">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div style="clear:both"></div>
</div>

2、伪类消除

<style>
    .clearfix{
        *zoom:1;
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
</style>
<div class="clearfix">
    <ul style="float:left">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

3、BFC处理：

1.设置父元素float的值不为none
2.设置父元素overflow的值不为visible
3.display的值为inline-block、table-cell、table-caption
4.position的值为absolute或fixed
可看BFC深入

六、层叠上下文

层叠上下文(stacking context)，是HTML中一个三维的概念。在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

Z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

七、常见页面布局

1 table 布局
2 flex 布局
2.1 盒模型
2.2 display / poistion
2.3 flexbox 布局
3 float 布局
3.1 高度塌陷
3.2 两栏布局
3.3 三栏布局
4 响应式布局
4.1 meta 标签
4.2 使用 rem
4.3 media query
详细代码可查看

八、CSS预处理器、后处理器

1.预处理器
目前最主流的 CSS 预处理器：Sass、Less、Stylus

目标格式为css文件的处理器是css预处理器，就是为生成css文件的特定语言

2.后处理器
后处理器：Autoprefixer
后处理器是对css文件进行加工处理，并输出特定功能（兼容性）的css的处理器，它属于广义上的 CSS 预处理器。
深入了解

九、CSS3新特性

1.animation和transition的相关属性

animation——如需在 CSS3 中创建动画，您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

（1）规定动画的名称
（2）规定动画的时长

实例
把 “myfirst” 动画捆绑到 div 元素，时长：5 秒：
代码参考

transition——CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：

（1）规定您希望把效果添加到哪个 CSS 属性上
（2）规定效果的时长

实例
应用于宽度属性的过渡效果，时长为 2 秒：
代码参考

2.animate和translate

animate.css是一个css框架，animate()是jQuery的方法。

translate是transition的translate() 方法
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
实例

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);		/* IE 9 */
-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
-o-transform: translate(50px,100px);		/* Opera */
-moz-transform: translate(50px,100px);		/* Firefox */
}

值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

十、display哪些取值

display 属性规定元素应该生成的框的类型

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
table	此元素会作为块级表格来显示（类似 table标签），表格前后带有换行符。
inherit	规定应该从父元素继承 display 属性的值。

更多值