Box Model

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"> 

<title>Box Model</title>

<style>

div.ex

{

width:220px;

padding:50px;

border:20px solid gray;

margin:50px;

border-style:dotted;

outline:#00FF00 dotted thick;

}

</style>

</head>

<body>

<img src="250x250px.gif" width="250" height="250" />

<div class="ex">上面的图片是250 px宽。

这个元素的总宽度也是250 px。</div>

</body>

</html>

F12 打开浏览器去观察

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 「译」CSS盒子模型 The Box Model
    Introduction to the Box Model 浏览器载入HTML element时会带有默认的位置的...
    我是真的YTR阅读 4,483评论 0赞 1
  • css2 - Box model
    css1 formating model 在css2中分成了 box model 与 Visual forma...
    刘程源阅读 1,813评论 0赞 0
  • Box model
    盒子模型概念： 盒子模型（Box Model）是CSS控制页面时一个很重要的概念。 content edge or...
    一船西瓜阅读 3,077评论 0赞 0
  • 没有不可能之事
    没有不可能之事。人类可以操控潮汐发电，从空气和热带海洋中得到养料，随时可以和天涯海角的人面对面交谈。贝尔是一位演说...
    坦荡的清风W阅读 968评论 0赞 0
  • 年味
    年味 人说:现在城市的年味不浓。于是，在过年期间我们一家去了外婆的老家:江苏省江阴市的青阳镇。 在那里的大年三...
    YSLLSY阅读 1,501评论 0赞 1