亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

看到問答里很多人說width和height是內容的寬度/高度?

我試著寫了幾個頁面,width和height明明就是盒子的寬度和高度啊。如圖所示

<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>內聯塊狀元素</title>
<style?type="text/css">
div{background:pink;border:red?solid?2px;height:80px;width:80px;}
span{background:blue;}
</style>
</head>
<body>
<div><span>這是什么</span></div>

</body>
</html>

http://img1.sycdn.imooc.com//5850ebb000012f3803120249.jpg

正在回答

3 回答

整個盒子分四層 一層套一層 最內層橫向是 withd(寬度)然后padding (內邊距)border(邊框)最外面是margin(頁邊的空白)


1 回復 有任何疑惑可以回復我~
#1

白石青 提問者

為什么我設置width=80px,盒子就變成這個寬度了?如果這是內容的寬度,那盒子為什么要變呢?
2016-12-14 回復 有任何疑惑可以回復我~
#2

慕粉091628941 回復 白石青 提問者

盒子的寬度是4個值相加的 比如一個盒子全部的寬度是withd(80)+padding(10)+{border(10)就是你紅色的那個邊}+{margin(10)空白到網頁邊緣的部分}=全部的寬度110
2016-12-14 回復 有任何疑惑可以回復我~
#3

白石青 提問者 回復 慕粉091628941

恩,當我去掉width=80px的時候,相當于沒設置這個內容寬度,此時為什么盒子寬度(邊框顯示)是整個屏幕的寬度呢?
2016-12-14 回復 有任何疑惑可以回復我~
#4

慕粉091628941 回復 白石青 提問者

你要是懂了 點個贊唄 不懂再問
2016-12-14 回復 有任何疑惑可以回復我~
#5

慕粉091628941 回復 白石青 提問者

這和你的div有關 當你不對它進行設置的時候 它就是默認的值 你的那個BUFF是加給div的 不加特殊BUFF 它就是原始狀態
2016-12-14 回復 有任何疑惑可以回復我~
#6

白石青 提問者 回復 慕粉091628941

有點懂了,還有一點,https://zhidao.baidu.com/question/424186701.html 這個采納回答里說的設置div寬度,是不是通常意義的div寬度而不是"實際寬度"?
2016-12-14 回復 有任何疑惑可以回復我~
#7

慕粉091628941 回復 白石青 提問者

指的就是withd的值啊 但是外面還有三層
2016-12-14 回復 有任何疑惑可以回復我~
#8

白石青 提問者 回復 慕粉091628941

了解了,外面三層我能理解就沒寫出來。謝謝。
2016-12-14 回復 有任何疑惑可以回復我~
查看5條回復

同學我對你的建業:別人給你的答案是供你參考,真真能夠提升理解程度只用靠自己。把網頁上的東西抄一遍告訴你,還不如自己打開盒模型作業多看看。

0 回復 有任何疑惑可以回復我~
#1

白石青 提問者

我就是自己寫了頁面,又看了一些人的回答,不太理解才來提問嘛。希望能被指點清楚,自己死琢磨怕鉆牛角尖。
2016-12-14 回復 有任何疑惑可以回復我~

這個代碼是最基礎的代碼,去掉了padding和margin。在實際的項目中一個頁面的盒模型是很多的,沒有了padding和margin那頁面將非常的亂

0 回復 有任何疑惑可以回復我~
#1

白石青 提問者

答非所問
2016-12-14 回復 有任何疑惑可以回復我~
#2

大澗澗dry

我的意思:第一:你不應該只寫一個盒模型,寫至少2個觀察一下,你才能理解什么是盒模型,已經他是如何受width,height,border,padding,margin控制的。第二:你所謂的內容其實是盒模型的一部分。真正的內容是盒子內部元素:比如,img,p,h1,等等
2016-12-14 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

看到問答里很多人說width和height是內容的寬度/高度?

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號