前端学习总结--CSS篇（遇到的坑）

一、添加文字之后布局会乱

因为在容器里添加文字之后，inline-block元素的基线由正常流中最后一个linebox的基线决定，所以第一个容器最后一行文本的基线，对其了第二个容器的基线。

二、在设置img图片时，图片默认的display为inline-block，会在容器下方，留一条线：如图

需要将img 设置为display：block，下面那条线才会消失，因为img是行间样式，会有基线对其

1、所以display：block是消除了inline和inline block元素的基线对齐，

2、其实如果img父级中没有文字的话设置font-size：0也能解决；

3、也可以用vertical－align:bottom，一般默认值是baseline。

三、图片之间会有一条缝：

为什么图片中间会有一条缝，因为display：inline-block元素就是有缝隙。

这个其实是回车造成的_(:зゝ∠)_

你把标签写在同一行就没有，分行写就有

inline-block也是这样

display:inline没有缝隙，但是宽高就不能自定义了。

还有一种方法，是在父元素上设置font-size=0

这样就OK，或者对.big_pig img添加float left。

四、在div中高宽使用百分号的坑

如果直接对div使用百分号会无效，因为没有内容撑不起来

需要加一句 body,html{height:100%,width:100%} 两个都要

五、有的时候用top没有用

position:absolute;是相对父元素有position:relative;语句的元素移动；

一般用margin和padding来排版。

Title

#div1{

width:200px;

height:200px;

background-color:red;

}

#div2{

width:100px;

height:100px;

background-color:blue;

top:100px;

position:relative;

}

}

当位置是relative时候，是根据父元素来的，而absolute的时候是根据第一个相对定位的位置来的，这里就是body，则距离父元素的top就不是100.