????
????盒子模型-練習
????
???????<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>盒子模型-練習</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打出來的，但是在右邊總是有那么一小點突出，怎么將那兩條線合并？還有為什么要將寬度.content的寬度從770減到740并且將圖片.img的左右margin從18減到15才能勉強達成目標？視頻在http://www.xianlaiwan.cn/video/1331，而且視頻中老師最后將770直接減到700才達成目標，這是為什么
2 回答
已采納
菜鳥一一只
TA貢獻4條經驗 獲得超1個贊
第一個問題 為什么寬度明明相同了 確還是沒合并?怎么合并?
答:1.之所以沒合并是所有元素初始設置時瀏覽器都添加了默認的margin 或padding值的
2.怎么合并吶? 此時只需要，加上下面這句就可以刪除瀏覽器這些默認值，方面后面的設置。（注：不是沒它不行，只是方便而已）
*{
margin: 0 ;
padding: 0 ;
}
或者
body{
margin: 0 ;
padding: 0 ;
}
第一種方法不建議使用
第二和第三個是同一個問題就一起說了
理解時請結合下圖標注的紅色數字理解
你應該是疑惑明明設置了.center的寬度為770 (跟背景圖的寬度770一致了) 怎么還會存在空隙,兩者無法合并對吧也就是我圖上那種情況 我背景圖寬度510 代碼也設置寬度 width 為510了 怎么還是有空隙吶
呵呵,簡單說 你把概念混淆了 ?***************盒子尺寸 并不是 width 哈*************
盒子尺寸是: margin X 2 +padding X 2 + border X 2 +width?
所以才有了圖片 ① 中 寬度為 548 而不是510?
說的有些啰嗦了 不知道你看懂沒?不懂的話 建議回顧下?
HTML+CSS基礎課程
中的盒模型 視頻地址?http://www.xianlaiwan.cn/video/3225
純手動 求采納
-
愛逗貓的魚你說的我還是有點迷糊， 第一：*{ margin: 0 ; padding: 0 ; } 這一句的實際用途是消除內外邊距，方便自己以后設置對吧？ 第二：為什么我將congtent的width設定了后還能拉長呢？這是不是因為我的padding設置為15，所以盒子content的實際長度是770+15*2+4*2=808呢？ 第三:當我將width變為740的時候，也就是直接減掉content的左右padding時，右邊的兩條邊一長一短看上去是貼在一起的，而不是長邊覆蓋短邊，并且這么改動的話，有一張圖片會直接掉到第二層上面.這是為什么呢？我算了算6張圖片的長度加上對圖片設置的外邊距和邊框的寬度都加起來也就618，而且因為一開始就將內外邊距取消，所以也沒有內外邊距的干擾，但卻出現這個現象是為什么？ 求大神解惑，謝謝！
- 2 回答
- 0 關注
- 2264 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消