CSS样式

2019-02-25 16:09:53来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

葵花宝典:

【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; 不换行,超出部分隐藏且以省略号形成出现。

 


原文链接:https://www.cnblogs.com/huen2015/p/10432564.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:VSCode中快捷输入HTML代码

下一篇:第十一课 CSS介绍与font字体 css学习1