day04

A今天學(xué)了什么

1.css盒子模型:

content   內(nèi)容
padding   填充
border   邊框
margin   邊界
box-sizing:boder-box
設(shè)置padding和border時余蟹,寬度將保持不變  
box-sizing:  content-box )(默認(rèn)清晰)
 設(shè)置padding和border時奖亚,它的寬度將會改變
盒子的總寬度=width+border+padding

2.float 浮動

目的:是為了讓元素并排顯示
如何清除浮動:
a.給下面的兄弟元素加:clear:both;
b.給父級加:overflow:hidden;
c.用偽元素,給a父級內(nèi)容生成
.row:before{
 display:table; 
 content:""     
}
.row:after{
 display:table;
 content:""
 clear:both;
}

3.position 定位

relative  相對定位
相對定位的元素是相對其正常位置
absolute 絕對定位
絕對定位的元素的位置相對于最近的已定位父元素,如果沒有已定位的父元素箫津,那么它的位置相對于<html>:都通過left,top ,right, bottom來移動
z-index:設(shè)置元素的堆疊順序給position:absolute絕對定位的元素
比如:搜索框
當(dāng)子元素沒有設(shè)置寬度粹污,如果設(shè)置了絕對定位蜕着,它就不會繼承父元素的寬度

4.布局方式的總結(jié)

默認(rèn)布局
浮動布局(左右安置)
定位布局

5.實(shí)現(xiàn)元素的垂直水平居中

父元素設(shè)置
parent{position:relative;}
子元素設(shè)置
child{
position:absolute;left:50%; top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}

6.拓展知識

p*10表示有10個p標(biāo)簽
p{abc}*10表示有10個<p>abc</p>標(biāo)簽
p{$$}*10表示有10個<p>01</p>~<p>10</p>標(biāo)簽
p.text#id${}*10<p class="text1" id="id1">01</p>~<p class="text10" id="id10">10</p>
ul >li*10=<ul>
里面有10個li
<ul>

7.拓展選擇器

選擇第一個子元素
div>p:first-child{}  選擇div里面第一個子元素
選擇最后一個子元素
div>p:last-child{}  選擇div里面最后一個子元素
選擇某一個子元素
ul li:nth-child(index)  even為偶數(shù) odd奇數(shù)
不選中某個
:not(selector)

B我掌握好的地方

1.css盒子模型:

content   內(nèi)容
padding   填充
border   邊框
margin   邊界
box-sizing:boder-box
設(shè)置padding和border時僵蛛,寬度將保持不變  
box-sizing:  content-box )(默認(rèn)清晰)
 設(shè)置padding和border時,它的寬度將會改變
盒子的總寬度=width+border+padding

5.實(shí)現(xiàn)元素的垂直水平居中

父元素設(shè)置
parent{position:relative;}
子元素設(shè)置
child{
position:absolute;left:50%; top:50%;
margin-left:-50%*child*width;
margin-top:-50%*child*height;
}

6.拓展知識

p*10
=10個p標(biāo)簽
p{abc}*10
=10個<p>abc</p>標(biāo)簽
p{$$}*10
=<p>01</p>~<p>10</p>標(biāo)簽
p.text#id${}*10
=<p class="text" id="id01">01</p>~<p class="text" id="id10">10</p>
p.text#id${$$}*10>a[href=""]
=<p class="text" id="id1">01<a href=""></a></p>~<p class="text" id="id10">10<a href=""></a></p>
ul >li*10=<ul>
里面有10個li
<ul>

7.拓展選擇器

選擇第一個子元素
div>p:first-child{}  選擇div里面第一個子元素
選擇最后一個子元素
div>p:last-child{}  選擇div里面最后一個子元素
選擇某一個子元素
ul li:nth-child(index)  even為偶數(shù) odd奇數(shù)
不選中某個
:not(selector)

C我掌握不好的地方

都掌握了
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末瑟幕,一起剝皮案震驚了整個濱河市磕蒲,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌收苏,老刑警劉巖亿卤,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異鹿霸,居然都是意外死亡排吴,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進(jìn)店門懦鼠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來钻哩,“玉大人,你說我怎么就攤上這事肛冶〗智猓” “怎么了?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵睦袖,是天一觀的道長珊肃。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么伦乔? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任厉亏,我火速辦了婚禮,結(jié)果婚禮上烈和,老公的妹妹穿的比我還像新娘爱只。我一直安慰自己,他們只是感情好招刹,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布恬试。 她就那樣靜靜地躺著,像睡著了一般疯暑。 火紅的嫁衣襯著肌膚如雪训柴。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天缰儿,我揣著相機(jī)與錄音畦粮,去河邊找鬼。 笑死乖阵,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的预麸。 我是一名探鬼主播瞪浸,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼吏祸!你這毒婦竟也來了对蒲?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤贡翘,失蹤者是張志新(化名)和其女友劉穎蹈矮,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鸣驱,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡泛鸟,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了踊东。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片北滥。...
    茶點(diǎn)故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖闸翅,靈堂內(nèi)的尸體忽然破棺而出再芋,到底是詐尸還是另有隱情,我是刑警寧澤坚冀,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布济赎,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏司训。R本人自食惡果不足惜构捡,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望豁遭。 院中可真熱鬧叭喜,春花似錦、人聲如沸蓖谢。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽闪幽。三九已至啥辨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間盯腌,已是汗流浹背溉知。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留腕够,地道東北人级乍。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像帚湘,于是被迫代替她去往敵國和親玫荣。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評論 2 361

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案大诸? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,762評論 1 92
  • 收聽音頻,戳鏈接,舊號itclan已暫停使用,歡迎關(guān)注微信itclanCoder公眾號可收聽更多音頻 前言 關(guān)于網(wǎng)...
    itclanCoder閱讀 8,191評論 3 30
  • A我今天學(xué)習(xí)到了什么 1溫習(xí)day03的知識點(diǎn) 1.1css背景 1.2.css文本 1.3.css字體 1.4....
    塵榆騾厭閱讀 147評論 2 0
  • 1捅厂、css盒子模型 1.1:box-sizing:border-box 1.2實(shí)現(xiàn)元素居中 2、浮動float 3...
    陳夢晴閱讀 291評論 0 0
  • 想起前天在知乎看愛情的本質(zhì)的一個問題资柔,有個答案將愛的感覺焙贷,感情,愛情贿堰,喜歡進(jìn)行對比時說到: 感覺是對對方優(yōu)勢而產(chǎn)生...
    BiuBiuBiu日常閱讀 217評論 0 0