CSS零碎知识点
- （1）如何理解HTML语义化？
合理使用各种标签，不要div一把梭，点击这里跳转我另一篇帖子查看。
- （2）行内元素，块级元素，内联元素及其特点
块级：block，table。独占一行
行内：inline，尽可能的挤在一起，设置宽度，高度无效
内联： inline-block，对外和其他元素都在一行上，对内的元素是独占一行，元素的高度、宽度、行高以及顶和底边距都可设置。
position:absolute和float:left/right具有块状化，元素absolute或者float之后就可以设置元素的width 和 height 了，且默认宽度不占满父元素。
- （3）%单位到底是那个的%
一般来说就是相对于父元素
1、对于普通定位元素就是我们理解的父元素，例如
height的%：基于包含它的块级对象的百分比高度。
line-height的%：基于当前字体尺寸的百分比行间距。
width的%：定义基于包含块（父元素）宽度的百分比宽度。
height的%：基于包含它的块级对象的百分比高度
margin的%：是基于父元素的宽度来计算的，如果父元素有宽度，相对于父元素宽度，如果没有，找其父辈元素的宽度，均没设宽度时，相对于屏幕的宽度。
padding的%：是基于父元素的宽度来计算的，如果父元素有宽度，相对于父元素宽度，如果没有，找其父辈元素的宽度，均没设宽度时，相对于屏幕的宽度。
2、对于position: absolute;的元素是相对于已定位的父元素
3、对于position: fixed;的元素是相对于ViewPort（可视窗口）
- （4）margin的负值是什么意思？
margin-top和margin-left负值：元素自身向上，向左移动
margin-bottom和margin-right负值：自身不受影响，下面，右边的元素分别向上或者向左移动
- （5）对BFC的理解
BFC（block format content）块级格式化上下文
也就是一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
如何产生：
float不是none
position是absolute或者fixed
display是flex，inline-flex，inline-block，table-cell，table-caption
overflow不是visible
根元素
- （6）清除浮动的方式
父盒子设置高度
.parent{
height: 200px;
}
添加额外标签 用clear：both
<div class="parent" >
<div class="left" style="float:left"></div>
<div class="right style="float:right""></div>
<div style="clear: both;"></div>
</div>
使用br标签和它的属性
<div class="wrap" >
<div class="left" style="float:left"></div>
<div class="right style="float:right""></div>
<br clear="both" />
</div>
父元素设置overflow:hidden
.parent{
border: 4px solid red;
overflow: hidden;
zoom: 1;
}
使用:after伪元素
.clearfix{
*zoom: 1;
}
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}