CSS样式

葵花宝典：

【1】相邻的2个margin值会叠加在一起。

【2】子元素设定的margin值会影响父元素。

          在标准浏览器下（firefox，chrome，opera，safari）会有问题。ie下一般表现良好。

　　  原因是：一个盒子如果没有上补白（padding-top）和上边框（border-top）那么这个盒子的上边距会和其内部文档流中的第一个元素的上边距重叠。 以上参考http://blog.csdn.net/u012011360/article/details/41823125

          因此用margin时需要注意，可以利用padding来避免。

 

独孤九剑：

1、css常用样式

#box1 {
            width: 350px;
            height: 350px;
            background: #fff;
            border: 1px solid #000;
            font-size: 14px;
            color: red;
            font-weight: bold;
            font-family: "microsoft yahei";
            font-style: italic;
            /* 首行缩进：1em = 一个文字大小 */
            text-indent: 1em;
            text-align: left;
            /* 文字修饰 through-line(删除线)、overline(上划线)、underline(下划线)、none */
            text-decoration: underline;
            /* 词间距 */
            word-spacing: 6px;
            /* 字母间距 */
            letter-spacing: 5px;
        }

 

2、word-wrap,word-break,white-space的区别

2.1 word-break

normal: 使用浏览器默认的换行规则。

break-all: 允许单词内换行。

keep-all: 只能在半角空格或连字符处换行。

 

2.2 word-wrap

normal: 只在允许的断字点换行（浏览器保持默认处理）。

break-word: 在长单词或url地址内部进行换行。

 

2.3 white-space

normal: 默认。空白会被浏览器忽略。

pre: 空白会被浏览器保留。其行为方式类似html中的<pre>标签。

nowrap: 文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止。

pre-wrap: 保留空白符序列，但是正常地进行换行。

pre-line: 合并空白符序列，但是保留换行符。

inherit: 继承父元素属性值。

 

2.4 常用情况

1. word-break: break-all; 只对英文起作用，以字母作为换行依据。

2. word-wrap: break-word; 只对英文起作用，以单词作为换行依据。

3. white-space: nowrap; 强制不换行，都起作用。

4. white-space: pre-wrap; 只对中文起作用，强制换行。

5. white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 不换行，超出部分隐藏且以省略号形成出现。