css常見屬性

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

塊級(jí)元素有 div h1 h2 h3 h4 h5 h6 p hr form ul dl ol table li dd dt tr th td

行內(nèi)塊元素:em strong a br img button input label select textarea ?code script

特性(1)塊級(jí)元素獨(dú)占一行,行內(nèi)元素和相鄰的內(nèi)聯(lián)元素占一行

(2)塊級(jí)元素可以包含行內(nèi)元素和塊級(jí)元素,行內(nèi)元素不能包含塊級(jí)別元素

(3)塊級(jí)元素可以設(shè)置寬和高,但是行內(nèi)元素是依據(jù)內(nèi)部的內(nèi)容撐開的,汗內(nèi)元素的寬和高的設(shè)置是無效的

(4)同時(shí)margin和縱向的padding對于行內(nèi)元素也是無效的,塊級(jí)元素可以設(shè)置margin和padding

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

css繼承如父元素設(shè)置了某種屬性如color:white,但是子元素沒有設(shè)置color的屬性,然后子元素就會(huì)從父元素那里繼承該屬性


能繼承的屬性:

所有元素:visibility和cursor

內(nèi)聯(lián)元素可繼承:letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。

終端塊狀元素可繼承:text-indent和text-align。

列表元素可繼承:list-style、list-style-type、list-style-position、list-style-image。

表格元素可繼承:border-collapse。


不能繼承的:

不可繼承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。


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

3.1.行內(nèi)或類行內(nèi)元素(比如文本和鏈接)

在塊級(jí)容器中讓行內(nèi)元素居中,用text-align:center;

(這中方法可以讓 inline/inline-block/inline-table/flex)居中

3.2塊級(jí)元素

設(shè)置margin:0 auto;

具體參考

https://www.w3cplus.com/css/centering-css-complete-guide.html

http://www.w3cplus.com/css/float-center.html



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

https://jsbin.com/fajabidogo/edit?html,css,output

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

P{

white-space:nowrap;//文字不換行

overflow:hidden;//超出部分隱藏

text-overflow:ellipsis;//用。。代替多余的文字

}

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

px是固定單位。

em:是相對單位,相對于父元素字體

rem:相對單位,相對于根元素(html)字體大小

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

設(shè)置了body的font樣式,字體大學(xué)為12px,行高是字體的1.5倍,同時(shí)設(shè)置了一堆的字體,如果第一個(gè)字體么有就找第二個(gè),如果第二個(gè)沒有,則以此類推。

字體加引號(hào)是為了 采用中文或英文字體的時(shí)候有空格,為了識(shí)別清楚,不產(chǎn)生亂碼,所以加了引號(hào)。

\5b8b\4f53是Unicode碼,而且全球通用,也是為了防止在個(gè)別瀏覽器上無法識(shí)別,所以用Unicode來表達(dá)的。


代碼1:https://jsbin.com/difowid/edit?html,css,output

代碼2:https://jsbin.com/tiduji/edit?html,css,output

代碼3:https://jsbin.com/xejixow/edit?html,output

代碼4:在上面已經(jīng)寫了

代碼5:https://jsbin.com/bunosop/edit?html,css,output

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,200評(píng)論 1 92
  • 1.塊級(jí)元素和行內(nèi)元素分別有哪些?動(dòng)手測試并列出4條以上的特性區(qū)別? 基本概念: 一、塊級(jí)元素:block ele...
    FLYSASA閱讀 937評(píng)論 0 0
  • 塊級(jí)元素和行內(nèi)元素例子以及特性 塊級(jí)元素 :所謂塊級(jí)元素就是直觀上占位一行的元素,不能與任何其他元素共同排列在一行...
    losspm閱讀 293評(píng)論 0 0
  • 塊級(jí)元素和行內(nèi)元素分別有哪些 塊級(jí)元素block-level: div、h1/h2/h3.. p form...
    饑人谷_hfz閱讀 301評(píng)論 0 0
  • 整天的雨 招惹多少厭雨的 惆悵 她們不知生活 是洶涌的海洋 總有喜樂和憂傷 有多少記憶滌蕩 如雨的咆哮 也有風(fēng)的嘲...
    此貓會(huì)撓人閱讀 198評(píng)論 2 1

友情鏈接更多精彩內(nèi)容