CSS樣式

SwordFly 發(fā)布于2019-04-23 11:48 / 2758人閱讀

摘要：獨孤九劍常用樣式首行縮進(jìn)一個文字大小文字修飾刪除線上劃線下劃線詞間距字母間距的區(qū)別使用瀏覽器默認(rèn)的換行規(guī)則。其行為方式類似中的標(biāo)簽。只對英文起作用，以單詞作為換行依據(jù)。不換行，超出部分隱藏且以省略號形成出現(xiàn)。

葵花寶典：

【1】相鄰的2個margin值會疊加在一起。

【2】子元素設(shè)定的margin值會影響父元素。

? ? ? ? ? 在標(biāo)準(zhǔn)瀏覽器下（FireFox，Chrome，Opera，Safari）會有問題。IE下一般表現(xiàn)良好。

　　? 原因是：一個盒子如果沒有上補(bǔ)白（padding-top）和上邊框（border-top）那么這個盒子的上邊距會和其內(nèi)部文檔流中的第一個元素的上邊距重疊。以上參考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;
            /* 首行縮進(jìn)：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的區(qū)別

2.1 word-break normal: 使用瀏覽器默認(rèn)的換行規(guī)則。 break-all: 允許單詞內(nèi)換行。 keep-all: 只能在半角空格或連字符處換行。 ? 2.2 word-wrap normal: 只在允許的斷字點換行（瀏覽器保持默認(rèn)處理）。 break-word: 在長單詞或URL地址內(nèi)部進(jìn)行換行。 ? 2.3 white-space normal: 默認(rèn)?？瞻讜粸g覽器忽略。 pre: 空白會被瀏覽器保留。其行為方式類似HTML中的<pre>標(biāo)簽。 nowrap: 文本不會換行，文本會在同一行上繼續(xù)，直到遇到<br>標(biāo)簽為止。 pre-wrap: 保留空白符序列，但是正常地進(jìn)行換行。 pre-line: 合并空白符序列，但是保留換行符。 inherit: 繼承父元素屬性值。 ? 2.4 常用情況 1. word-break: break-all; 只對英文起作用，以字母作為換行依據(jù)。 2. word-wrap: break-word; 只對英文起作用，以單詞作為換行依據(jù)。 3. white-space: nowrap; 強(qiáng)制不換行，都起作用。 4. white-space: pre-wrap; 只對中文起作用，強(qiáng)制換行。 5. white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 不換行，超出部分隱藏且以省略號形成出現(xiàn)。