css學(xué)習(xí)筆記之常見樣式

1 塊級元素 和 行內(nèi)元素區(qū)別

1 差異

  • 塊級元素可以包含行內(nèi)元素和塊級元素
  • 行內(nèi)元素只能包含文本和行內(nèi)元素
  • 塊級元素占據(jù)一整行
  • 行內(nèi)元素占據(jù)自身寬度空間
  • 寬高,邊框設(shè)置的差異

    eg:
    寬高邊框差異

2 對應(yīng)的元素

  • 塊級元素】:div h1 h2 h3 h4 h5 h6 p hr form ul dl ol pre table li dd dt tr td th
  • 行內(nèi)元素:em strong span a br img buttun input label select textarea code script

3 padding 和 margin
margin對行內(nèi)元素的上下是不生效的.
eg:

行內(nèi)元素舉例

塊級元素:margin和padding

塊級元素padding和margin的用法

4 display

  • 塊級元素:block, list-item,table
  • 行內(nèi)元素: inline,inline-table,inline-block
    5 css特性之繼承性
    css繼承就是指父類元素的屬性特征在子類中得到體現(xiàn)。但并不是所有的屬性都能夠繼承;
    參見:http://www.cnblogs.com/thislbq/p/5882105.html
    http://www.cnphp.info/css-style-inheritance.html
  • 可以繼承的屬性:
    1、display:規(guī)定元素應(yīng)該生成的框的類型
    2、文本屬性:
    vertical-align:垂直文本對齊
    text-decoration:規(guī)定添加到文本的裝飾
    text-shadow:文本陰影效果
    white-space:空白符的處理
    unicode-bidi:設(shè)置文本的方向
    3、盒子模型的屬性:
width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、
border、border-style、border-top-style、border-right-style、border-bottom-style、
border-left-style、border-width、border-top-width、border-right-right、
border-bottom-width、border-left-width、border-color、border-top-color、
border-right-color、border-bottom-color、border-left-color、border-top、
border-right、border-bottom、border-left、padding、padding-top、padding-right、
padding-bottom、padding-left

4、背景屬性:background、background-color、background-image、background-repeat、background-position、background-attachment
5、定位屬性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成內(nèi)容屬性:content、counter-reset、counter-increment
7、輪廓樣式屬性:outline-style、outline-width、outline-color、outline
8、頁面樣式屬性:size、page-break-before、page-break-after
9、聲音樣式屬性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

  • 不可以繼承的數(shù)屬性:
    1、display:規(guī)定元素應(yīng)該生成的框的類型
    2、文本屬性:
    vertical-align:垂直文本對齊
    text-decoration:規(guī)定添加到文本的裝飾
    text-shadow:文本陰影效果
    white-space:空白符的處理
    unicode-bidi:設(shè)置文本的方向
    3、盒子模型的屬性:
width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、
border、border-style、border-top-style、border-right-style、border-bottom-style、
border-left-style、border-width、border-top-width、border-right-right、
border-bottom-width、border-left-width、border-color、border-top-color、
border-right-color、border-bottom-color、border-left-color、border-top、
border-right、border-bottom、border-left、padding、padding-top、padding-right、
padding-bottom、padding-left

4、背景屬性:background、background-color、background-image、background-repeat、background-position、background-attachment
5、定位屬性:float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
6、生成內(nèi)容屬性:content、counter-reset、counter-increment
7、輪廓樣式屬性:outline-style、outline-width、outline-color、outline
8、頁面樣式屬性:size、page-break-before、page-break-after
9、聲音樣式屬性:pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

2如何讓塊級元素水平居中?如何讓行內(nèi)元素水平居中?

塊級元素水平居中margin: 0 auto;
行內(nèi)元素水平居中text-align: center;

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • 塊級元素和行內(nèi)元素分別有哪些?動手測試并列出4條以上的特性區(qū)別 block level inline-level區(qū)...
    HaveSea閱讀 412評論 0 0
  • 一.塊級元素和行內(nèi)元素分別有哪些?動手測試并列出4條以上的特性區(qū)別 塊級元素: address - 地址 bloc...
    Sunset125閱讀 307評論 0 0
  • 塊級元素和行內(nèi)元素分別有哪些?動手測試并列出4條以上的特性區(qū)別 塊級元素:div , h1-6 , p , f...
    YQY_苑閱讀 295評論 0 0
  • 一、塊級元素和行內(nèi)元素分別有哪些?動手測試并列出4條以上的特性區(qū)別 1.行內(nèi)元素 a - 錨點(diǎn) abbr - 縮寫...
    任少鵬閱讀 286評論 0 0
  • 其實(shí)我是一個英語老師! 講起英語,多數(shù)人會說,英語是一門工具,我不否認(rèn)。但大多數(shù)人在講英語工具論的時候都有一種理解...
    臨江先生閱讀 666評論 0 8