css中设定元素大小

css中设定元素大小

css中设定元素大小是极其常见也是非常常用的，比如文字大小，图片、文本域等元素的宽度、高度设定，通常字体大小的值可以是相对或绝对的。
以字体大小为例，总结大小属性设置的几种方式。

1. 像素px
   设定好像素的大小以后就完全确定了字体输出的物理尺寸，可以通过虽然可以通过浏览器的缩放来调整文本大小，但是，这种调整是整个页面，而不仅仅是文本。
2. em
   em则是基于基数来计算出来的相对字体大小的，这个基数是当前对象的父级字体大小。两者相乘就是当前对象的大小，下面这个例子的字体大小就是 2em=2*16px=32px。

<div  style="font-size: 16px">
    <p style="font-size: 2em">啊哈</p>
</div>

在浏览器中默认文字大小为16px，因此，已知像素大小可以通过下面这个公式将像素转换为em： px/16=em
再css3 中还出现了rem，rem的大小是相对于html根元素的，通过它可以做到只修改根元素就成比例地调整所有字体大小，经常用于手机端网页编写使用。使用时通常设定body字体大小为100%
3. 百分比
所谓百分比就是当前元素大小占其父元素大小的百分数。下面这个例子的字体大小就是 50%*16px=8px。

<div  style="font-size: 16px">
    <p style="font-size: 50% ">啊哈</p>
</div>

4. 高度宽度
   当默写元素需要设定高度和宽度时，会用到px、cm、%，px和cm都是绝对，同理%是相对于其父块的大小。