双Img的字符间距问题:
当两个或以上img放在一起时会出现字符间距问题,是因为两张img换行时的空白字节,浏览器无法识别。
解决方法:
1.把两个img标签写在同一行
2.在两个img外套一个父级元素,把父级元素的font-size设置为0(没有大小)
3.把img图片的display设置为block(块级元素),然后还需要偏移(当然偏移完需要清除浮动)
4.在两个img外套个父级元素,把父级元素的letter-spacing设置为负值,多少都没事。单位:px
浮动后脱离文档流:
当我们使用float之后,会使父级元素脱离文档流,导致父级的背景颜色无法限制,高度不确定,以及排版时出现各种问题。
解决方法:
1.给父级元素设置溢出隐藏: overflow:hidden
2.在父级的伪类上的after上清除:div:after{content:‘’;display:block;clear:both;}
3.在浮动元素后在添加一个div,设置其css样式:clear为both
4.给父级元素设置固定的高。
内联与块状的区别
块级元素可以设置宽高,会自动换行,margin,padding均有效
内联样式不可以设置宽高,会并成一行,margin,padding的上下无效,左右有效。
替换与非替换元素
简单易懂的一句话,替换元素自带固定大小,自带宽高。
例如:img是内联元素但是可以设置宽高。
input是内联元素但是可以设置宽高。等等。
ul,li,h1,h2,h3,h4,h5这些标签带有内置的margin与padding
当我们使用这些标签时,需要先清除他们自带的margin与padding,以免导致计算的误差