| 字体属性设置（一）：谷歌浏览器12px以下字体的显示；方法和原理 | 您所在的位置：网站首页 › p标签如何设置字体大小 › 字体属性设置（一）：谷歌浏览器12px以下字体的显示；方法和原理 |
字体属性设置（一）：谷歌浏览器12px以下字体的显示；方法和原理
|
DOCTYPE html>
*{
margin: 0;
padding: 0;
}
p{
width: 300px;
height: 300px;
-webkit-transform:scale(0.8);
border: 1px solid red;
}
.a{
width: 300px;
height: 300px;
border: 1px solid red;
margin-top: 10px;
margin-left: 10px;
}
我是p
当对p加父容器和对p本身设置宽高以及边框；设置scale0.8，p标签自动上下居中(自身原来的宽高-缩放后的宽高得到的宽高平均分配到上下左右)； 用chrome自带的盒模型发现，p标签内容占据宽度依旧是300px X 300px；
当在p后面（div中）加入span元素发现span出了div的范围，说明等比缩放只是改变的原来标签形式上的大小；其原来所在文档流占据的空间位置并未因缩放而腾出来;
发现改变p的位置之后span仍然被挤出来。 该方法原理及总结: 1.设置scale时时对整个p标签进行缩放(包含p本身及其内容的所有元素)，而不单单是对字体的缩放； 2.进行缩放之后会将缩放之前的宽高-缩放之后的宽高的值自动分配到p标签的上下左右；但缩放并不会改变该标签原来在文档流中所占据的位置大小；不会因为缩放而腾出空间； 3.缩放后，缩放对象的位置会发生变化； 4.也是scale不适用于inline类型元素的原因(不能设置宽高；虽然自己的宽高靠内容撑起来;但是在设置css的时候无法获取宽高的准确信息(我是这么理解))；所以如果想要设置inline类型的font-size需要先设置display：block或者inline-block。 4.解决办法(解决偏移问题)： DOCTYPE html> *{ margin: 0; padding: 0; } p{ width: 300px; height: 300px; -webkit-transform:scale(0.8); -webkit-transform-origin: 0 0; border: 1px solid red; } .a{ width: 300px; height: 300px; border: 1px solid red; margin-top: 10px; margin-left: 10px; } 我是p
|
【本文地址】
公司简介
联系我们