看到问答里很多人说width和height是内容的宽度/高度?

来源:12-6 变个盒子-什么是盒模型(视频)

白石青

2016-12-14 14:50

我试着写了几个页面,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://img.mukewang.com/5850ebb000012f3803120249.jpg

写回答 关注

3回答

  • 慕粉091628941
    2016-12-14 14:59:57
    已采纳

    整个盒子分四层 一层套一层 最内层横向是 withd(宽度)然后padding (内边距)border(边框)最外面是margin(页边的空白)


    白石青 回复慕粉0916...

    了解了,外面三层我能理解就没写出来。谢谢。

    2016-12-14 15:36:37

    共 8 条回复 >

  • 大涧涧dry
    2016-12-14 15:28:37

    同学我对你的建业:别人给你的答案是供你参考,真真能够提升理解程度只用靠自己。把网页上的东西抄一遍告诉你,还不如自己打开盒模型作业多看看。

    白石青

    我就是自己写了页面,又看了一些人的回答,不太理解才来提问嘛。希望能被指点清楚,自己死琢磨怕钻牛角尖。

    2016-12-14 15:32:29

    共 1 条回复 >

  • 大涧涧dry
    2016-12-14 15:02:19

    这个代码是最基础的代码,去掉了padding和margin。在实际的项目中一个页面的盒模型是很多的,没有了padding和margin那页面将非常的乱

    大涧涧dry

    我的意思:第一:你不应该只写一个盒模型,写至少2个观察一下,你才能理解什么是盒模型,已经他是如何受width,height,border,padding,margin控制的。第二:你所谓的内容其实是盒模型的一部分。真正的内容是盒子内部元素:比如,img,p,h1,等等

    2016-12-14 15:18:41

    共 2 条回复 >

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1225309 学习 · 18230 问题

查看课程

相似问题