一.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是没有效果的