css中em和颜色设置

html-css019

css中em和颜色设置,第1张

2018.7.16

em,px,都为长度单位,CSS直接设置就可以。

%不是一个长度单位,比如2%就是一个完整的值,是一个整体,比如0.02是一个值,没错,2%也同样是值(出处:《css世界》)

注:有一个特殊情况需要注意,如果,p为span的父元素(如下情况)

css里设置为

p{font-size:14px}

span{font-size:0.8em}

自然就会继承父元素,然后再进行子元素的独特性,即(14*0.8=11.2px)以父元素的px为单位。

简写:当值为0px时,可以简写为0。(如下图所示)

颜色设置有 三种方法

第一种就是直接用英文名字(p{color:red})第二种就是根据R(red)G(green)B(blue)颜色的比例来配色,每一项地值在0-255之间,也可以用百分比(p{color:rgb(133,45,200)})第三种就是常用的,原理也是rgb设置,但是将255变成了十六进制(p{color:#336699})

补充:background-color属性接受任意合法的CSS颜色值,如预定义颜色名、十六进制数值、RGB值、RGB百分比、RGBA值、HSL值、HSLA值(这些都是颜色设置的)

tips:1.十六进制的如果每两个之间数字相同可以简写成一个,如上面的p{color:#336699}为p{color:#369}

2.RGB和我当时学的美术的三原色相类似,美术三原色为红黄蓝。(三间色可以直接用三原色调出,红黄为橙,红蓝为紫,黄蓝为绿)

之前一直分不太清楚,今天试了一下,然后懂了。(如下图)

margin为边界,又可以叫做外边框;padding为内边框,也为“填充”。

流动模型为网页的默认模型,流动模型的块元素是自上而下,行元素是从左到右显示。

模型移动(以层模型中的元素为例)

向右移动和向下移动不是我想的right:XXbottom:XX

而是距离左边XX,距离上面XX,距离原来的0,动了XX那么多,自然就是向那里移动了XX。(默认位置为左上角)

另外,层模型使得元素块移动后,它移动前的仍然保留。

body是个特殊的元素,不要用普通元素(如DIV)的眼光来看待它。它本身具有块级元素的基本特征,如边框、外边距、宽度、高度等,但某些属性如背景色、背景图片,在文档本身(html)没有设定的情况下,body会把自己的背景色、背景图片作为html的公共设定,而在html本身设定了背景色或图片的情况下,body就会把自己的背景色或图片收回作为自己的私有设定,这个时候body就会完全表现为一个块级元素了。

所以,如果要给网页设定底层的背景色或背景图片,最好在html标签上设定,而不要用body。

补充一句:在IE6/7/8中,如果把第一行的<!DOCTYPE>去掉,则body是完全等同于文档窗口的,是无法设置大小、边距等等的(永远与文档窗口保持同等大小)。