css盒子模型的理解笔记

原创 PHP笔记  2017-03-24 17:28  阅读 1,030 views 次

css中,css盒子模型( Box Model)又叫框模型。盒子模型规定了元素框处理元素内容、内边距、边框和外边距的方式。在html文档中,一般html元素都可以看作是盒子模型。

说明:

  • 外边距(margin):边框外的区域,是透明的。
  • 边框(border):内边距和外边距中间的区域。
  • 内边距(padding):内容周围的区域,是透明的。
  • 元素(element):盒子的内容,显示文本和图像。

元素的宽度和高度

元素的宽度和高度用width和height来设定,如果把它看作是一个盒子模型,它还应该有外边距、边框、内边距。在css中,我们用margin、border、padding属性来设置元素的外边距、边框、内边距。

实例:

......
<body>
<style type="text/css">
div {
width: 200px;
height:100px;
padding: 50px;
border: 30px solid red;
margin: 30px;
background:#9AFF9A;
}
</style>
<div>元素内容</div>
</body>
......

 

运行结果:

说明:总元素的宽度=内容宽度+内边距(填充)+边框+外边距;总元素的高度=内容高度+内边距(填充)+边框+外边距(注:边框边距有上下左右边框边距)。本实例总宽:200+(50+30+30)*2;总高:100+(50+30+30)*2。

本文地址:https://www.ggbiji.com/css-box-model.html
版权声明:本文为 PHP笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情