????
????盒子模型-練習(xí)
????
???????<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>盒子模型-練習(xí)</title>
????<style?type="text/css">
????????*{
????????????padding:?0px;
????????????margin:?0px;
????????}
????????img
?{
????????????border:1px?solid?#BADBDB;
????????????margin:10px?15px;
????????}
????????.content
?{
????????????border:?4px?solid?#BADBDB;
????????????width:?740px;
????????????background:url("./picture/t_book.gif")?no-repeat;
????????????background-color:?#EFF9F9;
????????????padding:?44px?15px?15px;
????????}
????</style>
</head>
<body>
<div?class="content">
????<img?src=".\picture\book1.jpg"?width="80px"?height="80px">
????<img?src=".\picture\book2.jpg"?width="80px"?height="80px">
????<img?src=".\picture\book3.jpg"?width="80px"?height="80px">
????<img?src=".\picture\book4.jpg"?width="80px"?height="80px">
????<img?src=".\picture\book5.jpg"?width="80px"?height="80px">
????<img?src=".\picture\book6.jpg"?width="80px"?height="80px">
</div>
</body>
</html>這是我用Webstorm打出來的，但是在右邊總是有那么一小點(diǎn)突出，怎么將那兩條線合并？還有為什么要將寬度.content的寬度從770減到740并且將圖片.img的左右margin從18減到15才能勉強(qiáng)達(dá)成目標(biāo)？視頻在http://idcbgp.cn/video/1331，而且視頻中老師最后將770直接減到700才達(dá)成目標(biāo)，這是為什么
2 回答
已采納
菜鳥一一只
TA貢獻(xiàn)4條經(jīng)驗(yàn) 獲得超1個贊
第一個問題 為什么寬度明明相同了 確還是沒合并?怎么合并?
答:1.之所以沒合并是所有元素初始設(shè)置時瀏覽器都添加了默認(rèn)的margin 或padding值的
2.怎么合并吶? 此時只需要，加上下面這句就可以刪除瀏覽器這些默認(rèn)值，方面后面的設(shè)置。（注：不是沒它不行，只是方便而已）
*{
margin: 0 ;
padding: 0 ;
}
或者
body{
margin: 0 ;
padding: 0 ;
}
第一種方法不建議使用
第二和第三個是同一個問題就一起說了
理解時請結(jié)合下圖標(biāo)注的紅色數(shù)字理解
你應(yīng)該是疑惑明明設(shè)置了.center的寬度為770 (跟背景圖的寬度770一致了) 怎么還會存在空隙,兩者無法合并對吧也就是我圖上那種情況 我背景圖寬度510 代碼也設(shè)置寬度 width 為510了 怎么還是有空隙吶
呵呵,簡單說 你把概念混淆了 ?***************盒子尺寸 并不是 width 哈*************
盒子尺寸是: margin X 2 +padding X 2 + border X 2 +width?
所以才有了圖片 ① 中 寬度為 548 而不是510?
說的有些啰嗦了 不知道你看懂沒?不懂的話 建議回顧下?
HTML+CSS基礎(chǔ)課程
中的盒模型 視頻地址?http://idcbgp.cn/video/3225
純手動 求采納
-
愛逗貓的魚你說的我還是有點(diǎn)迷糊， 第一：*{ margin: 0 ; padding: 0 ; } 這一句的實(shí)際用途是消除內(nèi)外邊距，方便自己以后設(shè)置對吧？ 第二：為什么我將congtent的width設(shè)定了后還能拉長呢？這是不是因?yàn)槲业膒adding設(shè)置為15，所以盒子content的實(shí)際長度是770+15*2+4*2=808呢？ 第三:當(dāng)我將width變?yōu)?40的時候，也就是直接減掉content的左右padding時，右邊的兩條邊一長一短看上去是貼在一起的，而不是長邊覆蓋短邊，并且這么改動的話，有一張圖片會直接掉到第二層上面.這是為什么呢？我算了算6張圖片的長度加上對圖片設(shè)置的外邊距和邊框的寬度都加起來也就618，而且因?yàn)橐婚_始就將內(nèi)外邊距取消，所以也沒有內(nèi)外邊距的干擾，但卻出現(xiàn)這個現(xiàn)象是為什么？ 求大神解惑，謝謝！
添加回答
舉報(bào)
0/150
提交
取消