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;
}