1.塊級(jí)元素和行內(nèi)元素分別有哪些？動(dòng)手測(cè)試并列出4條以上的特性區(qū)別?

基本概念：

一、塊級(jí)元素：block element

每個(gè)塊級(jí)元素默認(rèn)占一行高度，一行內(nèi)添加一個(gè)塊級(jí)元素后無法一般無法添加其他元素(float浮動(dòng)后除外)。兩個(gè)塊級(jí)元素連續(xù)編輯時(shí)，會(huì)在頁(yè)面自動(dòng)換行顯示。塊級(jí)元素一般可嵌套塊級(jí)元素或行內(nèi)元素；

塊級(jí)元素一般作為容器出現(xiàn)，用來組織結(jié)構(gòu)，但并不全是如此。有些塊級(jí)元素，如

只能包含塊級(jí)元素。其他的塊級(jí)元素則可以包含行級(jí)元素如

.也有一些則既可以包含塊級(jí)，也可以包含行級(jí)元素。

DIV 是最常用的塊級(jí)元素，元素樣式的display:block都是塊級(jí)元素。它們總是以一個(gè)塊的形式表現(xiàn)出來，并且跟同級(jí)的兄弟塊依次豎直排列，左右撐滿。

二、行內(nèi)元素：inline element

也叫內(nèi)聯(lián)元素、內(nèi)嵌元素等；行內(nèi)元素一般都是基于語義級(jí)(semantic)的基本元素，只能容納文本或其他內(nèi)聯(lián)元素，常見內(nèi)聯(lián)元素 “a”。比如 SPAN 元素，IFRAME元素和元素樣式的display : inline的都是行內(nèi)元素。例如文字這類元素，各個(gè)字母之間橫向排列，到最右端自動(dòng)折行。

三、block(塊)元素的特點(diǎn)

① 總是在新行上開始；

② 高度，行高以及外邊距和內(nèi)邊距都可控制；

③ 寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。

四、inline元素的特點(diǎn)

① 和其他元素都在一行上；

② 高，行高及外邊距和內(nèi)邊距不可改變；

③ 寬度就是它的文字或圖片的寬度，不可改變

④ 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素

④、它可以容納內(nèi)聯(lián)元素和其他塊元素

對(duì)行內(nèi)元素，需要注意如下

1.設(shè)置寬度width 無效。

2.設(shè)置高度height 無效，可以通過line-height來設(shè)置。

3.設(shè)置margin 只有左右margin有效，上下無效。

4.設(shè)置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了但是對(duì)元素周圍的內(nèi)容是沒影響的。

常見的塊級(jí)元素

標(biāo)簽

描述

address

地址

blockquote

塊引用

center

舉中對(duì)齊塊

dir

目錄列表

div

常用塊級(jí)容易，也是CSS layout的主要標(biāo)簽

dl

定義列表

fieldset

form控制組

form

交互表單

h1

大標(biāo)題

h2

副標(biāo)題

h3

3級(jí)標(biāo)題

h4

4級(jí)標(biāo)題

h5

5級(jí)標(biāo)題

h6

6級(jí)標(biāo)題

hr

水平分隔線

isindex

input prompt

menu

菜單列表

noframes

frames可選內(nèi)容，(對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容

noscript

可選腳本內(nèi)容(對(duì)于不支持script的瀏覽器顯示此內(nèi)容)

p

段落

pre

格式化文本

table

表格

ul

無序列表

ol

有序表單

常見的內(nèi)聯(lián)元素

標(biāo)簽

描述

a

超鏈接

abbr

縮寫

acronym

首字

br

換行

cite

引用

code

計(jì)算機(jī)代碼(在引用源碼的時(shí)候需要)

dfn

定義字段

em

強(qiáng)調(diào)

i

斜體

img

圖片

input

輸入框

kbd

定義鍵盤文本

label

表格標(biāo)簽

q

短引用

s

中劃線(不推薦)

samp

定義范例計(jì)算機(jī)代碼

select

項(xiàng)目選擇

span

常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊

strike

中劃線

strong

粗體強(qiáng)調(diào)

sub

下標(biāo)

sup

上標(biāo)

textarea

多行文本輸入框

u

下劃線

特性區(qū)別

行內(nèi)元素與塊級(jí)元素有什么不同？

區(qū)別一：

塊級(jí)：塊級(jí)元素會(huì)獨(dú)占一行，默認(rèn)情況下寬度自動(dòng)填滿其父元素寬度

行內(nèi)：行內(nèi)元素不會(huì)獨(dú)占一行，相鄰的行內(nèi)元素會(huì)排在同一行。其寬度隨內(nèi)容的變化而變化。

區(qū)別二：

塊級(jí)：塊級(jí)元素可以設(shè)置寬高

行內(nèi)：行內(nèi)元素不可以設(shè)置寬高

區(qū)別三：

塊級(jí)：塊級(jí)元素可以設(shè)置margin，padding

行內(nèi)：行內(nèi)元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。

區(qū)別四：

塊級(jí)：display:block;

行內(nèi)：display:inline;

可以通過修改display屬性來切換塊級(jí)元素和行內(nèi)元素

2.什么是 CSS 繼承? 哪些屬性能繼承，哪些不能？

CSS 繼承：子元素沒有指定值的情況繼承父元素的屬性。

一、無繼承性的屬性

1、display：規(guī)定元素應(yīng)該生成的框的類型

2、文本屬性：

vertical-align：垂直文本對(duì)齊

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、頁(yè)面樣式屬性：size、page-break-before、page-break-after

9、聲音樣式屬性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有繼承性的屬性

1、字體系列屬性

font：組合字體

font-family：規(guī)定元素的字體系列

font-weight：設(shè)置字體的粗細(xì)

font-size：設(shè)置字體的尺寸

font-style：定義字體的風(fēng)格

font-variant：設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會(huì)被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。

font-stretch：對(duì)當(dāng)前的 font-family 進(jìn)行伸縮變形。所有主流瀏覽器都不支持。

font-size-adjust：為某個(gè)元素規(guī)定一個(gè) aspect 值，這樣就可以保持首選字體的 x-height。

2、文本系列屬性

text-indent：文本縮進(jìn)

text-align：文本水平對(duì)齊

line-height：行高

word-spacing：增加或減少單詞間的空白(即字間隔)

letter-spacing：增加或減少字符間的空白(字符間距)

text-transform：控制文本大小寫

direction：規(guī)定文本的書寫方向

color：文本顏色

3、元素可見性：visibility

4、表格布局屬性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局屬性：list-style-type、list-style-image、list-style-position、list-style

6、生成內(nèi)容屬性：quotes

7、光標(biāo)屬性：cursor

8、頁(yè)面樣式屬性：page、page-break-inside、windows、orphans

9、聲音樣式屬性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

三、所有元素可以繼承的屬性

1、元素可見性：visibility

2、光標(biāo)屬性：cursor

四、內(nèi)聯(lián)元素可以繼承的屬性

1、字體系列屬性

2、除text-indent、text-align之外的文本系列屬性

五、塊級(jí)元素可以繼承的屬性

1、text-indent、text-align

3.如何讓塊級(jí)元素水平居中？如何讓行內(nèi)元素水平居中?

塊級(jí)元素水平居中：

margin : 0 auto;

行內(nèi)元素水平居中：

text-align : center;

4.用 CSS 實(shí)現(xiàn)一個(gè)三角形

設(shè)置元素的寬高為0px,設(shè)置四條寬邊，隱藏其他三邊，即可實(shí)現(xiàn)一個(gè)三角形

5.單行文本溢出加 ...如何實(shí)現(xiàn)?

overflow: hidden; //多余的文字變成...

text-overflow: ellipsis; //超過邊框的文字隱藏

white-space: nowrap; //不折行

可以通過上面三條代碼實(shí)現(xiàn)。

6.px, em, rem 有什么區(qū)別

px：像素,固定單位

em：相對(duì)單位，值并不是固定的，會(huì)繼承父級(jí)元素的字體大小，是默認(rèn)字體大小的倍數(shù)。

rem：相對(duì)單位，rem是CSS3新增的一個(gè)相對(duì)單位，相對(duì)的只是HTML根元素，使用它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。

7.解釋下面代碼的作用?為什么要加引號(hào)? 字體里\5b8b\4f53代表什么?

代碼作用：設(shè)置body的字體樣式，字體大小12px,1.5倍行高。后面是五個(gè)字體，用逗號(hào)隔開，如果用戶瀏覽頁(yè)面時(shí)本地沒有第一字體，則由第二字體代替，以此類推，如果都沒有則采用系統(tǒng)默認(rèn)字體。

字體加引號(hào)：加引號(hào)是因?yàn)樽煮w的名字中包含空格，避免瀏覽器解析時(shí)候把它解析成多個(gè)詞匯。

字體里\5b8b\4f53代表：字體里的數(shù)字符號(hào)代表Unicode碼，為了避免直接寫中文的情況下編碼不匹配時(shí)會(huì)產(chǎn)生亂碼的情況，將字體名稱用Unicode來表示。'\5b8b\4f53'就代表宋體。Unicode碼全球通用,

查找字體對(duì)應(yīng)的Unicode碼，可以在開發(fā)者工具輸入escape指令，如圖

%u換成/

總結(jié)

以上是生活随笔為你收集整理的css html 属性区别是什么,css常见属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。