慕课网

长胖长高点--宽度和高度

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。

因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

元素的高度也是同理。

比如：

css代码：

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

html代码：

<body>
   <div>文本内容</div>
</body>

元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：

我来试一试：

为列表每一项宽度设置为200px，高度为30px

（上一节中的列表项长度为什么这么长啊，不明白同学是不是应该看一看标签分类那一小节，li是块状元素，块状元素有一个特点之一：在不设置宽度的情况下，显示为父容器的100%。）

?不会了怎么办

在右边编辑器的第10-11行，输入下列代码：

width:200px;
height:30px;

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求