旗下导航:搜·么
当前位置:网站首页 > HTML > 正文

CSS框模子观点引见【html5教程】

作者:搜搜PHP网发布时间:2019-11-30分类:HTML浏览:109


导读:CSS框模子(BoxModel)划定了元素框处置惩罚元素内容、内边距、边框和外边距的体式格局。CSS框模子概述(引荐进修:CSS基础教程)元...

CSS框模子 (Box Model) 划定了元素框处置惩罚元素内容、内边距、边框 和 外边距 的体式格局。

CSS 框模子概述 ( 引荐进修:CSS基础教程 )

元素框的最内部分是现实的内容,直接围困内容的是内边距。内边距显现了元素的背景。内边距的边沿是边框。边框之外是外边距,外边距默许是通明的,因而不会遮挡厥后的任何元素。

提醒:背景应用于由内容和内边距、边框构成的地区。

内边距、边框和外边距都是可选的,默许值是零。然则,许多元素将由用户代办款式表设置外边距和内边距。能够经由过程将元素的 margin 和 padding 设置为零来掩盖这些浏览器款式。

这能够离别举行,也能够运用通用选择器对一切元素举行设置:

* {
  margin: 0;
  padding: 0;
}

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

假定框的每一个边上有 10 个像素的外边距和 5 个像素的内边距。假如愿望这个元素框到达 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提醒:内边距、边框和外边距能够应用于一个元素的一切边,也能够应用于零丁的边。

提醒:外边距能够是负值,而且在许多情况下都要运用负值的外边距。

虽然有要领处理这个问题。然则现在最好的处理方案是逃避这个问题。也就是,不要给元素增加具有指定宽度的内边距,而是尝试将内边距或外边距增加到元素的父元素和子元素。

术语翻译

element : 元素。

padding : 内边距,也有材料将其翻译为添补。

border : 边框。

margin : 外边距,也有材料将其翻译为空缺或空缺边。

以上就是CSS框模子观点引见的细致内容,更多请关注ki4网别的相干文章!

标签:CSS