前端基础---margin，padding，和浮动的影响

一.line-height的补充

1.行高的单位

1.数字+px;

2.数字+em;假如字体大小是16px,n那么2em=2*16px;

3.数字+%,假如字体大小是16px,n那么200%=2*16px;

4.数字,直接是字节的倍数

2.与font-连写

1.写在font下面,  当行高写在font下面的时候,会被覆盖

2.写在font里面,font:style weight size/height family;

3.写在font下面,避免被覆盖

二.margin的两种情况

1.margin的合并现象

上下排序:盒子的margin会合并,取值为较大的那一个

左右排序:不会合并,值为两个盒子的margin值相加

2.margin的塌陷现象

当两个盒子为嵌套关系即父子关系时,只设置子盒子的margin-top时,父盒子也会下移

解决塌陷的5种方法

1.给父盒子添加一个,border-top,四周也可以,只要有top的就可以

2.给父盒子添加一个,padding-top

3.给父盒子增加一个overflow:hidden,处罚BFC

4.给父盒子添加浮动,

5.转化为行内块元素

三.浮动

作用:让原来垂直布局的盒子变成水平布局(一个在左一个在右)最开始应用为图文环绕

代码:

1.左浮动;float:left

2.右浮动;float:right

1.浮动的特点

标准流:浏览器默认摆放盒子的顺序(从上到下,从左到右)

1.浮动的元素会脱离标准流,脱标,  飘起来了,在标准流中不占位置

2.浮动的元素会覆盖在标准流中的元素之上,浮动元素比标准元素高出半个级别 

3.浮动找浮动,不浮动找不浮动

4.浮动的元素只会影响到下面的元素,浮动的元素受到边界的影响

5.浮动的元素有特殊的显示效果,一行显示多个,可以设置宽高

2.清除浮动

浮动带来的影响:相互嵌套的元素,如果相互嵌套的元素,父元素是由子元素撑开的,如果子元素浮动,那么父元素就会没有显示

清除浮动的方法

1.额外标签法,在父元素的最后添加一个块级元素,然后给添加的块级元素添加一个清除浮动的核心代码,clear:both;

2.给父元素设置一个,overflow:hidden;

3.伪元素清除法

伪元素,由css设置的元素::before在...之前  ::after在...之后

代码:

.clear::after{

content:"";

clear:both;

display:block;

下面的为补充代码

height:0px;

line-height:0px;

visibility：hidden:元素隐藏

}

4.简单粗暴,直接设置父元素的高度

 

四.行内元素的margin和padding失效的特殊情况

水平方向:padding和margin是有效果的

垂直方向:padding和margin是没有效果的