星之码-前端开发css颜色、单位、字体、命名规范、书写顺序及JS的Location对象

534 05-11

CSS-颜色、单位、字体、命名规范、书写顺序

颜色

单位

绝对单位：无论其他相关的设置怎么变化，绝对单位指定的值是不会变化的，常用于打印方面
相对单位：没有固定的度量值，是由其他元素尺寸来决定的相对值。注意：此处的相对指当前元素的字号（font-size）或者视口（viewport）尺寸。

（1）绝对单位

px：像素 (计算机屏幕上的一个点)，1px = 1/96in
pt：磅 (Points)，1 pt = 1/72 in
pc：12 点活字（Picas），1pc = 12pt = 1/6in
in：英寸（Inches），1in = 96px = 2.54cm
cm：厘米（Centimeters），1cm = 96/2.54px
mm：毫米（Millimeters），1mm = 1/10cm
q：Quarter-millimeters，1q = 1/4mm

（2）相对单位

%：百分比，相对于父元素的宽度或者字体大小
em：相对于当前对象内文本字体的大小，1em = 当前字体的大小，2em = 2 * 当前字体的大小
rem：root em，相对于html标签的字体大小
ex：当前字体环境中x字母的高度，一个 ex 是一个字体的 x-height (x-height 通常是字体尺寸的一半。)
ch：当前字体环境中0数字的高度
vw：1%视口（浏览器可视区域）的宽度
vh：1% 视口（浏览器可视区域）的高度
vmin：1% 视口（浏览器可视区域）宽度和高度中较小的尺寸
vmax：1% 视口（浏览器可视区域）宽度和高度中较大的尺寸

（3）单位详解

任意浏览器的默认字体高都是16px
所有未经调整的浏览器都符合: 
    100% = 1rem = 1em = 16px = 12pt; => 
    1 / 16 = 0.0625; => 
    10px = 0.625em;
手机端常用简化计算：
    css的body中声明：font-size: 62.5%;
    1em = 16px * 62.5% = 10px，比如12px = 1.2em;
    开发的时候用：原单位(px) / 10 + 单位(em)；

字体

font-family：有空格字体或中文需要用双引号，其余都可以不加

window和mac显示一样的字体：
font-family: "Hiragino Sans GB","Microsoft Yahei",Arial,\5b8b\4f53,"Helvetica Neue",Helvetica,"Heiti SC",sans-serif

命名规范

1、属性缩写，如padding、margin、font、border、background
2、去掉小数点前面的“0”
3、16进制颜色如果三种颜色值每种对应字符想到就缩写
4、所有样式命名英文小写，采用中横线连接
5、JS钩子ID，使用复核单词和下划线连接，首字母大写区分
6、结构化命名，不要直观命名法

书写顺序

显示属性：display, position, float, clear, z-index、overflow
自身属性：width, height, margin, paddig, boder, background
文字样式：font-family, font-size, font-weight, color
文本属性：text-align, vertical-align, whitespace
其他：bacground, opacity, cursor
CSS3：content, box-shadow, border-radius, transform

JS的Location对象

Location对象

Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
注意：没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。

Location对象属性

href： 返回完整的URL
protocol： 返回一个URL协议，取值有'https:','https:','file:' 等等
host： 返回一个URL的主机名和端口，location.hostname+location.port： 主机名+端口号
hostname： 返回URL的主机名
port： 返回一个URL服务器使用的端口号
pathname： 返回的URL路径名
search： 返回一个URL的查询部分，查询从问号 (?) 开始的 URL（查询部分)
hash： 返回一个URL的锚部分，从#号开始的 URL，如果地址里没有“#”，则返回空字符串。

document.domain:   返回域名

Location对象方法

assign()： 载入一个新的文档
reload()： 重新载入当前文档
replace()： 用新的文档替换当前文

Location参数查看

在chrome浏览器控制台使用location命令查看，如下：

http://www.example.com/index.html#jump

————————————————

智一面|前端面试必备练习题

标签： JavaScript CSS