CSS繼承
一、什么是CSS繼承
CSS繼承是指我們?cè)O(shè)置父級(jí)CSS樣式時(shí)，父級(jí)及以下的子級(jí)都具有此屬性。
二、不可繼承的屬性
-
display：規(guī)定元素應(yīng)該生成的框的類型 - 文本屬性：
vertical-align、text-decoration、text-shadow、white-space、unicode-bidi等 - 盒子模型屬性：
width、height、margin等 - 背景屬性：
background等 - 定位屬性：
float、clear、position等 - 生成內(nèi)容屬性：
content等 - 輪廓樣式屬性：
outline等
8.頁(yè)面樣式屬性：size等 - 聲音樣式屬性：
pause等
三、有繼承性的屬性
- 字體屬性：
font等 - 文本屬性：
text-align、line-height等 - 元素可見(jiàn)性：
visibility - 布局屬性：
border-spacing、list-style等 - 生成內(nèi)容屬性：
quotes - 光標(biāo)屬性：
cursor - 頁(yè)面樣式屬性：
page、windows等 - 聲音樣式屬性：
speak、volume、pitch等
四、所有元素可繼承的屬性
- 元素可見(jiàn)性：
visibility - 光標(biāo)屬性：
cursor
五、內(nèi)聯(lián)元素可繼承的屬性
- 字體屬性：
font - 除
text-indent、text-align之外的文本屬性
六、塊級(jí)元素可繼承的屬性
-
text-indent、text-align
塊級(jí)元素與行內(nèi)元素
一、塊級(jí)元素
一般占據(jù)整行，不能與其他元素并列。
能夠設(shè)置寬高，默認(rèn)為父級(jí)的100%。
只能出現(xiàn)在<body>內(nèi)。
塊級(jí)元素主要有：
-
<div>文檔分區(qū) -
<h1>~<h6>一級(jí)標(biāo)題到六級(jí)標(biāo)題 -
<p>段落 -
<hr>水平線 -
<pre>預(yù)格式化文本 -
<ul>無(wú)序列表 -
<ol>有序列表 -
<table>表格 -
<form>表單 -
<fieldset>表單元素分組 -
<output>表單輸出 -
<header>頁(yè)頭 -
<footer>頁(yè)尾 -
<section>分區(qū)或節(jié) -
<atrical>文章內(nèi)容 -
<aside>側(cè)邊欄 -
<address>聯(lián)系方式信息 -
<audio>音頻 -
<video>視頻 -
<blockquote>塊引用 -
<canvas>繪制圖形 -
<dd>定義列表中定義條目描述 -
<dl>定義列表 -
<figure>圖文信息組 -
<figcaption>圖文信息組標(biāo)題
二、行內(nèi)元素
與其他行內(nèi)元素并排。
不能設(shè)置寬高，默認(rèn)為文字的寬度。
行內(nèi)元素主要有：
-
<span>行內(nèi)容器 -
<a>定義錨 -
<b>定義粗體 -
<i>定義斜體 -
<abbr>定義縮寫(xiě) -
<acronym>定義取得首字母縮寫(xiě) -
<cite>定義引用 -
<big>定義大號(hào)文本 -
<small>定義小號(hào)文本 -
<br>定義折行 -
<dfn>定義項(xiàng)目 -
<em>著重閱讀 -
<strong>定義加強(qiáng) -
<img>定義圖片 -
<map>定義圖像映射 -
<script>定義腳本 -
<sub>定義下標(biāo)文本 -
<sup>定義上標(biāo)文本 -
<button>定義按鈕 -
<input>定義輸入框 -
<label>定義界面中項(xiàng)目的標(biāo)題
元素居中顯示
- 塊級(jí)元素
\\水平居中
div{
width: 600px;
margin: 0 auto
}
\\垂直居中
div{
margin:0 auto;
height:30px;
line-height:30px
}
- 行內(nèi)元素
\\水平居中
div{
text-align: center;
}
\\垂直居中
div{
height:30px;
line-height:30px;
}
- inline-block元素對(duì)其父級(jí)元素采用行內(nèi)元素方法居中
文本溢出“...”實(shí)現(xiàn)
- 單行文本
p{
overflow: hidden;
white-overflow: ellipsis;
white-space: nowarp;
}
- 多行文本
p{
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
CSS單位解析
- px：px就是pixel的縮寫(xiě)，意為像素。
- em：相對(duì)于父元素的font-size，具有繼承的特點(diǎn)。如果自身定義了font-size按自身來(lái)計(jì)算（瀏覽器默認(rèn)字體是16px），整個(gè)頁(yè)面內(nèi)1em不是一個(gè)固定的值。
- rem：相對(duì)于根元素html的 font-size。
- vw：viewpoint width的縮寫(xiě)，視窗寬度，1vw等于視窗寬度的1%。
- vh：viewpoint height的縮寫(xiě)，視窗高度，1vh等于視窗高度的1%。
- vm：相對(duì)于視窗的寬度或高度中較小的那個(gè)。其中最小的那個(gè)被均分為100單位的vm。
