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屬性)
? ??????????