欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

 

CSS 框模型 (Box Model) 规则了元素框措置元素模式、内边距、边框 和 外边距 的门径。

 

CSS 框模子概述

CSS 框模型

元素框的最内一部分是实践的模式,直接突破包围内容的是内边距。内边距泛起了元素的布景。内边距的边沿是边框。边框之外是外边距,外边距默许是透亮的,是以不会遮挡后来的任何元素。

揭示:后盾运用于由形式和内边距、边框形成的地区。

内边距、边框与外边距都是可选的,默许值是零。然则,许多元素将由用户代办署理花样表配置外边距和内边距。大要经过将元素的 margin 和 padding 配置为零来覆盖这些阅读器格式。这笼统分别进行,也或是使用普片抉择器对悉数元素发展设置:

* {
  margin: 0;
  padding: 0;
}

在 CSS 中,width 和 height 指的是模式地区的宽度和高度。增长内边距、边框和外边距不会影响模式地域的尺寸,然则会增多元素框的总尺寸。

若是框的每一个边上有 10 个像素的外边距与 5 个像素的内边距。如果渴望这个元素框到达 100 个像素,就必要将形式的宽度设置为 70 像素,请看下图:

CSS 框模型实例
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

暗指:内边距、边框和外边距大约运用于一个元素的全数边,也或是使用于径自的边。

暗指:外边距兴许是负值,并且在良多情况下都要使用负值的外边距。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css3-style/c51661.shtml