H5+CSS写网页时遇到的一些坑(1)

1.英文换行问题，其实只是个英文单词的问题，需要在测试网页的时候留心一下

我们想要这样的效果，嗯，看起来很不错

结果把图片设置好了之后(float，大小什么的)，兴高采烈的F5了一下，以为达到了预期效果，结果是这样的……

wtf，这和说好的不一样啊，然后我就开始debug了一晚上，从div嵌套检查到所有相关的CSS，结果还是找不出答案。

最后无意之中用一串中文代替了XXXXXX…………，结果成这样了:

？？？？？？一头雾水的我开始在网上找相关的资料……

结果发现了一个很重要的点：

CSS中添加word-break:break-all;即可使无法自动换行的一串字母自动换行，因为字母不会自动换行。

好吧，这个坑，记住了……

 

2.ul去掉前面的点点，这是我们经常遇到的一个问题，给出关键CSS属性：

ul{ list-style: none;}，以及若要横向显示ul，只需把li浮动起来(float:left;)即可

 

3.很关键的一个点：我们都知道在CSS中布局是个非常非常重要的东西，所以我把今日踩过的坑罗列如下：

1.position:absolute的绝对定位是相对于其最近的一个position属性不为static的父元素。

2.position:fixed是绝对定位中的绝对定位，即相对于body进行绝对定位，常见用于广告的悬浮以及一定要悬浮显示的某些内容（小黄网？） 

3.position:relative不影响其他元素，即在其他元素眼中你并没有出轨，但是其实你已经出轨……了…… 

4.默认网页流布局从上到下从左到右

下面举个栗子，直接搞定这些点：

div1 div2 div3 进入文档流布局，div2(relative)进行相对布局

div2-1和div2-2位于div2下

其中div2-1(absolute)相对于其最近的一个position属性不为static的父元素进行绝对定位，即div2

div2-2(fixed)相对于body进行绝对定位

效果图：

 

over~