CSS 是什么

CSS is a language that describes the **style** of an HTML document
CSS describes how HTML elements should be **displayed**.

margin 与 padding 的差异;

margin 可以产生元素周围的空白空间(上下左右)
margin 规定边界(border)外面的空白空间的大小

margin-top, margin-right, margin-bottom, margin-left

margin 有四种值
1. auto -- 浏览器计算margin, 元素会被放置在容器的水平中间位置
2. length -- 用px,pt,cm等规定margin的大小
3. % -- 用百分比规定元素在一个容器内(container)占据的空间大小
4. inherit --  继承父辈的margin 

NOTE: margin 可以有负值

margin 的表示方法

margin:     25px    50px    75px    100px;
            top    right    bottom  left
        
margin:     25px       50px          75px;
            top     right & left      bottom

margin:     25px                    50px;
         top & bottom          right & left

margin:     25px;
         top, right, bottom, left 

padding

padding 可以产生内容(content)周围的空白空间
padding 规定内容距离包裹它的容器的空间大小

padding-top, padding-right, padding-bottom, padding-left

padding 有3种值
1. length -- 用px,pt,cm等规定padding的大小
2. % -- 用百分比规定元素在一个容器内(container)占据的空间大小
3. inherit --  继承父辈的padding


padding:    25px    50px    75px    100px;
            top    right    bottom  left

        
padding:    25px       50px          75px;
            top     right & left      bottom

padding:    25px                    50px;
         top & bottom          right & left

padding:    25px;  
         top, right, bottom, left 

什么是 box model

所有的HTML元素都被认为是BOX.在CSS里面,用'box model'来布局和设计元素。
CSS box model实际上是一个用来包裹每一个HTML元素的box,包括margins, border, padding, content.

*NOTE: 每个元素都是一个box,都有content, padding, border, margin *

content -- 文本和图像放在content
padding -- 划出content四周的空间,padding是透明的
border -- 包裹padding 和 content
margin -- 在border外划出四周的空间,margin是透明的

box model 允许我们为元素增加边界和在元素之间划出空间

如何计算元素的width和height

当设定一个元素的width 和 height的时候 只要设定content area的width和height。
当计算一个元素整体的大小的时候,就要加上padding, borders, margins。

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + topmargin + bottom margin

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

长度分为相对(relative)和绝对(absolute)
Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.

em   Relative to the font-size of the element (2em means 2 times the size of the current font)

The absolute length units are fixed固定的 and a length expressed in any of these will appear as exactly that size.

Absolute length units are not recommended for use on screen, because screen sizes vary so much.However, they can be used if the output medium is known, such as for print layout.

px     pixels 1px = 1/96th of 1in, 1 in = 96px = 2.54cm 

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

margin-top: 10px
margin-right: 0px
margin-bottom: 15px
margin-left: 5px