VIP10-12月2日日作業(yè):CSS常見屬性

問題一:塊級元素和行內(nèi)元素分別有哪些?動手測試并列出4條以上的特性區(qū)別

  • 塊級元素和行內(nèi)元素分別由哪些?
    1、塊級元素:div;h1~h6;p;hrform;ul;dl;ol;pre;tableli;dd;dt;tr;td;th
    2、行內(nèi)元素:em;strong;span;a;br;img;button;iput;label;select;textareacode;script
  • 動手測試并列出4條以上特性區(qū)別
    1.塊級元素可以包含文本,塊級,行內(nèi)元素,而行內(nèi)元素只能包含文本和行內(nèi)元素;
塊元素的寬度占據(jù)父容器整行,行元素占據(jù)本身.png

2.塊級元素單獨占據(jù)一整行,行內(nèi)元素占據(jù)的位置只有自身文本寬度的空間;

塊元素的width和height 可調(diào),而行元素的寬高不可調(diào),只決定于行元素的內(nèi)容.png

3.塊級元素可以設(shè)置寬高,行內(nèi)元素設(shè)置寬高無效;

塊元素能容納塊元素和行內(nèi)元素,而行元素只能容納文本和其他行內(nèi)元素.png

4.塊級元素的padding,margin值設(shè)置有效,行內(nèi)元素padding,margin上下的值設(shè)置無效,但左右有效;

4.png

問題二:什么是 CSS 繼承? 哪些屬性能繼承,哪些不能?

  • 什么是CSS繼承?
    答:繼承就是子元素繼承了父元素的CSS樣式的屬性
  • 什么屬性能繼承?
    1.字體:family,size,weight,line-height
    2.文本:letter-spacing,word-spacing,text-align, text-indent
    3.列表:list-style-type
    4.顏色:color,ps:a標簽不能繼承父元素的字體顏色,原因是a標簽自己有默認字體顏色,會覆蓋掉- 繼承自父元素的字體顏色;
  • 什么屬性不能被繼承?
    1.display
    2.float
    3.padding和margin
    4.背景相關(guān),比如顏色圖片等

問題三:用 CSS 實現(xiàn)一個三角形

三角.png

問題四:單行文本溢出加...如何實現(xiàn)?

小圓點.png

1、white-space:nomal;:設(shè)置文本不換行;
2、overflow:hidden;:設(shè)置文本溢出隱藏;
3、text-overflow:ellipsis: 設(shè)置溢出部分顯示為"...”

問題五:px, em, rem 有什么區(qū)別?

  • px 像素的單位,當使用px來規(guī)定字體的大小時,那么該字體的大小就是規(guī)定的大小,不會改變。
  • em 相對于父元素字體大小的倍數(shù)。
  • rem 相對于根元素字體大小的倍數(shù)。

問題六:解釋下面代碼的作用?為什么要加引號? 字體里的數(shù)字符號代表什么?

body{
  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB','\5b8b\4f53',sans-serif;
}

這段代碼的作用是:

  • 代碼的作用:將body元素設(shè)置字體的大小是12px(Chrome瀏覽器最小字體為12px),行高是字體大小的1.5倍,其中的字體待選為:tahoma字體,arial字體,Hiragino Sans GB字體,'\5b8b\4f53',sans-serif字體這幾種,瀏覽器查找用戶的字體庫,如果有第一種就使用第一種,如果沒有查找第二種,以此類推。
  • 添加引號的原因:加引號是因為字體的名字中包含空格,避免瀏覽器解析時候把它解析成多個詞匯。
  • 字體里的數(shù)字符號代表Unicode碼,為了避免直接寫中文的情況下編碼不匹配時會產(chǎn)生亂碼的情況,將字體名稱用Unicode來表示。'\5b8b\4f53'就代表宋體。

問題七:實現(xiàn)如下效果:card

問題八:實現(xiàn)如下頁面:頁面

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

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,096評論 1 92
  • 1.塊級元素和行內(nèi)元素 塊級(block-level)元素;行內(nèi)(內(nèi)聯(lián)、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,190評論 1 4
  • 本文主要是起筆記的作用,內(nèi)容來自慕課網(wǎng). 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,748評論 0 30
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 2,037評論 0 6
  • 夜來偏做尋常夢,天曉自生無限情。 遙想此身多少事,已行世路萬千程。 為誰還得爭先進,對此無須落后名。 本是當時寂寥...
    雪窗_武立之閱讀 491評論 0 8

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