链接

jQuery中的.height()、.innerHeight()和.outerHeight()

1. .height()

获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值（带一个参数）。

注意：1）.css(‘height’) 和 .height()之间的区别是后者返回一个没有单位的数值（例如，400），前者是返回带有完整单位的字符串（例如，400px）。

2）.height()总是返回内容高度,不管CSS box-sizing属性值。.height(‘value’)设置的容器宽度是根据CSS box-sizing属性来定的, 将这个属性值改成border-box，将造成这个函数改变这个容器的outerHeight，而不是原来的内容高度。 jq3改变的是内容高度

2. .innerHeight()

为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。

3. .outerHeight()

获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。

原生js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="box"></div>
#box{
    background-color: lightgrey;
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
    height:60px;
}
//获取盒子的内容高度，内容高度也可用用box.clientHeight获取，内容高度不包括边框和外边距和滚动条
var box = document.getElementById("box")
var contentHeight = window.getComputedStyle(box).height //输出 '60px'

//获取盒子客户端的高度
box.clientHeight //输出110 (内容高度+padding * 2)

//获取盒子自身实际高度
box.offsetHeight //输出160 (内容高度 + 内边距*2 +边框*2)

01-字体

一般情况下，我们用的字体(font-family)都使用的系统存在的字体(不存在版权问题，系统版权、浏览器版权已经包含了字体的版权)，按由左到右的优先级依次兼容，所以你看别人网站的时候，font-family后边有一长串。当你输入中文的时候，即便你设置成英文字体，假如该字库没有相应文字，就会按font-family优先级、浏览器字体优先级、系统字体优先级…

微软雅黑在ps字体中高度要空出1像素，宋体不用。一般右边也要空1像素
a标签与a标签之间有3 8像素的间隔，在ie下是4像素；

浮动情况下间隔为0；

覆盖样式

当要覆盖父级样式的时候,子级在写样式的时候要把父级的标签或者类名id写上!