zoukankan      html  css  js  c++  java
  • 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 {
                 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; 不换行,超出部分隐藏且以省略号形成出现。
  • 相关阅读:
    oracle 删除表中重复数据留一条
    C# 特性
    oracle 常用简单命令语句
    2017年学习计划
    java web开发基础学习
    Java Axis2支持json
    java基础教程
    axis2 发布webservice
    孤荷凌寒自学python第103天认识区块链017
    孤荷凌寒自学python第102天认识区块链016
  • 原文地址:https://www.cnblogs.com/huen2015/p/10432564.html
Copyright © 2011-2022 走看看