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:
塊級元素:margin和padding
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;