H5C3相关知识点小结（二）（自用）
一、BFC
块格式化上下文（Block Formatting Context，BFC）是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
1、BFC的特性
- BFC 可以看作一个独立的容器，容器内部的元素不会影响区块外部的元素布局
- BFC 里面的元素从左到右，从上到下依次排列
- 同一个 BFC，相邻的元素 margin 会发生重叠
- BFC 里面如果有 float 元素，也可以撑开，避免高度坍塌
2、如何创建BFC
- float 的属性值不为 none
- position 的属性值为 absolute 或者 fixed
- overflow 的属性值不为 visible
- display 的属性值为 flex ，inline-block，grid等
二、解决高度坍塌的问题
什么是高度坍塌，就是父元素的子元素脱离了文档流，且它本身也没设置高度，那么它的高度就会为零。
- 创建BFC；
- 新增一个空div元素或者伪元素，设置清除浮动，clear: both。
三、 visibility: hidden、display: none和opacity: 0 有什么区别
1、是否占据空间
- display: none，隐藏后不占位置
- visibility: hidden、opacity: 0，隐藏后任然占据位置
2、子元素是否继承
- display: none ： 不会被子元素继承，父元素都不存在了，子元素也不会显示出来
- visibility: hidden ： 会被子元素继承，通过设置子元素visibility: visible来显示子元素
- opacity: 0 ： 会被子元素继承，但是不能设置子元素opacity: 0来重新显示
3、事件绑定
- display: none ： 元素都已经不在页面存在了，因此无法触发它绑定的事件
- visibility: hidden ： 不会触发它上面绑定的事件
- opacity: 0 ： 元素上绑定的事件是可以触发的
4、过渡动画
- transition对于display是无效的
- transition对于visibility是无效的
- transition对于opacity是无效的
四、css中哪些属性可以继承
- 字体相关，常见的有：font，font-size，font-family，font-weight 等等
- 文本相关，常见的有：line-height，color，text-align
- visibility: visible
- 列表：list-style
- 鼠标属性：cursor
五、块级元素、行内元素和行内块元素的区别
块级元素 ：自动占据一行，可以设置宽高
常见的有 div，``p，h1-h6，ul，li，form，table
行内元素 ：占据一行的一小部分，多个行内元素水平排版，无法设置宽高
常见的有 span ，img，a
行内块级元素 ：跟行内元素类似，不过可以设置宽高
常见的有 button，img， input，``select，``label，textarea
六、伪元素和伪类的区别
伪元素 ：对选择元素的指定部分进行修改样式
常见的有 :before，:after，:first-line，first-letter 等等
伪类 ：对选择元素的特殊状态进行修改样式
常见的有 :hover，:active，:checked，:focus，:first-child 等等
七、如何解决margin重叠问题
margin 重叠发生在相邻的两个块级元素，当设置 margin 的时候，会以重叠到一起，例如下面代码
<div>
<div className="div"></div>
<div className="div"></div>
</div>
.div {
margin: 20px 0;
background-color: #83bbff;
}下面的运行结果可以看出，两个 div 的间隔是 20px 而不是 40px
解决办法就是在不想要合并的元素创建一个 BFC，在第一个元素新建一个空元素，配置 overflow: hidden
<div>
<div className="parent">
<div className="div"></div>
</div>
<div className="div"></div>
</div>
.parent {
overflow: hidden;
}
.div {
margin: 20px 0;
background-color: #83bbff;
}
八、画一条0.5px的横线
div{
border-bottom: 1px solid black;
transform: scaleY(0.5);
}九、三列布局中间自适应
1、两侧左右浮动，中间设左右margin
<style>
*{
margin: 0;
padding: 0;
}
#container{
width: 100px;
height: 50px;
}
#left{
float: left;
width:10px;
background: #CC0099;
height: 100%;
}
#center{
margin: 0 15px 0 10px;
background: #5555ff;
height: 100%;
}
#right{
float: right;
width: 15px;
background: #CCFF00;
height: 100%;
}
</style>2、两侧绝对定位，中间设左右margin
<style>
*{
margin: 0;
padding: 0;
}
#container{
width: 100px;
height: 50px;
position: relative;
}
#left{
position: absolute;
left: 0;
top: 0;
width:10px;
background: #CC0099;
height: 100%;
}
#center{
margin: 0 15px 0 10px;
background: #5555ff;
height: 100%;
}
#right{
position: absolute;
right: 0;
top: 0;
width: 15px;
background: #CCFF00;
height: 100%;
}
</style>3、flex
<style>
*{
margin: 0;
padding: 0;
}
#container{
width: 100px;
height: 50px;
display: flex;
flex-direction: row;
}
#left{
width:10px;
background: #CC0099;
height: 100%;
}
#center{
flex: 1;
background: #5555ff;
height: 100%;
}
#right{
width: 15px;
background: #CCFF00;
height: 100%;
}
</style>4、calc函数
<style>
*{
margin: 0;
padding: 0;
}
#container{
width: 100px;
height: 50px;
font-size: 0;// 消除子元素inline-block横向间距
}
#left,#center,#right{
display: inline-block;
height: 100%;
}
#left{
width:10px;
background: #CC0099;
}
#center{
width: calc(100% - 10px - 15px);
background: #5555ff;
}
#right{
width: 15px;
background: #CCFF00;
}
</style>十、css垂直居中
1、margin:auto 法
<style>
.parent{
width:100px;
height:50px;
position:relative;
}
.child{
position:absolute;
margin: 0 auto;
}
</style>2、margin 负值法
<style>
.parent{
width:100px;
height:50px;
position:relative;
}
.child{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>3、flex
<style>
.parent{
width:100px;
height:50px;
display:flex;
}
.child{
position:absolute;
justify-content:center;
align-items:center;
}
</style>十一、transform、transition、animation
1、transform：描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行 旋转rotate、扭 曲skew、缩放scale和移动translate以及矩阵变形matrix。
2、transition样式过渡，从一种效果逐渐改变为另一种效果
transition:transition-property transition-duration transition-timing-function transition-delay
从左到右分别是：css属性、过渡效果花费时间、速度曲线、过渡开始的延迟时间
3、animation动画 由@keyframes来描述每一帧的样式
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态
4、区别
- transform仅描述元素的静态样式，常常配合transition和animation使用
- transition通常和hover等事件配合使用，animation是自发的，立即播放
- animation可设置循环次数
- animation可设置每一帧的样式和时间，transition只能设置头尾
- transition可与js配合使用，js设定要变化的样式，transition负责动画效果
十二、animation制作滚动小球
<head>
<style>
@keyframes run {
0% {
transform: translate(0, 0) rotate(0deg);
}
100% {
transform: translate(400px, 0) rotate(360deg);
}
}
div {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
background-color: pink;
border-radius: 50%;
animation: run 10s infinite;
}
</style>
</head>
<body>
<div>0</div>
</body>十三、回流和重绘
1、回流/重排 ：当涉及到dom节点的布局属性发生变化时，就会重新计算该属性，浏览器会重新描 绘相应的元素
重绘 ：当影响dom元素可见性的属性发生变化如颜色时，浏览器会重新描绘相关的元素
回流肯定会导致重绘，重绘不一定会导致回流，比如颜色改变
2、引起重排重绘的原因有：
- 添加或者删除可见的DOM元素
- 元素尺寸位置的改变
- 浏览器页面初始化
- 浏览器窗口大小发生改变
十四、img标签alt和title的区别
alt ：在图片加载失败时，会显示alt的内容
title ：在鼠标移动到屏幕上时，会显示title的内容
十五、html垂直居中
1、水平居中
- 行内元素: text-align: center
- 块级元素: margin: 0 auto
- position:absolute +left:50%+ transform:translateX(-50%)
- display:flex + justify-content: center
2、垂直居中
- line-height: height
- position:absolute + top:50% + transform:translateY(-50%)
- display:flex + align-items: center
十六、link标签和import标签的区别
- link属于html标签，而@import是css提供的
- 页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载
- link是html标签，因此没有兼容性，而@import只有IE5以上才能识别
- link方式样式的权重高于@import的。
十七、单行和多行省略
1、单行省略
div{
width:300px;
overflow: hidden;
text-overflow:ellipsis;
whitewhite-space: nowrap;
}2、多行省略
div{
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}十八、css画一个三角箭头
.a{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg); // 顺时针旋转90°
}十九、清除浮动
1、使用clear: both清除浮动
在浮动元素后面放一个空的div标签，div设置样式clear:both来清除浮动。它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护。
2、利用伪元素after来清除浮动
.clearfix:after{
content: "";
display: block;
visibility: hidden;
clear: both;
}3、使用overflow属性
当给父元素设置了overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了，它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果