CSS的常見樣式(1)

1.塊級(jí)元素和行內(nèi)元素分別有哪些铡原?動(dòng)手測(cè)試并列出幾條不同的地方碍扔。

  • 塊級(jí)元素block:
<p>,<div>,<form>,<ul>,<ol>,<li>,<table>,<tr>,<td>,<th>,<hx>,<hr/>
  • 行內(nèi)元素inline:
<em>,<strong>,<span>,<img>,<input>,<select>,<textarea>,<label>,<a>
  • 行內(nèi)元素和塊狀元素的區(qū)別:
    • 塊狀元素可以包含塊狀元素和行內(nèi)元素,但是行內(nèi)元素只能包含行內(nèi)元素撑教。

    • 塊狀元素獨(dú)占一行凌停,行內(nèi)元素只占據(jù)他本身大小。

    • 塊狀元素可以設(shè)置width,height圈盔。行內(nèi)元素不能設(shè)置高寬豹芯。

    • 塊狀元素的可以設(shè)置margin,padding;行內(nèi)元素設(shè)置的margin-top和margin-bottom不生效,padding-top和padding-bottom看上去會(huì)撐開行內(nèi)元素驱敲,但是本身位置并沒(méi)有變大铁蹈。

我設(shè)置的span
span的padding,margin

2.什么是CSS繼承,哪些可以繼承众眨,哪些不可以繼承握牧。

  • CSS的繼承指的是子元素在不設(shè)置樣式的時(shí)候,采用父元素設(shè)置的樣式娩梨。

  • 可以繼承的屬性有: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流礁、list-style涕俗、list-style-type、list-style-position神帅、list-style-image再姑、text-indent和text-align

  • 不可以繼承的屬性: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.如何讓塊狀元素水平居中审葬?如何讓行內(nèi)元素水平居中。

  • 塊狀元素的水平居中:

    • margin:0 auto;
      對(duì)于不定寬塊狀元素可以使用這種方法奕谭,讓他自適應(yīng)元素父元素寬度涣觉,水平居中。
1
  • 絕對(duì)定位加負(fù)margin(margin:0 auto;)的方法血柳。
2
  • 絕對(duì)定位加transform法官册,或者直接transform方法。
3
  • 彈性盒子方法难捌。
    為父元素設(shè)置display:flex;
4
最終效果展示

參考:http://www.w3school.com.cn/cssref/pr_transform.asp

  • 行內(nèi)元素水平居中的方法膝宁。

    直接為父元素設(shè)置text-align:center;

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

用CSS實(shí)現(xiàn)三角形,原理是利用border的顯示效果根吁,配合transparent;

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

屬性text-overflow的值設(shè)置為text-overflow:ellipsis;

http://www.w3school.com.cn/cssref/pr_text-overflow.asp

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

  • px,相對(duì)長(zhǎng)度單位击敌。像素px是相對(duì)于顯示器屏幕分辨率而言的介返。但是不適合做響應(yīng)式或者移動(dòng)端設(shè)計(jì),不支持縮放。

  • em,相對(duì)單位圣蝎,相對(duì)于父元素設(shè)置的字體大小刃宵。由于可能實(shí)際開發(fā)中有多層嵌套,換算較為麻煩徘公,支持縮放组去。

  • rem,相對(duì)長(zhǎng)度單位步淹,但是是相對(duì)于html的根元素來(lái)?yè)Q算从隆,不用多次換算,支持縮放缭裆。較為推薦使用做移動(dòng)端或響應(yīng)式開發(fā)键闺。

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

圖片

字體大小為12px,行高為字體的大小的1.5倍澈驼。從左到右辛燥,依次查詢字體,沒(méi)有第一種就加載第二種缝其,以此類推挎塌,直到瀏覽器默認(rèn)字體。

引號(hào)代表的是字符串内边,因?yàn)橹虚g有空格榴都,如果沒(méi)有查詢到這種字體可能加載出來(lái)的就是亂碼,字體中\(zhòng)5b8b\4f53代表的"宋體"unicode碼漠其,也是為了防止瀏覽器沒(méi)有查到中文的宋體嘴高,直接采用unicode碼比較靠譜。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末和屎,一起剝皮案震驚了整個(gè)濱河市拴驮,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌柴信,老刑警劉巖套啤,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異随常,居然都是意外死亡潜沦,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門线罕,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)止潮,“玉大人,你說(shuō)我怎么就攤上這事钞楼。” “怎么了袄琳?”我有些...
    開封第一講書人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵询件,是天一觀的道長(zhǎng)燃乍。 經(jīng)常有香客問(wèn)我,道長(zhǎng)宛琅,這世上最難降的妖魔是什么刻蟹? 我笑而不...
    開封第一講書人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮嘿辟,結(jié)果婚禮上舆瘪,老公的妹妹穿的比我還像新娘。我一直安慰自己红伦,他們只是感情好英古,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著昙读,像睡著了一般召调。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蛮浑,一...
    開封第一講書人閱讀 49,829評(píng)論 1 290
  • 那天唠叛,我揣著相機(jī)與錄音,去河邊找鬼沮稚。 笑死艺沼,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蕴掏。 我是一名探鬼主播澳厢,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼囚似!你這毒婦竟也來(lái)了剩拢?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤饶唤,失蹤者是張志新(化名)和其女友劉穎徐伐,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體募狂,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡办素,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了祸穷。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片性穿。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖雷滚,靈堂內(nèi)的尸體忽然破棺而出需曾,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布商源,位于F島的核電站,受9級(jí)特大地震影響谋减,放射性物質(zhì)發(fā)生泄漏牡彻。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一出爹、第九天 我趴在偏房一處隱蔽的房頂上張望庄吼。 院中可真熱鬧,春花似錦严就、人聲如沸总寻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)徒坡。三九已至侦讨,卻和暖如春拗军,著一層夾襖步出監(jiān)牢的瞬間钦奋,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工袒炉, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留旁理,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓我磁,卻偏偏與公主長(zhǎng)得像孽文,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子夺艰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案芋哭? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評(píng)論 1 92
  • 一 外部式css樣式 (也可稱為外聯(lián)式)就是把css代碼寫一個(gè)單獨(dú)的外部文件中,這個(gè)css樣式文件以“.css...
    KunMitnic閱讀 931評(píng)論 0 1
  • CSS格式化排版 1郁副、字體 我們可以使用css樣式為網(wǎng)頁(yè)中的文字設(shè)置字體减牺、字號(hào)、顏色等樣式屬性存谎。下面我們來(lái)看一個(gè)例...
    張文靖同學(xué)閱讀 1,281評(píng)論 0 3
  • 本文主要是起筆記的作用拔疚,內(nèi)容來(lái)自慕課網(wǎng). 認(rèn)識(shí)CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,630評(píng)論 0 30
  • 本課來(lái)自http://www.imooc.com/learn/9請(qǐng)不要用作商業(yè)用途。 HTML5 HTML介紹 H...
    PYLON閱讀 3,210評(píng)論 0 5