css当中px(2),前端开发移动_mb6130d15434330

2.2.?将你的原来的px数值除以10,然后换上em作为单位;

2.3.?重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

<body>

<div?class="parent">

????<footer?class="child">

????????<div?class="wrapper">

????????</div>

????</footer>

</div>

</body>

例如在以上html结构当中,在body选择器当中设定font-size的大小为62.5%以后,1em=10px,在.parent当中设定

.parent{?

font-size:5em;

Height:10em;

}

那么,.parent的高度就是3*10*10=300px;此时1em=10px;

在子元素footer当中,设定

.child{

Font-size:2em;

Height:2em;

}

那么,子元素footer的高度就是5*2*2*10=200px;此时1em=5*10=50px;字体的大小就是5*10*2=100px;

在fonter的子元素div当中,要是没有设定文本字体的大小

那么就继承父元素的字体大小,如果设定div:

.warpper{

Height:2em;

}

那么,div的高度就是5*2*2*10=200px;此时1em=5*2*10=100px;字体的大小就是5*10*2=100px;继承了父级字体的大小;

三、rem特点

rem是CSS3新增的一个相对单位(root?em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。下面就是

一个例子:

p?{font-size:14px;?font-size:.875rem;}

注意:

选择使用什么字体单位主要由你的项目来决定,如果你的用户群都使用最新版的浏览器,那推荐使用rem,如果要考虑兼容性,那就使用px,或者两者同时使用。

四、百分比的特点

1、百分比(%)继承的是父级的width和height的属性;例如:

最后

基础知识是前端一面必问的,如果你在基础知识这一块翻车了,就算你框架玩的再6,webpack、git、node学习的再好也无济于事,因为对方就不会再给你展示的机会,千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多,并不是理解就ok了,有些是真的要去记。当然了我们是牛x的前端工程师,每天像背英语单词一样去背知识点就没必要了,只要平时工作中多注意总结,面试前端刷下题目就可以了。

CodeChina开源项目:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

本站由小牛团队全力维护,小牛十年了,大家已经步入中年 。本站源码全部经过团队成员测试并调试,价格可能比其它网站略贵几元钱,不解释!
小牛资源 » css当中px(2),前端开发移动_mb6130d15434330

发表评论

全站资源亲测可用,价格略高几元,不解释

立即查看 了解详情