保华的Rails学习笔记

CSS作业

1、margin 与 padding 的差异

padding是内边距,它是内容与边框之前的距离,它定义了元素的边框与元素的内容之间的空白距离,它可以接受长度与百分比
它的声明可以在一句话,也可以用padding-top padding-right padding-bottom padding-left分别来定义
外边距是用margin表示,外边距就是围绕在元素边框的空白区域,设置外边距会在元素外创建额外的空白。
margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em

2、margin写法

h1 {margin : 10px 0px 15px 5px;}
margin-top是10px
margin-right为0px
margin-bottom为15px
margin-left为5px

3、盒子模型

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
提示:背景应用于由内容和内边距、边框组成的区域。


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

* {
  margin: 0;
  padding: 0;
}

在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。