CSS權(quán)威指南第三版 - 1

Menu

  • css術(shù)語
  • 后代選擇器
  • 兄弟選擇器
  • 屬性選擇器
  • 偽類
  • 偽元素
  • 選擇器優(yōu)先級
  • web安全色
  • 字體
    • font-family
    • font-weight
    • font-size
    • font-style
  • text
    • text-indent 首行縮進(jìn)
  • line-height
  • vertical-align 垂直對齊
  • word-spacing 字間距
  • letter-spacing 字符間距
  • text-transform 文本轉(zhuǎn)換
  • text-decoration 文本裝飾
  • text-shadow 文字陰影
  • white-space 對空白符和換行的處理
  • direction 文字方向
  • 第七章 基本視覺格式化
    • 水平格式化
    • 垂直格式化
    • 行布局
    • 基本術(shù)語格式化
    • 管理行高
    • 非替換元素內(nèi)邊距、邊框不影響行高；
    • 替換元素會(huì)增加行框高度，但不影響行高；
    • 替換元素和基線
    • 改變元素顯示-display
      • display：inline-block
      • display：run-in
css術(shù)語
  • 匿名文本： 是指未包含在行內(nèi)元素里的字符串；
  • em框：font-size確定了em框的高度；
  • 內(nèi)容區(qū)
    • 非替換元素：是指em框，font-size定義的em框的高度；
    • 替換元素：元素的高度 + padding + border + margin
  • 行間距：行間距 = （行高 - font-size）/ 2 分別放在em框的上端和下端；
  • 行內(nèi)框：
    • 非替換元素：算完之后與行高相等；
    • 替換元素：與元素內(nèi)容區(qū)高度相等；
  • 行框：是該行內(nèi)行內(nèi)框的最高上邊界 和 最低下邊界；
  • 內(nèi)容區(qū)類似于一個(gè)塊級元素的內(nèi)容框；
  • 行內(nèi)元素的邊框要包圍內(nèi)容區(qū)以及所有內(nèi)邊距的邊框；
  • 行內(nèi)元素的背景要包圍內(nèi)容區(qū)以及所有內(nèi)邊距。
  • 非替換元素的內(nèi)邊距、邊框和外邊距對行內(nèi)元素或其生成的框沒有垂直效果；
  • 替換元素的行高包括等于內(nèi)容區(qū)高度（元素+padding+border+margin）
后代選擇器
  • h1 em：選擇子元素
  • 繼承關(guān)系可以正著寫，也可以反著寫（em h1）；
h1 em {font-weight: bold; color: red;}
p em, p q {font-weight: bold; color: cyan;}

<h1>這個(gè)點(diǎn)我<em>正在學(xué)習(xí)</em>css</h1>
<p>個(gè)稅改革塵埃落定，<em>社保費(fèi)統(tǒng)</em>征成為<q>公眾關(guān)注</q>的又一焦點(diǎn)。</p>
  • h4 > strong：選擇所有子元素，孫元素不受影響；
h4 > strong {font-weight: bold; color: blue;}

<h4>喜訊！<strong>寧海白枇杷</strong>，成為寧海第2個(gè)獲<em><strong>國家地理</strong></em>標(biāo)志登記保護(hù)的農(nóng)產(chǎn)品</h4>
兄弟選擇器
  • 兄弟選擇符只能選中同級相鄰兄弟元素中的第二個(gè)元素；
li + li {color: pink;}
ul + ol {font-weight: bold;}
body > table ol + ul {some style;}

<ul>
    <li>unorder1</li>
    <li>unorder2</li>
    <li>unorder3</li>
</ul>
<ol>
    <li>unorder1</li>
    <li>unorder2</li>
    <li>unorder3</li>
</ol>
屬性選擇器
  • 簡單屬性選擇
p[class]{color: red;}

<p class="classvalue">1.選定某個(gè)元素，不管屬性的值是什么。</p>
  • 根據(jù)多個(gè)屬性選擇
a[href][alt] {color: orange;}

<a  alt="alttext" />
  • 根據(jù)屬性值選擇
    • 屬性值需要完全匹配；
a[] {color: yellow;}

<a >python web</a>
  • 根據(jù)多個(gè)屬性值完全匹配選擇
img[src="https://www.python.org/static/img/python-logo.png"][alt="logo"] {border:6px double green;}

<img src="https://www.python.org/static/img/python-logo.png" alt="logo">
  • 根據(jù)部分屬性值選擇
p[class~="python"] {color: blue;}

<p class="python java">Python is programming language!</p>
  • 根據(jù)正則規(guī)則匹配屬性值
    • 以指定字符開頭的值
h1[id^="my"] {color: cyan;}

<h1 id="myidvalue">匹配所有h1標(biāo)簽屬性有id的，并且值是my開頭的；</h1>
  • 以指定字符結(jié)尾的值
img[src$="jpg"] {border:6px double purple}

<img src="imgpath.jpg" alt="replace_text" />
  • 通配匹配單詞
h2[class*="python"] {color: red; border:6px double red}

<h2 class="mypythonbook">通配匹配單詞，只要值里有這個(gè)單詞就能匹配</h2>
  • 屬性==“值” 或者 以“值-”開頭的：
  • tag[attr|="value"] 匹配 值是value 或 value-
h3[lang|="en"] {color: orange}

<h3 lang="en-us">h3 line</h3>
偽類
  • 定義
    • 偽類用于向某些選擇器添加特殊的效果。
  • <a> 標(biāo)簽偽類
    • 根據(jù)love、hate順序依次是link、visited、hover、active
a:link {color: #FF0000}     /* 未訪問的鏈接 */
a:visited {color: #00FF00}  /* 已訪問的鏈接 */
a:hover {color: #FF00FF}    /* 鼠標(biāo)移動(dòng)到鏈接上 */
a:active {color: #0000FF}   /* 選定的鏈接 */
  • css類與偽類
a.red : visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>
  • first-child 偽類
    • 您可以使用 :first-child 偽類來選擇每個(gè)元素的第一個(gè)指定子元素。
p:first-child {font-weight: bold;}    /* 為每個(gè)元素第一個(gè)p元素添加style */
li:first-child {text-transform:uppercase;}   /* 為每個(gè)元素第一個(gè)li元素添加style */

<div>
<p>These are the necessary steps:</p>   <!-- 這段bold，其余p不變-->
<ul>
<li>Intert Key</li>    <!-- 這段大寫-->
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>
  • 匹配指定元素的第一個(gè)指定子元素
p > i: first-child {font-weight:bold; } 

<body>
<p>some <i>text</i>. some <i>text</i>.</p>    <!-- 第一個(gè)i元素加粗-->
<p>some <i>text</i>. some <i>text</i>.</p>     <!-- 第一個(gè)i元素加粗-->
</body>
  • 匹配每個(gè)元素下的第一個(gè)指定元素下的所有指定元素
p: first-child i  {font-weight: bold }

<body>
<p>some <i>text</i>. some <i>text</i>.</p>   <!-- 所有i元素加粗-->
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
  • tag: lang 偽類
    • :lang 偽類允許您為不同的語言定義特殊的規(guī)則。在下面的例子中，:lang 類為帶有值為 "cn" 的 lang 屬性的 q 元素定義引號(hào)的類型：
    • tag:lang(value)
q:lang(en) {quotes: "~" "~"}

<body>
<p>Some text <q lang="en">A quote in a paragraph</q> Some text.</p>
</body>
  • tag: focus : 選中所有鍵盤焦點(diǎn)
input:focus {background-color:yellow;}
偽元素

  • 偽元素的語法：

    • tag: pseudo-element {some style}

  • CSS 類也可以與偽元素配合使用：：

    • tag.class:pseudo-element {some style}

  • tag:first-line 偽元素

    • 選中p元素在瀏覽器里顯示的第一行
p:firstline {red: orange;}

  • first-line" 偽元素只能用于塊級元素。

  • 下面的屬性可應(yīng)用于 "first-line" 偽元素：
    font color background word-spacing letter-spacing text-decoration vertical-align text-transform line-height clear

  • :first-letter 偽元素

    • 選中指定tag的第一個(gè)字
p:first-letter {color: red; text-weight: bold;}
  • 偽元素和 CSS 類
p.class_value:first-letter {some style}
  • 多重偽元素
    • 可以結(jié)合多個(gè)偽元素來使用。
    • 在下面的例子中，段落的第一個(gè)字母將顯示為紅色，其字體大小為 xx-large。第一行中的其余文本將為藍(lán)色，并以小型大寫字母顯示。段落中的其余文本將以默認(rèn)字體大小和顏色來顯示：
p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

p:first-line
  {
  color:#0000ff;
  font-variant:small-caps;
  }
  • :before 偽元素
    • ":before" 偽元素可以在元素的內(nèi)容前面插入新內(nèi)容。
    • 下面的例子在每個(gè) <h1> 元素前面插入一幅圖片：
h1:before {content:url(picturepath);}
  • :after 偽元素
    • ":after" 偽元素可以在元素的內(nèi)容之后插入新內(nèi)容。
    • 下面的例子在每個(gè) <h1> 元素后面插入一幅圖片：
h1:after {content:url(picturepath);}
選擇器優(yōu)先級

  • 層疊規(guī)則

    • 讀者!important > 創(chuàng)作人員!important > 創(chuàng)作人員普通 > 讀者 > 代理（瀏覽器）；
    • 加!important的聲明權(quán)重高于其它；
    • 聲明之間權(quán)重排序；
    • 聲明后面的比前面的權(quán)重高；
    • （）

  • 聲明排序規(guī)則：

    • 元素 和 偽元素：0，0，0，1
    • 類、類屬性選擇器、偽類：0，0，1，0
    • id選擇器：0，1，0，0
    • 行內(nèi)選擇器：1，0，0，0
    • 通配符 and 結(jié)合符：不算分
    • 在分號(hào)前加!important，優(yōu)先級最高；
h1{}                /* 0，0，0，1 */
p.red{}         /* 0，0，1，1 */
p em {}          /* 0，0，0，2 */
#idvalue {}        /* 0，1，0，0 */
p#idvalue {}        /* 0，1，0，1 */
div#idvalue[title]{}  /* 0，1，1，1 */
p {color:red !important;}    /* 優(yōu)先級最高 */
web安全色
  • 十六進(jìn)制色，使用值00、33、66、99、CC、FF的三元組都是web安全的。
    • 如：#003366、#669933、#FF00FF、#CCFF66、#c9f
字體
  • font-family
    • 在 CSS 中，有兩種不同類型的字體系列名稱：
      • 通用字體系列 - 擁有相似外觀的字體系統(tǒng)組合（Serif、Sans-serif、Monospace 、Cursive、Fantasy）
      • 特定字體系列 - 具體的字體系列（比如 "Times" 或 "Courier"）
    • 字體設(shè)置方法：
      • 如果你在font-family設(shè)置了一個(gè)具體的字體，但是客戶機(jī)上沒有安裝這種字體，這種情況下可以在其后放一些相似類型的具體字體，在最后放一個(gè)通用字體系列如有襯線的可以放serif，如果指定字體有特殊符號(hào)如#、￥或者指定字體有空格，需要加引號(hào)。
h1 {font-family: Georgia, Times, TimesNR, 'New Century Schoolbook', serif}
  • font-weight
    • bolder（粗一號(hào)），lighter（細(xì)一號(hào)）
    • 400==normal， 700 == bold
    • 使用 bold 關(guān)鍵字可以將文本設(shè)置為粗體。
    • 關(guān)鍵字 100 ~ 900 為字體指定了 9 級加粗度。如果一個(gè)字體內(nèi)置了這些加粗級別，那么這些數(shù)字就直接映射到預(yù)定義的級別，100 對應(yīng)最細(xì)的字體變形，900 對應(yīng)最粗的字體變形。數(shù)字 400 等價(jià)于 normal，而 700 等價(jià)于 bold。
    • 如果將元素的加粗設(shè)置為 bolder，瀏覽器會(huì)設(shè)置比所繼承值更粗的一個(gè)字體加粗。與此相反，關(guān)鍵詞 lighter 會(huì)導(dǎo)致瀏覽器將加粗度下移而不是上移。
p.normal {font-weight: normal}
p.thick {font-weight: bold}
p.thicker {font-weight: 900}

  • font-size

    • larger（大一號(hào)），smaller（小一號(hào)）
    • 如果您沒有規(guī)定字體大小，普通文本（比如段落）的默認(rèn)大小是 16 像素 (16px=1em)。
    • font-size有7個(gè)絕對大小值：xx-small、x-small、small、medium、large、x-large、xx-large（相對父tag的font-size來確定）
    • W3C 推薦使用 em 尺寸單位

  • font-style

    • font-style 屬性最常用于規(guī)定斜體文本，該屬性有三個(gè)值：
      • normal - 文本正常顯示
      • italic - 文本斜體顯示
      • oblique - 文本傾斜顯示

  • font

    • 語法：
    • tag {font: font-style; font-variant; font-weight; font-size; /line-height; font-family}
    • font-style; font-variant; font-weight; 前三個(gè)順序可變。
    • font-size; /line-height; font-family 后三個(gè)順序不能變。
    • /line-height; 行高前面要加斜杠
tag {font:italic bold 12px/2.5em arial, times, sans-serif;}
  • 如果font中的6個(gè)屬性沒有寫就會(huì)被自動(dòng)重置為mormal，如果從祖先tag里有繼承的屬性都會(huì)被重置。
h1, h2, h3 {font: italic small-caps 1.5em serif;}
h2 {font: 18px serif;}
h3{font-size: 26px;}

等效于

h1, h2, h3 {font: italic  normal small-caps 1.5em serif;}
h2 {font: normal normal normal 18px serif;}    /* 省略部分以normal值覆蓋 */
h3{font-size: 26px;}   /* font-size只會(huì)覆蓋size，其它不變 */
text
  • text-indent 首行縮進(jìn)
    • 該屬性可以方便地實(shí)現(xiàn)文本縮進(jìn)。
      通過使用 text-indent 屬性，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長度，甚至該長度可以是負(fù)值。這個(gè)屬性最常見的用途是將段落的首行縮進(jìn)。
p {text-indent:2em;}  /* 縮進(jìn)2個(gè)字體寬度 */
p {text-indent:10%;} /* 縮進(jìn)父框架的10% */
p {text-indent:32px;} /* 縮進(jìn)指定像素 */
p {text-indent:-2em;} /* 縮進(jìn)也可以是負(fù)數(shù)的 */
  • text-align 對齊方式
    • justify 可以使文本的兩端都對齊。在兩端對齊文本中，文本行的左右兩端都放在父元素的內(nèi)邊界上。然后，調(diào)整單詞和字母間的間隔，使各行的長度恰好相等。
tag{justify: left [center right justfy inherit”]}
line-height 行高
  • 該屬性會(huì)影響行框的布局。在應(yīng)用到一個(gè)塊級元素時(shí)，它定義了該元素中基線之間的最小距離而不是最大距離。
  • line-height 與 font-size 的計(jì)算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部。可以包含這些內(nèi)容的最小框就是行框。
p {
line-height: 200%;
font-size: 16px; line-height: 20px;
line-height: 1.5em;
}
  • 原始數(shù)字值指定了一個(gè)縮放因子，后代元素會(huì)繼承這個(gè)縮放因子而不是計(jì)算值。以下設(shè)置P會(huì)繼承父元素的行高值1.5，然后根據(jù)自己的字體大小來計(jì)算行高18px*1.5=行高值（推薦）
div {line-height: 1.5;}
p {font-size: 18px;}
vertical-align 垂直對齊
  • 屬性設(shè)置元素的垂直對齊方式。
  • 該屬性定義塊級元素中的最高元素為基線，要對齊的元素與最高元素基線對齊。 - 允許指定負(fù)長度值和百分比值。這會(huì)使元素降低而不是升高。在表單元格中，這- 個(gè)屬性會(huì)設(shè)置單元格框中的單元格內(nèi)容的對齊方式。
  • baseline 默認(rèn)。元素放置在父元素的基線上。
  • sub 垂直對齊文本的下標(biāo)。
  • super 垂直對齊文本的上標(biāo)
  • top 把元素的頂端與行中最高元素的頂端對齊
  • text-top 把元素的頂端與父元素字體的頂端對齊
  • middle 把此元素放置在父元素的中部。
  • bottom 把元素的頂端與行中最低的元素的頂端對齊。
  • text-bottom 把元素的底端與父元素字體的底端對齊。
  • length
  • % 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負(fù)值。
  • inherit 規(guī)定應(yīng)該從父元素繼承 vertical-align 屬性的值。
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}

<p>這是一幅<img class="top" src="http://www.w3school.com.cn/i/eg_cute.gif" />位于段落中的圖像。</p> 
<p>這是一幅<img class="bottom" border="0" src="http://www.w3school.com.cn/i/eg_cute.gif" />位于段落中的圖像。</p>
頂?shù)谆€對齊
  • vartical-align %值 和 px值
img.top {vertical-align: 50%}   /* 根據(jù)父框架的line-height的50%計(jì)算值后，升高相應(yīng)的計(jì)算值 如父tag的line-height是18px，就升高9px*/
img.top {vertical-align: -30px}   /* 下降30px */
  • word-spacing word間距
    • normal 默認(rèn)。定義單詞間的標(biāo)準(zhǔn)空間。
    • length 定義單詞間的固定空間。
p {word-spacing: 0.5em;}
  • letter-spacing 字符間距
    • 設(shè)置屬性值為“normal”，如果還設(shè)置了text-align屬性為justify的話，文本會(huì)兩端對齊，如果letter-spacing是length，那么text-align值為justfy則無效；
    • word letter-spacing 會(huì)繼承父元素的計(jì)算值，無法單繼承spacing值，如果font-size：100px，spacing：0.2em，那么會(huì)直接繼承spacing的計(jì)算值：20px。
h1 {letter-spacing:2px}
h2 {letter-spacing:-3px}
  • text-transform 文本轉(zhuǎn)換
h1 {text-transform:uppercase}
h2 {text-transform:capitalize}
p {text-transform:lowercase}
  • text-decoration 文本裝飾
    • text-decoration屬性不能繼承，如果看到子元素有線，那只是經(jīng)過而已。

    • 如果子元素想要下劃線顏色和字體顏色一致。必須在聲明一次text-decoration: underline; 那下劃線的顏色就會(huì)和字體顏色一致；


      下劃線顏色覆蓋
h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}  /* 已經(jīng)廢棄 */
  • text-shadow 文字陰影
    span {text-shadow: blue 0.5px 0.25px 0.25px;} /* args:陰影顏色 右距離 下距離 模糊距離 (如果右 和 下參數(shù)為負(fù),那么就是定義左 和 上）

  • white-space 對空白符和換行的處理

    white-space屬性值

  • direction 文字方向

    • 在設(shè)置direction之前需要設(shè)置unicode-bidi的屬性為bide-override，才可以改變文字方向；
tag {direction:rtl; unicode-bidi:bidi-override; }
第七章 基本視覺格式化

  • 水平格式化

    • 正常流中塊級元素框的水平部分總和（width、padding、margin、border）等于父元素的width；


      水平格式化
    • auto
      • width、margin-left、margin-right可以設(shè)置auto值，如果其中兩個(gè)設(shè)置了具體值，那剩下一個(gè)會(huì)自動(dòng)設(shè)置剩下寬度的值；
      • 如果width、margin-left、margin-right都設(shè)置了具體值，那么瀏覽器會(huì)強(qiáng)制吧magin-right設(shè)置為auto。
      • 如果把兩個(gè)margin設(shè)置為auto，那么這兩個(gè)margin會(huì)自動(dòng)平分剩余父元素的width值。
      • 如果把其中一個(gè)margin和width設(shè)置為auto，那么width會(huì)得到所有剩余父元素的width值。另一個(gè)margin的值會(huì)自動(dòng)變成0。
      • 如果width、margin-left、margin-right三個(gè)值都設(shè)置為auto，那么這種情況和默認(rèn)情況是一樣的，width會(huì)得到所有father frame width。margin會(huì)變成0；

  • 垂直格式化

    • 父元素hight為auto時(shí)，hight為0，實(shí)際是子元素的高度；但父元素不會(huì)包含子元素的margin；需要父元素設(shè)置border就會(huì)包含子元素margin，也可以父元素設(shè)置overflow值除visible以外的值，如hidden；

    • 垂直外邊距合并：
      （相鄰垂直外邊距規(guī)則：1.上下margin正數(shù)取大值為相鄰margin；2.上下有負(fù)數(shù)算差值為相鄰margin；3.如有多個(gè)相鄰元素，選正最大數(shù)和付最大數(shù)計(jì)算；）

      • 如果多個(gè)相鄰上下元素的外邊距一致時(shí)會(huì)重疊合并；高度不一時(shí)，高的會(huì)合并低的；

    • 垂直外邊距為負(fù)時(shí)：
      子元素垂直外邊距為負(fù)時(shí)，子元素塊會(huì)向相反方向移動(dòng)相應(yīng)距離；所有父元素包含的元素都會(huì)跟著移動(dòng)；

    • 相鄰兩個(gè)元素其中一邊為負(fù)時(shí)：

      • 正的減去負(fù)的絕對值就是元素間的距離；

    • 行布局

      • 如何確定行內(nèi)框（行高）：
          1. 非替換元素：
          • lineheight == font-size + 行間距
        • 2.替換元素：
          • lineheight == content-height + margin + padding + border

    • 基本術(shù)語格式化

      • vertical-align值效果：
        • top：將元素行內(nèi)框的頂端與最高元素的頂端對齊；
        • bottom：將元素行內(nèi)框的底端與最低元素的底端對齊；
        • text-top：將元素行內(nèi)框的頂端和父元素內(nèi)容區(qū)的頂端對齊
        • text-bottom：將元素行內(nèi)框的底端和父元素內(nèi)容區(qū)的底端對齊
        • middle：將元素行內(nèi)框的垂直中點(diǎn)與父元素的letter-X的中點(diǎn)對齊；
        • super：將元素行內(nèi)框和內(nèi)容區(qū)上移，瀏覽器定；
        • sub：將元素行內(nèi)框和內(nèi)容區(qū)下移，瀏覽器定；
        • 移動(dòng)%數(shù)值：根據(jù)元素行高上移或下移[數(shù)值]個(gè)百分比；

  • 管理行高

    • 如何改變元素行高，但不與其它文本行重疊：
      • 改變元素字體大小時(shí)候，把行高設(shè)置為1em；
      • 父元素定義行高的縮放因子為數(shù)字1，后代元素會(huì)繼承這個(gè)縮放因子，而不是父元素計(jì)算后的行高值，因此子元素的行內(nèi)框的高度與內(nèi)容框一致；
      • 手動(dòng)顯式增加行高的具體數(shù)值；
    • 非替換元素內(nèi)邊距、邊框不影響行高；
      非替換元素pading、border、margin不改變行高（top和bottom瀏覽器自動(dòng)切掉內(nèi)邊距，但是如果應(yīng)用背景，還是能看到內(nèi)邊距，left和right會(huì)應(yīng)用樣式；）
span {padding: 20px 0; border:10px solid; background-color: yellow;}
應(yīng)用背景還是能看到內(nèi)邊距

  • 替換元素會(huì)增加行框高度，但不影響行高；

  • 替換元素和基線

    • 替換元素默認(rèn)位于基線上，如果需要其像塊級元素貼在行框上顯示，需要增加display：block聲明，讓其成為塊級元素；

  • 改變元素顯示 行內(nèi)塊元素 - display

    • display: inline-block :

      • 底端位于文本行基線上，沒有行分隔符，如需換行，直接回車；
      • 就像把img一樣的行內(nèi)元素變成像p一樣的塊級元素顯示；在行內(nèi)塊元素內(nèi)部，可以像正常的P元素一樣設(shè)置樣式；

      • 行內(nèi)塊元素會(huì)使行高增加；


        行內(nèi)塊元素

    • display：run-in

      • 把一個(gè)塊級元素放到下個(gè)相鄰的塊級元素做為開頭，行內(nèi)元素需要先聲明成塊級元素。（只支持IE內(nèi)核）
      • 一個(gè)行內(nèi)元素在塊級元素里設(shè)置為run-in，這個(gè)行內(nèi)元素就會(huì)變成塊級元素。但是行內(nèi)元素后面不能跟一個(gè)塊級元素；
run-in
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具（例如配置管理，服務(wù)發(fā)現(xiàn)，斷路器，智...
    卡卡羅2017閱讀 134,869評論 18贊 139
  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的，因此網(wǎng)頁是網(wǎng)絡(luò)信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,060評論 0贊 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,792評論 1贊 92
  • CSS 指層疊樣式表（Cascading Style Sheets），是一種用來為結(jié)構(gòu)化文檔（如 HTML 文檔或...
    神齊閱讀 2,114評論 0贊 14
  • 職場：大家好，我是黑道，一名多年銷售從業(yè)者，大家有遇到什么銷售或者職場問題歡迎與我一起交流。 職場 今天我想和大家...
    追風(fēng)箏的秘密閱讀 2,658評論 0贊 0