全栈工程师成长记

编程重新定义人生

CSS的几个解读

Box Model

CSS框模型(Box Model)用于定义一个区块的内容,它由外边距、边框、内边距、元素内容组成。

margin和padding
margin指外边距,它从元素边框开始算起,可以用于给各个区块之间制造距离或者说“空白”。
举例:
h1 {margin : 10px 0px 15px 5px;}
这的例子定义了在h1元素中上下左右的边距,它等价于下面:
h1 {
margin-top: 10px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: 5px;
}
当我们使用第一种写法的时候,4个边距数值以顺时针的方式展开:
上10px > 右0px > 下15px > 右5px。
注意:margin的值也可以使用负值。

padding指内边距,它是元素和边框之间的空白区域。和margin一样,也可以用上下左右四个数值来定义,但有一点需要注意的是padding的值不能使用负值。
元素的背景会显示在边框里面,这意味着内边距的距离值在一定程度上可以决定背景的显示范围。

除了负值的区别,外边距和内边距的属性值都可以使用任何的长度单位或者百分比。
比如这样:
h1 {padding: 10px 0.25em 2ex 20%;}

注意:如果为外边距或者内边距指定了 3 个值,则第 4 个值(即左边距)会从第 2 个值(右边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下边距)会从第 1 个值(上边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上边距)复制得到。

文字

文字是网页内容中最重要的一个部分,文字的字体、样式、大小设置都将直接影响到显示效果进而影响用户体验。

在字体大小的方面,px和em是两个完全不同概念的值。

当使用px单位时,字体的大小是绝对的,比如设置正文的字体大小是16px,那么不管网页在何种分辨率的设备上,都会用16px的大小来显示,这可能会导致文字大小与屏幕分辨率的显示不成比例。

em单位是一个相对值的概念,它的大小根据父元素的字体大小而定,如果父元素规定了font-size为16px,则1em=16px,然后通过具体的em值来确定字体大小,
比如:h1 {font-size:4em;} ,则h1的大小为64px/16=4em。