国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS中字距，詞距，首行縮進(jìn)，字體大小，排版相關(guān)問題的探討

hedge_hog / 767人閱讀

摘要：卡的要死，半死不活，也懶得深入研究這些細(xì)節(jié)，字體排版上不是強(qiáng)迫癥，差別也不大。文字，咋排就是這么簡單的頁面。后的空格，后加上字距藍(lán)色，再加上單詞間距粉紅色塊才是真正的距離。

先說明下，這是在谷歌瀏覽器下字體顯示等問題做個研究，火狐下有點(diǎn)差異，不過火狐占有率低，而且顯示的沒有谷歌那么合理，不管它先。IE卡的要死，半死不活，也懶得深入研究這些細(xì)節(jié)，字體排版上不是強(qiáng)迫癥，差別也不大。

            div{
                border: 1px solid black;
                color: red;
                font-size: 14px;
            }
<div>文字，咋,排-hello Spacingdiv>

就是這么簡單的頁面。顯示結(jié)果如下

?漢字占的地方是綠色部分是寬14px，高14px

?英文字符占的地方黃色部分是寬 7px，高14px

1.font-size:14px,默認(rèn)行高會上下加1px,達(dá)到16px
2.漢字字高14px,字寬14px（宋體設(shè)計的是13+1模式）,字字緊相鄰
3.英文字符（空格看成一個英文字符，hello后面那個）,寬7px

開始變動css，加字距

            div{
                border: 1px solid black;
                color: red;
                font-size: 14px;
                /* 添加字距 */
                letter-spacing: 10px;
            }

4.letter-spacing的意思是字與字之間的間距， 也就是出現(xiàn)在上圖中的藍(lán)色方塊，這里設(shè)置寬10px

5.可以理解為默認(rèn)letter-spacing:0px

6.應(yīng)該把空格當(dāng)成一個英文字符看，他也有自己的letter-spacing

7.中文標(biāo)點(diǎn)符號等同于漢字，英文狀態(tài)下標(biāo)點(diǎn)符號等同于英文字符

再變動css，加詞距

            div{
                border: 1px solid black;
                color: red;
                font-size: 14px;
                /* 添加字距 */
                letter-spacing: 10px;
                /* 添加詞距 */
                word-spacing: 20px;
            }

8.word-spacing，單詞間距，瀏覽器是根據(jù)空格判斷的，有空格就認(rèn)為有詞。

9.hello后的空格，后加上字距l(xiāng)etter-spacing(藍(lán)色)，再加上 單詞間距（粉紅色塊20） 才是真正的距離。

最后變一次CSS，加上首行縮進(jìn)

            div{
                border: 1px solid black;
                color: red;
                font-size: 14px;
                /* 添加字距 */
                letter-spacing: 10px;
                /* 添加詞距 */
                word-spacing: 20px;
                /* 添加首行縮進(jìn) */
                text-indent: 2em;
            }

?

?

10.這里1em為14px,2em為28px,text-indent首行縮進(jìn)， 所以，文的前面為28px

11.這里可以看出，字距加在字后面，單詞間的詞距加在字距后， 字距詞距默認(rèn)皆為0！

?最后附上html文件代碼

 1 DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>title>
 6         <style>
 7             div{
 8                 /*width: 100px;*/
 9                 border: 1px solid black;
10                 color: red;
11                 font-size: 14px;
12                 
13                 text-decoration: none;
14                 letter-spacing: 10px;
15                 word-spacing:20px;
16                 text-indent: 2em;
17             }
18         style>
19     head>
20     <body>
21         <div>文字，咋,排-hello Spacingdiv>
22     body>
23 html>

?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/1646.html

相關(guān)文章

  • 003-CSS核心屬性

    摘要：文本大小說明屬性值為數(shù)值型時，必須給屬性值加單位，屬性值為時除外。字間距控制英文字母或漢字的字距。列表元素可繼承。 文本大小 {font-size:12px/14px/16px} 說明： 1）屬性值為數(shù)值型時，必須給屬性值加單位，屬性值為0時除外。 2）單位還可以是pt，9pt=12px; 3）為了減小系統(tǒng)間的字體顯示差異，IE Netscape Mozilla的瀏覽器...

    lijinke666 評論0 收藏0

  • 003-CSS核心屬性

    摘要：文本大小說明屬性值為數(shù)值型時，必須給屬性值加單位，屬性值為時除外。字間距控制英文字母或漢字的字距。列表元素可繼承。 文本大小 {font-size:12px/14px/16px} 說明： 1）屬性值為數(shù)值型時，必須給屬性值加單位，屬性值為0時除外。 2）單位還可以是pt，9pt=12px; 3）為了減小系統(tǒng)間的字體顯示差異，IE Netscape Mozilla的瀏覽器...

    liangdas 評論0 收藏0

  • HTML和CSS前端教程03-CSS文本樣式

    摘要：目錄顏色建議就用十六進(jìn)制長度的度量單位建議就用文本樣式字體屬性文本樣式顏色建議就用十六進(jìn)制顏色建議就用十六進(jìn)制長度的度量單位建議就用長度的度量單位建議就用文本樣式文本樣式字體的大小，樣式以及方位字體屬性字體屬性屬性名說明例子目錄 1.CSS顏色-建議就用十六進(jìn)制 2.CSS長度的度量單位-建議就用px 3.CSS文本...

    bitkylin 評論0 收藏0

  • 前端代碼編寫規(guī)范

    摘要：前端代碼規(guī)范代碼編寫規(guī)范縮進(jìn)每一層級由個空格組成，避免使用制表符進(jìn)行縮進(jìn)。單目運(yùn)算符的操作數(shù)之間不應(yīng)該用空白隔開語句中的表達(dá)式之間應(yīng)當(dāng)用空格隔開代碼編寫規(guī)范頭部文檔類型建議使用格式的。內(nèi)聯(lián)元素寫在一行內(nèi)，塊狀元素還有列表和表格要另起一行。 前端代碼規(guī)范 JavaScript代碼編寫規(guī)范 縮進(jìn) 每一層級由4個空格組成，避免使用制表符（Tab）進(jìn)行縮進(jìn)。 行的長度 每行長度不應(yīng)該超過80個...

    liangdas 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<