1、经典的BFC
BFC 全称为块级格式化上下文 (Block Formatting Context) 。BFC相当于是一个独立的容器，并且这个容器里box的布局与这个容器外的box毫不相干。
1.1 触发BFC的条件
- 根元素或其它包含它的元素
- 浮动元素 (元素的
float不是none) - 绝对定位元素 (元素具有
position为absolute或fixed) - 内联块 (元素具有
display: inline-block) - 表格单元格 (元素具有
display: table-cell，HTML表格单元格默认属性) - 表格标题 (元素具有
display: table-caption, HTML表格标题默认属性) - 具有
overflow且值不是visible的块元素 - 弹性盒（
flex或inline-flex） display: flow-rootcolumn-span: all
1.2 BFC的约束规则
- 内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）
- 处于同一个BFC中的元素相互影响，可能会发生外边距重叠
- 每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
- 计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算
- 浮动盒区域不叠加到BFC上
1.3 BFC可以解决的问题
- 垂直外边距重叠问题
- 去除浮动
- 自适用两列布局（
float+overflow）
2、经典的盒模型
盒模型分为标准（W3C）盒模型和IE盒模型
W3C盒子模型：box-sizing: content-box元素的宽高大小表现为内容的大小。
IE盒子模型：box-sizing: border-box元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。
3、圣杯布局和双飞翼布局
4、padding 和 margin 的区别
本质是作用的对象不同
padding 是作用于自身，填充自身。
而margin是作用于他周围的其他对象
5、vw 和 百分比 有什么区别？
vw：相对于可视区域，与设备有关。
百分比：默认继承父级的宽度
6、css中em和rem的区别
em相对于父元素，rem相对于根元素。
em
- 子元素字体大小的em是相对于父元素字体大小
- 元素的
width/height/padding/margin用em的话是相对于该元素的font-size
rem
rem是全部的长度都相对于根元素，根元素是谁？<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
7、行内元素和块级元素的区别
行内元素
- 不换行
- 不可以设置宽高，
- 行内元素的大小有内容决定
标签有哪些
<a>,<span>,<i>,<img>,
<input>,<button><textarea>,
<strong>,<label>,<q>,<var>,
<em>,<cite>,<code>,<select>,
块级元素
- 独立成行，
- 可以设置宽高，
- 继承父级的宽高
<ul>,<dl>,<table>,
<div>,<p>,<h1>...<h6>,<ol>,
<address>,<blockquote>,<form>
行内块级元素
- 不能独立成行
- 还可设置宽高
<img/>|<input>|<select>|<textarea>|<button>
设置元素的display属性也可控制元素
display取值
- block 块级
- inline 行内
- inline-block 行内块级
8、flex 布局
8.1 快速上下左右居中
.con{
margin: auto
}
body{
display: flex
}
<body>
<div class="con">
<p class="center">flex布局</p>
</div>
</body>
8.2 弹性布局的含义是什么
如上图所示：
con里的三个div按照1：2：1的比例进行设置；
再看css，给这三个div默认设置200px
也就是说这三个div默认占据了200*3=600px的空间
如果con这个div的宽度大于600px的话，假设con的宽度是1000px，那么剩余了400px的空间，这400px的空间按照1:2:1的比例进行分配，所以现在他们三个各自的宽度是300px:400px:300px
8.3 弹性盒子中 flex: 0 1 auto 表示什么意思
三个参数分别对应的是 flex-grow, flex-shrink 和 flex-basis，默认值为 0 1 auto。
-
flex-grow 属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
-
flex-shrink 属性定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
-
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
8.3.1 计算出下列盒子各站多少宽度？
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
flex: 1 2 300px;
background: red;
}
.right {
flex: 2 1 200px;
background: blue;
}
</style>
剩余的空间：600 - (300 + 200) = 100。
子元素的 flex-grow 的值分别为 1，2，
剩余空间用3等分来分 100 / 3 = 33.3333333
所以 left = 300 + 1 * 33.33 = 333.33
right = 200 + 2 * 33.33 = 266.67
再计算一个
子项收缩宽度 = 收缩比例 * 溢出宽度
收缩比例 = (子项宽度 * 子项收缩系数) / 所有子项宽度乘以相应收缩系数之和
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
height: 300px;
display: flex;
}
.left {
flex: 1 2 500px;
background: red;
}
.right {
flex: 2 1 400px;
background: blue;
}
</style>
子项溢出空间的宽度为 500 + 400 - 600 = 300
left 收缩比例：(500 × 2) ÷ (500 × 2 + 400 × 1) ≈ 0.7143
right 收缩比例：(400 × 1) ÷ (500 × 2 + 400 × 1) ≈ 0.2857
对应的：
left 收缩宽度：0.7143 × 300 = 214.29
right 收缩宽度：0.2857 × 300 = 85.71
所以：
left 最终宽度：500 - 214.29 = 285.71
right 最终宽度：400 - 85.71 = 314.29
9、怎么实现0.5px
9.1 采用meta viewport的方式
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
这样子就能缩放到原来的0.5倍，如果是1px那么就会变成0.5px
- 学习什么是Viewport
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，
这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），
用户可以通过平移和缩放来看网页的不同部分。
移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手机浏览器也基本支持。
要记得viewport只针对于移动端，只在移动端上才能看到效果
例如
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
content内容
| 字段名称 | 类型 | 描述 |
|---|---|---|
| width | number/device-width | 控制 viewport 的宽度 |
| height | number/device-width | 控制 viewport 的宽度 |
| initial-scale | device-width | 初始缩放比例，也即是当页面第一次 load 的时候缩放比例 |
| maximum-scale | number | 允许用户缩放到的最大比例 |
| minimum-scale | number | 允许用户缩放到的最小比例 |
| user-scalable | yes/no | 用户是否可以手动缩放 |
三种viewport
（1）layout viewport
如果把移动设备上浏览器的可视区域设为viewport的话，某些网站会因为viewport太窄而显示错乱，所以这些浏览器就默认会把viewport设为一个较宽的值，比如980px，使得即使是那些为PC浏览器设计的网站也能在移动设备浏览器上正常显示。
这个浏览器默认的viewport叫做 layout viewport。
layout viewport的宽度可以通过 document.documentElement.clientWidth来获取。
（2）visual viewport
layout viewport的宽度是大于浏览器可视区域的宽度的，所以还需要一个viewport来代表浏览器可视区域的大小.
这个viewport叫做 visual viewport。
visual viewport的宽度可以通过 document.documentElement.innerWidth来获取。
（3）ideal viewport
ideal viewport是一个能完美适配移动设备的viewport。
首先，不需要缩放和横向滚动条就能正常查看网站的所有内容；其次，显示的文字、图片大小合适，如14px的文字不会因为在一个高密度像素的屏幕里显示得太小而无法看清，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都差不多。
这个viewport叫做 ideal viewport。
ideal viewport并没有一个固定的尺寸，不同的设备有不同的ideal viewport。例如，所有的iphone的ideal viewport宽度都是320px，无论它的屏幕宽度是320还是640。
ideal viewport 的意义在于，无论在何种分辨率的屏幕下，针对ideal viewport 而设计的网站，不需要缩放和横向滚动条都可以完美地呈现给用户。
9.2 采用transform: scale()的方式
transform: scale(0.5,0.5);
10、CSS特性
- 层叠性
- 继承性
- 优先级
10.1 层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式（权重相同的时候，就近原则；权重的时候，选择权重大的）
- 样式不冲突，不会层叠
10.2 继承性
- 继承性是指当子标签没有设置样式时，会继承父标签的样式。
- 恰当的使用继承可以简化代码，降低CSS样式的复杂性
- 子元素可以继承父元素的字体类属性（字体颜色、字体大小之类的）、文本类属性（行高之类的）、背景类属性（背景颜色之类的）（要注意子标签不会继承父标签的宽度、高度、边距属性。）
10.3 优先性
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
优先级由高到低可分为：
| 选择器 | 描述 | 选择器权重 |
|---|---|---|
!important | 在属性后面使用，会覆盖页面内任何位置定义的元素样式 | ∞ 无穷大 |
| 行内样式 | <a style="color:red"> | 1000 |
| id选择器 | #id名称 | 100 |
类选择器（.） = 伪类选择器（：）= 属性选择器（E[name = 'XX']） | .class :first-child p[name='ppp'] | 10 |
元素选择器（p）= 伪元素选择器（::） | p{} ::before | 1 |
通配符选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~） | *{ color:red } | 0 |
| 浏览器自定义的样式 |
注意：
!important表示强制应用该样式，例如：button{ width: 150px !important;}，与以上的选择器相遇时，强制使用此样式- 如果比较后权重相同，那么后者覆盖前者，后渲染的胜出
- CSS选择器的使用，应该尽量避免使用 !important 和内联样式
- id通常也是与class区分开使用，前者多用于JS中的结点定位，后者多用于CSS选择器。
- 重中之重，1000/100/10/1这种权值系数的比较方式只是便于理解，真实情况下10个class并不能逆转1个id
11、css实现一个正三角形/水平垂直居中
<div id="d1"></div>
style：
#d1{
width:0;
height:0;
border-width:50px;
border-style:solid;
border-color:red blue black yellow;
上 右 下 左
}
从上面这个我们发现，其实这个宽高为0的div的每一条边框都是一个三角形，实际操作中我们可能只需要一个三角形，那我们只要把不需要的border隐藏就可以了（用transparent属性）：
比如我要一个向下的三角形：
<div id="d1"></div>
style：
#d1{
width:0;
height:0;
border-width:50px;
border-style:solid;
border-color:red transparent transparent transparent;
上 右 下 左
}
<div id="d1"></div>
style：
#d1{
width:0;
height:0;
border-width:50px;
border-style:solid;
border-top-left-radius: 15px;
opacity: 0.569;//加了透明度
border-color:red transparent transparent red;
}
12、transition和animation的区别？
transition
CSS的transition只有两个状态：开始状态 和 结束状态；有帧的概念CSS的 transition需要借助别的方式来触发，比如CSS的状态选择器（如:hover）或 借助JavaScript来触发。
animation
animation 可能是多个状态，animation可以自动触发。animation 是离不开 @keyframes 的
13、CSS3新特性
13.1 CSS 选择器 「基本选择器、属性选择器、伪类选择器」
基本选择器
基本选择器有九种。其中最常用的元素选择器、类选择器、ID选择器、后代选择器、群组选择器。
（1）通配符选择器（＊）
通配符选择器是用来选择所有元素，也可以选择某个元素下的所有元素。 所有浏览器支持通配符选择器。
*{
marigin: 0;
padding: 0;
}
.demo * {border:1px solid blue;}
（2）元素选择器(E)
元素选择器其实就是文档的元素，如html,body,p,div等等。 所有浏览器支持元素选择器(E)。
li {background-color: grey;color: orange;}
（3）类选择器（.className）
所有浏览器支持。
（4）id选择器（#ID）
所有浏览器支持。
（5）后代选择器（Ｅ Ｆ）
可以选择某元素的==所有后代元素== E为祖先元素，Ｆ为后代元素，Ｆ不管是E元素的子元素或者是孙元素或者是更深层次的关系，都将被选中。 所有浏览器支持。
（6）子元素选择器(E>F)
只能选择某元素的子元素，其中E为父元素，而F为子元素，子元素选择器Ｅ > F，其中Ｆ==仅仅==是Ｅ的子元素而以。 IE6不支持子元素选择器。
（7）相邻兄弟元素选择器(E + F)
EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻。 IE6不支持子元素选择器。
（8）通用兄弟选择器（Ｅ 〜 Ｆ）
选择某元素后面的所有兄弟元素。 IE6不支持子元素选择器。
.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}
（9）群组选择器（selector1,selector2,...,selectorN）
群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开。
.first, .last {background: green;color: yellow; border: 1px solid #ccc;}
13.2 CSS3边框与圆角
CSS3圆角 border-radius
盒阴影 box-shadow
边框图像 border-image
13.3 CSS3背景与渐变
CSS3背景
background-image：设置一个元素的背景图像。
background-origin：规定 background-position 属性相对于什么位置来定位。
background-clip：规定背景的绘制区域。
CSS3渐变
定义：可以在两个或者多个指定颜色之间显示平移的过渡
linear-gradient()：线性渐变。
radial-gradient()：径向渐变。
13.4 CSS3过渡
定义：允许css的属性值在一定时间区间内平滑的过渡，在鼠标点击，鼠标滑过或对元素任何改变中触发，并圆滑地以动画形式改变css的属性值。
transition：设置元素当过渡效果，四个简写属性为：
transition-property：过渡属性名。
transition-duration：规定完成过渡效果需要花费的时间（以秒或毫秒计）。
transition-timing-function：指定切换效果的速度。
transition-delay：指定何时将开始切换效果。
13.5 CSS3变换
transform：应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
13.6 CSS3动画
定义：使元素从一种样式逐渐变化到另外一种样式的效果。
animation：为元素添加动画，是一个简写属性。
animation-name：为 @keyframes 动画名称。
animation-duration：动画指定需要多少秒或毫秒完成。
animation-timing-function：设置动画将如何完成一个周期
14、css 中的 position 有哪些属性
| position的属性值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| sticky | 粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
| initial | 设置该属性为默认值，详情查看 CSS initial 关键字。 |
15、CSS z-index 属性
z-index 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注意： z-index 进行定位元素(要搭配position:absolute, position:relative, or position:fixed)。
