By

文章目录
  1. 1. margin 与 padding 的差异
  2. 2. 什么是 box model
  3. 3. 为何要使用 em 而非 px 来定义字的大小
  4. 4. h1 {margin : 10px 0px 15px 5px;}

时间过的真快，眼瞅着就要7点了，赶紧写完作业，继续撸代码。
自学网址：http://www.w3school.com.cn/html/html_elements.asp

margin 与 padding 的差异

  • margin(外边距）是边框到边缘的距离，以元素的border为界。
  • padding（内边距）是元素到边框的距离。以元素的border为界。

什么是 box model

  • Box Model是CSS框架，这个框架规定了元素框处理内容、内边距、边框和外边框的方式。主要由content、padding、border、margin。因此我们可以算出一个元素所占的真正空间，比如长度 = width + left padding + right padding + left border + right border + left margin + right margin

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

  • px是用像素来定义的，一般默认的字体大小是16px,是绝对值；
  • 而em是代表当前字体的大小，是相对值，运用比较灵活，也是W3C推荐的字体单位，比如浏览器默认的字体大小是16px，所以默认的1em = 16px，如果字体大小是40px，换算为em就是 40px/16=2.5em。

在 Firefox, Chrome, and Safari 中，可以重新调整以px为单位的文本大小，但是在 Internet Explorer 中不行。
虽然可以通过浏览器的缩放工具调整文本大小，但是这实际上是对整个页面的调整，而不仅限于文本。

如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。
W3C 推荐使用 em 尺寸单位。

1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em：pixels/16=em

如果使用 em 单位，则可以在所有浏览器中调整文本大小。

h1 {margin : 10px 0px 15px 5px;}

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

margin是从元素的上方开始，然后顺时针旋转来表示，所以margin: 10px 0px 15px 5px分别表示：

1
2
3
4
margin-top: 10px
margin-right: 0px
margin-left:5px
margin-bottom： 15px

文章目录
  1. 1. margin 与 padding 的差异
  2. 2. 什么是 box model
  3. 3. 为何要使用 em 而非 px 来定义字的大小
  4. 4. h1 {margin : 10px 0px 15px 5px;}