为了账号安全,请及时绑定邮箱和手机立即绑定

看到问答里很多人说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下载
官方微信