盒模型宽度和高度

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

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

QQ截图20161011160536.png


元素的高度也是同理。

比如:

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浏览器下可查看元素盒模型,如下图:

 

 QQ截图20161011160553.png

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>宽度和高度</title>
<style type="text/css">
li{
    border-bottom:1px dotted #ccc;
    width:200px;height:30px;
}
</style>
</head>
<body>
<ul>
    <li>别让不会说话害了你</li>
    <li>二十七八岁就应该有的见识</li>
    <li>别让不好意思害了你</li>
</ul>
</body>
</html>


继续学习
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>宽度和高度</title> <style type="text/css"> li{ border-bottom:1px dotted #ccc; width:200px;height:30px; } </style> </head> <body> <ul> <li>别让不会说话害了你</li> <li>二十七八岁就应该有的见识</li> <li>别让不好意思害了你</li> </ul> </body> </html>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

弹指间学会HTML+CSS

高并发千万级数据库系统解决方案
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载

扔个三星炸死你

说的觉得还行就是没怎么懂

7年前    添加回复 0

这是啥

不是很明白

7年前    添加回复 0

你的名字

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

7年前    添加回复 0

城堡下的诡洞

盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的

7年前    添加回复 0

baby不要哭泣

margin-right 右边界 padding-right 有填充

7年前    添加回复 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~