赵龙 全栈之路

自学 再探CSS,margin 与 padding 的差异?什么是 box model? 为何要使用 em 而非 px 来定义字的大小?

| Comments

margin 与 padding 的差异



在 CSS 中:

  • margin
    围绕在元素边框的空白区域称为外边距 。控制该区域最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。

    • 该属性接受任何长度单位,可以是像素、英寸、毫米或 em 。
    • margin 可以设置为 auto。更常见的做法是为外边距设置长度值。
    • margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。
  • padding
    元素的边框和内容区之间空白区域称为内边距 。控制该区域最简单的属性是 padding 属性。

    • padding 属性接受长度值或百分比值,但不允许使用负值。

术语翻译

  • element : 元素。
  • padding : 内边距,也有资料将其翻译为填充。
  • border : 边框。
  • margin : 外边距,也有资料将其翻译为空白或空白边。

什么是 box model

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

元素框的最内显示的内容是 element 元素 ,直接包围内容的框是 padding 内边距 ,呈现了元素的背景。内边距的边缘是 border 边框border 边框 以外的框是 margin 外边距 ,外边距默认是透明的,因此不会遮挡其后的任何元素。

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

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



padding 内边距border 边框margin 外边距 都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将 element 元素margin 外边距padding 内边距 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置。

提示 1:背景应用于由内容和内边距、边框组成的区域。

提示 2:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。

提示 3:外边距可以是负值,而且在很多情况下都要使用负值的外边距。


为何要使用 em 而非 px 来定义字的大小

避免在 Internet Explorer 中出现无法调整文本的问题,推荐 em 单位代替 pixels。

1em 等于当前网页的默认的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em:pixels/16=em
(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:pixels/20=em)

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em:pixels/16=em
(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:pixels/20=em)


h1 {margin : 10px 0px 15px 5px;} 的 margin-top 、margin-right 、margin-left 、margin-bottom 各是多少 ?

margin 参数的默认顺序与内边距设置相同,都是顺时针旋转的围着元素———— “上左下右” ,答案如下 :

  • margin-top 是 10px
  • margin-right 是 0px
  • margin-left 是 5px
  • margin-bottom 是 15px

Comments

comments powered by Disqus