CSS布局杂记

学习CSS因为还没有仔细读完基本CSS的书，任务之下只能摸着石头过河了~

记下一些不懂的问题，一起共勉：

1、background-image的url问题

D:\main\images\special.gif

是需要调用的图片

我的主页放在main文件夹下

而我的CSS在D:\main\CSS文件夹下

在CSS文件调用special.gif用了“background-image: url(/images/special.jpg); ”总是显示没有图像

按理说CSS是调用进主页内的，路径是对的啊，后来加了“..”后变成了“background-image: url(../images/special.jpg); ”就没有了问题，还是路径出错了。

翻查档案，原来CSS与JS不一样，一个是使用<link>而另外一个是<script>

CSS是链接进来的，所以调用起始的位置应该以CSS文件位置为准

JS则是在主页被读进内存时候一起读入的，所以路径跟主页路径一致

小补一下：

“../”表示上一级目录 
“./”表示当前同级目录 (记得不要直接写成"/")
“/”表示网站根目录

值	描述	css
background-color	规定要使用的背景颜色。	1
background-position	规定背景图像的位置。	1
background-size	规定背景图片的尺寸。	3
background-repeat	规定如何重复背景图像。	1
background-origin	规定背景图片的定位区域。	3
background-clip	规定背景的绘制区域。	3
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	规定要使用的背景图像。	1
inherit	规定应该从父元素继承 background 属性的设置。	1

2、一直以来的疑问：为啥要创作div和span有啥区别

        html的div和span, 经常会用到， 尤其是前者。

        1. div是块级元素， 实际上就是一个区域， 主要用于容纳其他标签。 默认的display属性是block

        2. span是行内元素， 主要用于容纳文字。 默认的display属性是inline

        div也可以变为span (display:inline),这样div将变为行内元素
span也可以变为div(display:block),这样span将变为块级元素，默认占一行，而且可以设置宽高
同时，两者要想实现既可以设置宽高，边距，又可以不占一行，则display:inline-block

   我们使用元素的时候，主要还是看方便性，提高我们文档的可读性，不是吗？

3、 CSS多行文字垂直居中的两种方法

之前写过一篇关于：CSS左右居中对齐的文章，里面提到的两种方法其实也可以引申为垂直居中对齐。写这篇文章是因为要兼容IE6、IE7的问题，我们都知道一行文字时可以通过line-height来设置垂直居中，如果是多行这个肯定不行，而我的同事因为这个用了js来实现居中对齐，我觉得这是很难理解的。故而整理这篇文章。

HTML代码：

<div class="middle-box">
	<div class="middle-inner">
		<p><span class="suc-tip">前端开发博客，专注前端开发和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
		<p style="display:none;"><span class="suc-tip">5年的老博客，一直致力于WEB开发</span></p>
	</div>
</div>

第一种：display:table的方法

.middle-box{display: table; height: 300px;}
.middle-inner{display: table-cell; vertical-align:middle; text-align:center;}

缺点就是不兼容ie6、ie7.怎么兼容呢？

当然是用另外一种相对定位和绝对定位的方式。

<!--[if lt IE 8]>
<style>
.middle-inner { position: absolute; top:50%;}
.middle-inner p {position: relative; top: -50%}
</style>
<![endif]-->

可以使用IE的特有的条件语法，不过我习惯用ie hack来写。下面这个的代码实现了水平垂直多行代码（支持一行）居中对齐。目前测试IE、chrome和Firefox均兼容。代码如下：

.middle-box{display: table; height: 300px; border:1px solid #ff0000; width:400px; margin:0 auto; position:relative;}
.middle-inner{display: table-cell; vertical-align:middle; *position:absolute; *top:50%; *left:50%; width:100%; text-align:center;}
.middle-inner p{position:relative; *top:-50%; *left:-50%;}

以后遇到居中问题，这三句CSS就够用了。更多的css3 flexbox、margin负值等兼容性还需要探讨。

演示

更新于9.24

第二种方法：增加一个空白标签

HTML代码：

<div class="middle-box">
<p><span class="suc-tip">前端开发博客，专注前端开发和web教程</span><br/><span class="suc-link">快捷入口：<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<i class="visible"></i>
<p style="display:none;"><span class="suc-tip">5年的老博客，一直致力于WEB开发</span></p>
</div>

CSS代码：

.middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-align: center; }
.middle-box p{vertical-align: middle; display: inline-block; *display: inline; *zoom: 1;}
.visible{height: 100%; vertical-align: middle; width: 0; display: inline-block;}

4、对不同浏览器如何置入空格而格式一致

使用（&nbsp；）空格浏览器之间，显示的不一样，对不起等现象。

解决方案：

用半角空格&ensp；或者全角空格&emsp；就可以了，&ensp；相当于半格中文字符的宽度，&emsp；相当于一个中文字符宽度。

扩展：

&nbsp； 
它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。

&ensp； 
它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

&emsp； 
它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

&thinsp； 
它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。

&zwnj； 
它叫零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： ‌

&zwj； 
它叫零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ‍ ‍）。

5、使用CSS产生文字环绕效果

      1）代码部分      

   <style>
        .img-left {
            border: 3px solid #005588;
            width:300px;
        }
        .img-left img {
            float:left;  /* 对图片进行浮动就可以实现了  */
            width:150px;
        }
    </style>
   
   <div class="img-left">
        <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="pic"/>
        这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文
        <div style="clear:both;"></div>
    </div>

      2）效果图

       

         很容易就出来想要的效果了。最关键的代码：对图片进行左浮动就可以了，这不是挺简单的嘛。     

二、遇到的问题

       当把中间的文字替换成连续的英文字母时，出现问题了，如图

      

       于是查找相关资料，测试结果后发现：

浏览器默认解析英文或者数字时，是按照单词进行解析。

也就是说，每个单词是一个整体，遇到空间不足时，不会对单词进行拆分。

所以才会出现上面这种情况。

      上个对比图

      

三、解决方法

      思考：CSS里面有没有相关的属性，可以对文字进行强制换行呢？

              答案当然是有的：word-break: break-all;

      这样就可以解决问题了。

      

 

四、后记：word-wrap、word-break

      在查找资料的时候，发现还有个属性：word-wrap：break-word;  这咋还出现重复属性了呢？

     其实不然，又是一通查找资料，发现这俩还是有区别的：

     1) word-wrap : break-word ;

         --允许长单词换行到下一行。

         当一个单词长度超过div的宽度时，默认是不会换行的：如下图

         

         如果设置word-wrap : break-word;  这个单词就会进行换行显示

         

      2）word-break : break-all;

          -- 是否对单词进行断词处理。

          --个人理解就是： 它会把一个单词的每个字母拆分成独立的单元，

            这样就可以把它填充到每个地方，所以才能达到文字环绕图片的效果。

原文：https://www.cnblogs.com/lanleiming/p/5434314.html

6、