2019-04-15 今天练习了job-listing 感觉现在很顺畅了(css自学整理)

CSS是指的层叠样式表Cascading Style Sheets，在Rails中我们可以看到的stylesheet文件夹就是放置他们的。CSS是用来修饰HTML的，他用来表述HTML文件里各元素的样式，让HTML文件的表述更丰富。我们这次自学的内容包括CSS的基本语法、id选择器、类选择器、框模型及其内外边距和边框、和如何用CSS来编辑背景、字体、文本和链接。这里我要说明mairgin和padding的差异，什么是Box Model，为何用em而非px定义字的大小，和h1 {margin : 10px 0px 15px 5px;}所代表的意思。为了表述的连贯，这里我先说什么是Box Model。

1.什么是Box Model

Box Model就是指的我们前面提到过的框模型，这个框模型的是用来处理元素内容的，让元素变成我们需要的样式。框模型（Box Model）包含有外边距（margin）、边框（broder）、内边距（padding）、和元素（element）四部分。

其中元素就是指的最里面实际的内容。内边距是指元素和边框之间的距离，外边距是边框外的距离，我们可以用CSS来分别定义，上下左右四个方向的内外边距大小。边框是围绕元素的框架，边框可以是透明、单线、双线、或者别的表现形式。我们就以Job-listing的页面上方标题元素来说明几个部位。

Job-listing的文字就是元素，文字和边框之间的深色部位就是内边距，边框外的部分为外边距。

2.margin和padding的区别

  margin（外边距）和padding（内边距）两者的位置是他们最大的不同，但是除此之外，外边距可以为负，而内边距不能。

3.为何用em而非px定义字的大小

  在CSS中我们一般用px来定义距离和大小，但是在定义文字时我们一般用em而不是px浙西，原因在于Windows的IE浏览器不支持px定义字的大小，而em可以在所有浏览器中适用，并且em可以很好的适配所有字体。这些特性是px所不具备的。

4.h1 {margin : 10px 0px 15px 5px;}定义的什么

h1 {margin ：10px 0px 15px 5px；} 这句定义的是h1标题的外边距4个方向距离的值各是多少，CSS里的这4个值代表的方向顺序是上右下左，就是顺时针从12点方向开始走一圈的顺序。所以这个h1的外边距分别为：

margin-top(上外边距）：10px

margin—right（右外边距）：0px

margin—left（左外边距）：5px

margin—bottom（下外边距）：15px

  CSS能让我们的HTML文件表现更多的样式，了解并掌握它有助于我们以后前端的编辑，让我们做出更漂亮的网站。这些基础知识可以为我们以后的学习打好底子。