长度单位
绝对长度单位
// 像素px（pixels）：在web上，像素px是典型的度量单位，很多其他长度单位直接映射成像素。最终，它们被按照像素处理
// 像素其实也算相对单位
// 英寸in（inches）
1in = 2.54cm = 96px
// 厘米cm（centimeters）
1cm = 10mm = 96px/2.54 = 37.8px
// 毫米mm（millimeters）
1mm = 0.1cm = 3.78px
// 1/4毫米q（quarter-millimeters）
1q = 1/4mm = 0.945px
// 点pt（points）
1pt = 1/72in = 0.0139in = 1/72*2.54cm = 1/72*96px = 1.33px
// 派卡pc（picas）
1pc = 12pt = 1/6in = 1/6*96px = 16px
字体相关相对长度单位
- 长度值目前比较常用的是：px（像素）、em、%（百分比），要注意其实这三种单位都是相对单位
-
像素 px
- 像素为什么是相对单位呢？因为像素指的是显示器上的小点。实际情况是与浏览器使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位
-
em
- em表示元素的
font-size属性的计算值，如果用于font-size属性本身，相对于父元素的font-size；若用于其他属性，相对于本身元素的font-size
- 具有继承的特点
- 当没有设置
font-size时，浏览器会有一个默认的 em 设置：1em = 16px
- 缺点：容易混乱
<style type="text/css">
.box{
font-size: 20px;
}
.in{
/* 相对于父元素，所以2*20px=40px */
font-size: 2em;
/* 相对于本身元素，所以5*40px=200px */
height: 5em;
/* 10*40px=400px */
width: 10em;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">
<div class="in">测试文字</div>
</div>
</body>
-
rem
- rem 是相对于根元素
html的font-size属性的计算值，比较好计算
- 当没有设置 font-size 时，浏览器会有一个默认的 rem 设置：1rem = 16px，这点与 em 是一致的
- 兼容性：IE8-不支持
<style type="text/css">
/* 浏览器默认字体大小为16px，则2*16=32px，所以根元素字体大小为32px */
html{font-size: 2rem;}
/* 2*32=64px */
.box{font-size: 2rem;}
.in{
/* 1*32=32px */
font-size: 1rem;
/* 1*32=32px */
border-left: 1rem solid black;
/* 4*32=128px */
height: 4rem;
/* 6*32=192px */
width: 6rem;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box">
<div class="in">测试文字</div>
</div>
<script type="text/javascript">
var inDiv = document.getElementsByClassName('in')[0];
console.log(getComputedStyle(inDiv, false)['font-size']); // 32px
console.log(getComputedStyle(inDiv, false)['width']); // 192px
</script>
</body>
-
百分比 %（percentage）
-
p {font-size:12px; line-height:130%;}设置行高（行间距）为字体的130％12*1.3=15.6px
-
ex
- ex是指所用字体中小写
x的高度。但不同字体x的高度可能不同。实际上，很多浏览器取em值一半作为ex值
- ex在实际中常用于微调
<style type="text/css">
.box{font-size: 20px;}
.in{
font-size: 1ex;
border-left: 1ex solid black;
height: 10ex;
width: 20ex;
background-color: lightblue;
}
</style>
</head>
<body>
<button>宋体</button><button>微软雅黑</button><button>arial</button><button>serif</button>
<div class="box">
<div class="in" id="test">测试文字</div>
</div>
<script type="text/javascript">
var aBtns = document.getElementsByTagName('button');
for(var i = 0; i < aBtns.length; i++ ){
aBtns[i].onclick = function(){
test.style.fontFamily = this.innerHTML;
}
}
</script>
</body>
-
ch
- ch与ex类似，被定义为数字
0的宽度。当无法确定数字0宽度时，取em值的一半作为ch值
- 兼容性：IE8-不支持
- ch在实际中主要用于盲文排版
视口相关相对长度单位
- 视口相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时，它们都会相应地缩放。然而，当根元素的
overflow值为auto时，任何滚动条会假定不存在
-
兼容性：IE8-不支持，IOS7.1-不支持，android4.3-不支持（对于vmax，所有IE浏览器都不支持）
-
vh
-
vw
-
vmin
-
vmax
calc() 数学表达式（calculation）
- 数学表达式
calc()是CSS中的函数，主要用于数学运算。使用calc()为页面元素布局提供了便利和新的思路
- 数学表达式
calc()是calculate计算的缩写，它允许使用+、-、*、/这四种运算符，可以混合使用%、px、em、rem等单位进行计算
- 兼容性：IE8-、safari5.1-、ios5.1-、android4.3-不支持，android4.4-4.4.4只支持加法和减法。IE9不支持用于
backround-position
- 注意：+ 和 - 运算符两边一定要有空白符
<style type="text/css">
.test1{
border: calc( 1px + 1px ) solid black;
/* calc里面的运算遵循 *、/ 优先于 +、- 的顺序 */
width: calc(100%/3 - 2*1em - 2*1px);
background-color: pink;
font-style: toggle(italic, normal);
}
.test2{
/* 由于运算符 + 的左右两侧没有空白符，所以失效 */
border: calc(1px+1px) solid black;
/* 对于不能小于0的属性值，当运算结果小于0时，按0处理 */
width: calc(10px - 20px);
padding-left: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="test1">测试文字一</div>
<div class="test2">测试文字二</div>
</body>
- 应用：数学表达式
calc()常用于布局中的不同单位的数字运算
<style type="text/css">
p{margin: 0;}
.parent{overflow: hidden; zoom: 1;}
.left{float: left; width: 100px; margin-right: 20px;}
.right{float: left; width: calc(100% - 120px);}
</style>
</head>
<body>
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
</body>
网友评论