CSS樣式

SwordFly 發布于2019-04-23 11:48 / 2763人閱讀

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

葵花寶典：

【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; 不換行，超出部分隱藏且以省略號形成出現。

云服務器 GPU云服務器 css樣式頁面css樣式 css的樣式 css樣式代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/1197.html

web前端（7）—— 了解CSS樣式，引入css樣式的方式

摘要：那么這些樣式每一個代表什么作用呢接下來我們才正式進入的講解為什么要學習樣式使用樣式可以幫助我們調整美觀標簽，以及如何對進行布局什么是樣式是指層疊樣式表，樣式定義如何顯示元素，樣式通常又會存在于樣式表中。CSS在前面大概的介紹了css，從本片博文開始，會詳細的介紹它，在最開始介紹web前端時，打開百度首頁，當時我提出了一個問題，為什么百度首頁的輸入框可以放在正中間，就是由于有css的控制，我們...

番茄西紅柿 2019-04-23 13:11 評論0 收藏0
CSS Modules詳解及React中實踐

摘要：上例中打印的結果是對中的名都做了處理，使用對象來保存原和混淆后的對應關系。結合實踐在處直接使用中名即可。如因為只會轉變類選擇器，所以這里的屬性選擇器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端領域中進化最慢的一塊。由于 ES2015/201...

wemall 2019-08-30 15:45 評論0 收藏0
前端修煉の道 | 帶你走進迷人的 CSS 世界

摘要：每條屬性聲明實現對網頁元素進行某種特定格式的設置，由一個屬性和一個值組成，屬性和值之間使用冒號連接，不同聲明之間用分號分隔，所有屬性聲明放到一對大括號中。 showImg(https://segmentfault.com/img/bVbkQCI?w=900&h=383); showImg(https://segmentfault.com/img/bVbkQCO?w=900&h=383)...

shiweifu 2019-08-23 13:58 評論0 收藏0
關于CSS Reset 那些事（四）之構架CSS基礎樣式庫

摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。前言先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史與 Normalize.css 介紹 Normalize.css...

mj 2019-08-28 18:13 評論0 收藏0
關于CSS Reset 那些事（四）之構架CSS基礎樣式庫

摘要：現在回到我們這一章節的標題，將它做下補充關于那些事四之基于構架基礎樣式庫基礎庫構思為什么要做基礎庫我上一章節的末尾拋出了幾個問題假設你要做一個游戲單頁面，網頁上并不存在表單內容，那么你就要移除一些冗余的代碼，開始自定義樣式來滿足自己的需求。前言先來回顧一下前幾章節，我們都說了哪些內容： CSS Reset 歷史與 Normalize.css 介紹 Normalize.css...

Yu_Huang 2019-08-01 14:48 評論0 收藏0