HTML&CSS(Day02)

1瓶殃、盒子模型

1-1:div元素的引出

1-2:盒子模型的五個(gè)主要元素:width、height蓝谨、padding、border、margin

????width:內(nèi)容的寬度晒杈。CSS中 width 指的是內(nèi)容的寬度污桦,而不是盒子的寬度躲惰。盒子的寬度=內(nèi)容寬度? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?+padding+border? ??

? ?height:內(nèi)容的高度击儡。CSS中 height 指的是內(nèi)容的高度,而不是盒子的高度。盒子的高度=內(nèi)容高度? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? +padding+border

? ?padding:內(nèi)邊距儒飒。

? ?border:邊框送悔。

? ?margin:外邊距

1-3:盒子的邊框?qū)傩裕?/p>

? ? 1-3-1:邊框樣式(border-style):? ?實(shí)線祠丝,虛線等岸蜗。。枚冗。。

? ? 1-3-2:邊框粗細(xì)(border-width)

? ? 1-3-3:邊框顏色(border-color)

? ? 1-3-4:border的簡(jiǎn)寫(xiě):(顏色更啄、粗細(xì)和樣式)border:9px #F00 dashed

? ? 1-3-5:內(nèi)邊距(padding)

? ? 1-3-6:外邊距(margin)

1-4:盒子模型尺寸計(jì)算:

? ? 1-4-1:高度=內(nèi)容寬度+邊框高度+內(nèi)邊距

? ? ? ? ? ? ? ? 寬度=內(nèi)容寬度+邊框?qū)挾?內(nèi)邊距

? ? 1-4-2:默認(rèn)樣式

? ? 1-4-3:元素分類(lèi)(行級(jí)元素赂鲤,塊級(jí)元素梗顺,內(nèi)聯(lián)塊元素)

? ? ? ? ? ? ? ? 行級(jí)元素:1.默認(rèn)同行可以繼續(xù)跟同類(lèi)型標(biāo)簽(a获列,strong鹏漆,em)

????????????????????????????????????2.內(nèi)容撐開(kāi)寬度

????????????????????????????????????3.不支持寬高

????????????????????????????????????4.不支持上下的margin

? ? ? ? ? ? ? ? ? ?塊級(jí)元素:(p,div,h1-h6,ol,ul)

? ??????????????????????????????1.默認(rèn)獨(dú)占一行顯示

????????????????????????????????2.沒(méi)有寬度時(shí)创泄,默認(rèn)撐滿(mǎn)一排

????????????????????????????????3.支持所有css命令

? ? ? ? ? ? ? ? ? 內(nèi)聯(lián)塊元素:(img括蝠,input)

? ??????????????????????????????1、和其他元素都在一行上搁拙;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2法绵、元素的高度箕速、寬度朋譬、行高以及頂和底邊距都可設(shè)置

? ? ? ? 1-4-4:如何設(shè)置?(display屬性)

? ??????????

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末庭呜,一起剝皮案震驚了整個(gè)濱河市犀忱,隨后出現(xiàn)的幾起案子募谎,更是在濱河造成了極大的恐慌阴汇,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,657評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件拐纱,死亡現(xiàn)場(chǎng)離奇詭異哥倔,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)咆蒿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén)窍育,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)丹锹,“玉大人馏谨,你說(shuō)我怎么就攤上這事附迷“ッ模” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,057評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵抄伍,是天一觀的道長(zhǎng)管宵。 經(jīng)常有香客問(wèn)我攀甚,道長(zhǎng),這世上最難降的妖魔是什么秋度? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,509評(píng)論 1 293
  • 正文 為了忘掉前任荚斯,我火速辦了婚禮,結(jié)果婚禮上事期,老公的妹妹穿的比我還像新娘。我一直安慰自己兽泣,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布称鳞。 她就那樣靜靜地躺著稠鼻,像睡著了一般。 火紅的嫁衣襯著肌膚如雪候齿。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 51,443評(píng)論 1 302
  • 那天怨咪,我揣著相機(jī)與錄音润匙,去河邊找鬼。 笑死孕讳,一個(gè)胖子當(dāng)著我的面吹牛巍膘,可吹牛的內(nèi)容都是我干的芋簿。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼肪康,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了磷支?” 一聲冷哼從身側(cè)響起食寡,我...
    開(kāi)封第一講書(shū)人閱讀 39,129評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎善榛,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體移盆,經(jīng)...
    沈念sama閱讀 45,561評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡擂错,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評(píng)論 3 335
  • 正文 我和宋清朗相戀三年钮呀,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了剑鞍。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片爽醋。...
    茶點(diǎn)故事閱讀 39,902評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖光戈,靈堂內(nèi)的尸體忽然破棺而出遂赠,到底是詐尸還是另有隱情久妆,我是刑警寧澤跷睦,帶...
    沈念sama閱讀 35,621評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站烂琴,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏奸绷。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評(píng)論 3 328
  • 文/蒙蒙 一反症、第九天 我趴在偏房一處隱蔽的房頂上張望扣癣。 院中可真熱鬧惰帽,春花似錦父虑、人聲如沸授药。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,838評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至笨蚁,卻和暖如春趟庄,著一層夾襖步出監(jiān)牢的瞬間括细,已是汗流浹背戚啥。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,971評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留览濒,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,025評(píng)論 2 370
  • 正文 我出身青樓贷笛,卻偏偏與公主長(zhǎng)得像宙项,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子杉允,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評(píng)論 2 354

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

  • 一、CSS入門(mén) 1拢驾、css選擇器 選擇器的作用是“用于確定(選定)要進(jìn)行樣式設(shè)定的標(biāo)簽(元素)”。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,595評(píng)論 0 6
  • 其實(shí)咖为,CSS就三個(gè)大模塊: 盒子模型 稠腊、 浮動(dòng) 躁染、 定位架忌,其余的都是細(xì)節(jié)。要求這三部分叹放,無(wú)論如何也要學(xué)的非常精通...
    王玉偉的偉閱讀 1,126評(píng)論 0 2
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類(lèi)選擇器 屬性選擇器 繼承屬性: color,font埋嵌,text-align,li...
    love2013閱讀 2,314評(píng)論 0 11
  • 概述 在網(wǎng)易云課堂學(xué)習(xí)李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺(tái)開(kāi)發(fā)》時(shí)雹嗦,所整理的筆記合是。筆記內(nèi)容為根據(jù)個(gè)人需求所...
    墨荀閱讀 2,336評(píng)論 0 7
  • 什么是盒子? CSS處理網(wǎng)頁(yè)時(shí)捶惜,它認(rèn)為每個(gè)元素都包含在一 個(gè)不可見(jiàn)的盒子里。 我們只需要將相應(yīng)的盒子擺放到網(wǎng)頁(yè)中相...
    咻咻咻滴趙大妞閱讀 918評(píng)論 0 0