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