★ CSS哪些属性可以被继承
inherit initial
css 的继承很简单，分为默认继承的和默认不继承的，
默认继承的属性：取父元素的同属性的计算值，可以通过设置 inherit 实现继承。
默认不继承的属性：取属性的初始值，可以通过设置 initial 实现继承。
默认继承的 ("Inherited: Yes") 的属性：
- 所有元素默认继承：visibility、cursor
- 文本属性默认继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text-indent、text-align、text-shadow、text-transform、direction
- 列表元素默认继承：list-style、list-style-type、list-style-position、list-style-image
- 表格元素默认继承：border-collapse
默认不继承的("Inherited: No") 的属性：
- 所有元素默认不继承：all、display、overflow、contain
- 文本属性默认不继承：vertical-align、text-decoration、text-overflow
- 盒子属性默认不继承：width、height、padding、margin、border、min-width、min-height、max-width、max-height
- 背景属性默认不继承：background、background-color、background-image、background-repeat、background-position、background-attachment
- 定位属性默认不继承：float、clear、position、top、right、bottom、left、z-index
- 内容属性默认不继承：content、counter-reset、counter-increment
- 轮廓属性默认不继承：outline-style、outline-width、outline-color、outline
- 页面属性默认不继承：size、page-break-before、page-break-after
- 声音属性默认不继承：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during
可以看到涉及到文本相关的属性，绝大部分都是默认继承的，毕竟 css 设计之初就是为了更好的在网页上呈现文字。
四个通用属性值
-
inherit：会使子元素属性和父元素相同。“开启继承”。
-
initial：将属性的初始值，就是重置为css的默认值（不是浏览器定义的样式表中的样式）。
-
unset：将属性重置为自然值，也就是如果属性是自然继承的那么就是
inherit，否则和initial一样。 -
revert：表示使用样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按此设置；否则，按照浏览器定义样式表中的样式设置；否则，等价于 unset 。（属性值
revert目前最新版的主流浏览器支持）
all
css3 增加了 all 属性，其值可以是上面四个之一，表示重置元素所有属性的值重置为其初始值，或继承值。
当笔者将 div元素设置了 all: unset 之后，奇怪的事情发生了，此时 div 的 display 计算值竟然变成了 inline~~ （demo）后来查询 MDN 才发现原来 display 的初始值竟然是 inline ，在 chrome 浏览器是可以看到，div/p/h2 等标签的初始值是被浏览器厂商的用户代理样式重置了的。
user agent stylesheet是浏览器默认样式表，是浏览器默认样式。
let div = document.getElementsByTagName('div')[0]
let display = getComputedStyle(div).display;
console.log('display=',display) // display=inline
★ 如何实现一个元素的水平垂直居中
1. 使用 position 与 transform 结合【css2】
父
position：relatvive
子
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
2. 使用 position 定位和 偏移 属性【css2】
父
position：relatvive
子
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
3. table-cell【css2】
父
display: table-cell;
vertical-align: middle; // 垂直水平居中
子
margin: 0 auto; // 水平方向居中
4. flex布局【css3】
父
display: flex;
justify-content: center;
align-items: center;
5. grid布局【css3】
父
display: grid;
justify-content: center;
align-content: center;
★ grid
1：概述
2：基本概念
3：容器属性
4：项目属性
★ flex
1：概念
2：父元素容器属性
3：项目属性
★ grid和flex区别
1. flex 中align-content和align-items和align-self有什么区别
align-items【父元素属性】 交叉轴上如何对齐。 align排列 使....对齐，所以是交叉轴上对齐
align-content【父元素属性】 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-self【子元素属性】 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性的对齐方式。
2. flex 中justify-content和justify-items有什么区别
flex 只有justify-content 没有justify-items
3. grid 中align-items和align-content有什么区别
align-items 是单元格在垂直位置 align-content 是 内容在容器也是单元格的垂直位置
4. grid 中justify-items和justify-content有什么区别？
justify-items 是 单元格在水平位置【单元格水平方向的布局】
justify-content 是内容在容器里面的水平位置【内容在单元格里面的布局，内容跟单元格是有间隙的，这个里面的布局】
5. grid 中justify/align-items和justify/align-content的属性值分别是什么
justify/align-items 4个 start、 end、 center、 stretch拉伸
justify/align-content 7个 start、 end、 center、 stretch、 space-around、 space-between、 space-evenly间隔相等
★ css div 垂直水平居中，并完成 div 高度永远是宽度的一半（宽度可以不指定）
div 高度永远是宽度的一半的重要实现方式是：
padding-bottom: 50%;
★ CSS 的权重和优先级
★ CSS 怎么画一个大小为父元素宽度一半的正方形？
.inner {
width: 50%;
padding-bottom: 50%;
background: blue;
}
padding-bottom: 50%; 就是宽度的一半，因为padding多少是 50%是按照宽度算的，因为没有高度，所以25%就是高度是宽度的25%，以此类对，一个小知识点；
★ CSS实现自适应正方形、等宽高比矩形
1. 双重嵌套，外层 relative，内层 absolute
.outer {
padding-top: 50%;// padding-botton: 50%; 效果一致，目的是让高度为宽度的50%
height: 0;
background: #ccc;
width: 50%; // 目的是让宽度缩小50%
position: relative;
}
.inner {
// 改变定位 到父元素位置
position: absolute;
top: 0;
left: 0;
// 与父元素宽度高度一致
width: 100%;
height: 100%;
background: blue;
}
<div class="outer">
<div class="inner">hello</div>
</div>
2. padding 撑高画正方形
.outer {
width: 400px;
height: 600px;
background: blue;
}
.inner {
width: 100%; //宽度跟父元素保持一致
height: 0;
padding-bottom: 100%; // 高度不固定，padding填充跟宽度一致
background: red;
}
<div class="outer">
<div class="inner">hello</div>
</div>
★ 实现两栏布局的方式：
1.float+margin/padding
2.flex
3.BFC: 左 float 右BFC 【参考下面BFC会与float元素...】
★ 实现三列布局的方式【圣杯布局和双飞翼布局】
1. 左右固定定位 absolute top right left 中间 margin-left: 200px; margin-right: 200px;
2. 左 左浮动 右 右浮动 中间 margin左右
3. 圣杯布局和双飞翼布局www.cnblogs.com/jiguiyan/p/…
3.1作用：
圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
3.2区别
圣杯布局：为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局：为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该div里用margin-left和margin-right为左右两栏div留出位置。
3.3 圣杯布局
缺点：圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图：当middle部分的宽小于left部分时就会发生布局混乱。（middle<left即会变形）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>圣杯布局</title>
<style>
#bd{
padding: 0 200px 0 180px;
height: 100px;
}
#middle{
float: left;
width: 100%;
height: 500px;
background:blue;
}
#left{
float:left;
width:180px;
height:500px;
margin-left:-100%;
background: #0c9;
position: relative;
left: -180px;
}
#right{
float: left;
width: 200px;
height: 500px;
margin-left: -200px;
background: #0c9;
position: relative;
right: -200px;
}
</style>
</head>
<body>
<div id="bd">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
</body>
</html>
3.4 双飞翼布局
优点：不会像圣杯布局那样变形
缺点是：多加了一层dom节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
#center{
float:left;
width:100%;/*左栏上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
}
/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/
#inside{
margin:0 200px 0 180px;
height:100px;
}
</style>
</head>
<body>
<div id="center">
<div id="inside">middle</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</body>
</html>
4. flex 左右定宽 中间flex:1 撑开
★ CSS 动画有哪些？
animation、transition、transform、translate 这几个属性要搞清楚：
-
animation：用于设置动画属性，他是一个简写的属性，包含6个属性
-
transition：用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同
-
transform：用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系
-
translate：translate只是transform的一个属性值，即移动，除此之外还有 scale 等
★ visibility 和 display 的差别
-
visibility 设置 hidden 会隐藏元素，在文档流，触发重绘
-
display 设置了 none 属性会隐藏元素，不在文档流，所以会触发回流和重绘
-
opacity 会将元素设置为透明，在文档流中，不会被删除，所以会触发重绘
★ opacity 可以有过渡效果嘛？
可以设置过渡效果
常用来于：hover一起使用
<style>
.love{
background: url(1.jpg) no-repeat;
border: 300px;
height: 300px;
color: red;
opacity: 1;
position: relative;
}
.yes{
opacity: 0;
position: relative;
top: 100px;
left: 110px;
width: 200px;
height: 100px;
}
.love:hover .yes{
opacity: 1;
transition: 2s;
}
</style>
<div class="love">
<div class="yes">佐助和鸣人才是真爱！！</div>
</div>
★ 到底什么是 BFC、IFC、GFC 和 FFC
BFC(Block Formatting Contexts)直译为"块级格式化上下文"
IFC(Inline Formatting Contexts)直译为"内联格式化上下文"
GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"
FFC(Flex Formatting Contexts)直译为"自适应格式化上下文"
★ BFC原理
常见的定位方案-3种？BFC的英文全称和中文全称？触发BFC的规则？BFC的应用？
1. 常见定位方案
- 普通流 (normal flow)【行内、块级】BFC属于普通流
- 浮动 (float)
- 绝对定位 (absolute positioning)
2. BFC 概念
Block Formatting Contexts 块级格式化上下文；形成独立渲染区域；内部元素的渲染不会影响外界
Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
3. 触发 BFC
只要元素满足下面任一条件即可触发 BFC 特性：
-
- body 根元素
-
- 浮动元素：float 除 none 以外的值
-
- 绝对定位元素：position (absolute、fixed)
-
- display 为 inline-block、table-cells、flex
-
- 块级元素 overflow 不是 visible (hidden、auto、scroll)
4. BFC 特性及应用【主要就是清除浮动】
BFC形成一个独立的渲染区域，让BFC里面的元素，有高度了，清除浮动解决高度塌陷
-
- 避免外边距重叠，解决margin重叠的话也得再外层包裹一个BFC的父元素
-
- BFC 可以包含浮动的元素 [清除浮动]，就是浮动外面的父元素就有高度了
-
- BFC 可以阻止元素被浮动元素覆盖，再不是浮动的元素，设置成BFC就不会被浮动元素干扰了
-
- 在BFC中，内部的box会在垂直方向，一个接一个地放置
-
- 计算BFC高度时，浮动元素也参与计算，原本浮动元素应该是脱离文档流的
-
- BFC 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素
★ BFC会与float元素相互覆盖吗？为什么？举例说明
不会，因为 BFC 是页面中一个独立的隔离容器，其内部的元素不会与外部的元素相互影响，比如两个 div，上面的 div 设置了 float，那么如果下面的元素不是 BFC，也没有设置 float，会形成对上面的元素进行包裹内容的情况，如果设置了下面元素为 overflow：hidden；属性那么就能够实现经典的两列布局，左边内容固定宽度，右边因为是 BFC 所以会进行自适应。
【参考 BFC原理链接里面的第四点应用里面的BFC 可以阻止元素被浮动元素覆盖】
先来看一个文字环绕效果：这时候其实第二个元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖)
<div style="height: 100px;width: 100px;float: left;background: lightblue">
我是一个左浮动的元素
</div>
<div style="width: 200px; height: 200px;background: #eee">
我是一个没有设置浮动, 也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;
</div>
如果想避免元素被覆盖，可触触发第二个元素的 BFC 特性，加入 overflow: hidden，就会变成如下样式：
这个方法可以用来实现两列自适应布局，左边的宽度固定，右边自适应宽度【去掉宽度】
<div style="height: 100px;width: 100px;float: left;background: lightblue">
我是一个左浮动的元素
</div>
<div style="width: 200px; height: 200px;background: #eee; overflow: hidden">
我是一个没有设置浮动, 也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;
</div>
★ CSS盒模型
盒模型本质上是一个盒子
包括外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性
标准盒子模型：宽度=内容的宽度（content）+ border + padding
低版本IE盒子模型：宽度=内容宽度（content+border+padding）【box-sizing: border-box;】
★ 说一下你知道的position属性，都有啥特点？
static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
sticky：具体是类似 relative 和 fixed，在 viewport 视口滚动到阈值之前应用 relative，滚动到阈值之后应用 fixed 布局，由 top 决定。
★ 两个div上下排列，都设margin，有什么现象？
- 都正取大
- 一正一负相加
- 同负取绝对值最大的
问：为什么会有这种现象？你能解释一下吗
是由块级格式上下文BFC决定的，元素在 BFC 中会进行上下排列，然后垂直距离由 margin 决定，并且会发生重叠，具体表现为1.同正取最大的 2.同负取绝对值最大的 3.一正一负相加
★ 清除浮动有哪些方法？
不清除浮动会发生高度塌陷：（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）
- clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式：{clear:both;height:0;overflow:hidden;}
- 给浮动元素父级设置高度
- 父级同时浮动（需要给父级同级元素添加浮动）
- 父级设置成inline-block，其margin: 0 auto居中方式失效
- 给父级添加overflow:hidden 清除浮动方法
- 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）
.float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}
