发表于： 2017-04-19 22:19:05
2 960
今天完成的事情：
1、开始任务7，下载资源，切图并制作雪碧图；
2、写第一张页面代码
3、写日报
明天计划的事情：
1、今天写代码没有使用bootstrap，明天用bootstrap修改第一张页面（感觉简单页面用bootstrap写反而麻烦）
2、继续进行任务
遇到的问题：
em rem分不清差异，然后写代码在谷歌浏览器运行摸索
<一>
<style>
span{width: 100px;height: 100px;
margin: 10px;padding:10px;
border-bottom: 1em solid red;/*下边框显示16px*/
border-left: 1rem solid black}/*右边框显示16px*/
</style>
</head>
<body>
<span></span>
</body>
谷歌浏览器中此处显示em=rem=16px
<二>
<style>
html {font-size: 125%;}
span{width: 100px;height: 100px;
margin: 10px;padding:10px;
border-bottom: 1em solid red;/*下边框显示20px*/
border-left: 1rem solid black}/*右边框显示20px*/</style>
谷歌浏览器中此处em=rem=20px（实际像素尺寸除以20px即为rem值）
<三>
<style>
html {font-size: 62.5%;}
span{width: 100px;height: 100px;
margin: 10px;padding:10px;
border-bottom: 1em solid red;/*下边框显示12px*/
border-left: 1rem solid black}/*右边框显示12px*/</style>
谷歌浏览器中此处实际显示em=rem=12px（其实此处想让rem=10px，但谷歌浏览器默认最小字体12px，实际达不到这个目的，我刚接触rem时也是用62.5%、后来出现问题舍弃不用改用px，vw，这样要想设置根据设备屏幕宽度调用不同代码时需要更改一大串尺寸、十分不方便，现在才弄明白是怎么回事）
<四>
<style>
div{width: 100px;height: 100px;
margin: 10px;padding:10px;
border-bottom: 1em solid red;/*下边框显示40px*/
border-left: 1rem solid black ;
font-size: 40px}/*右边框显示16px*/
span{font-size: 1em;}/*字高40px*/
</style>
</head>
<body>
<div><span>123</span></div>
</body>
此处rem=16px，em=40px
<五>（这段代码就比较有意思了）
<style>
div{width: 100px;height: 100px;
margin: 10px;padding:10px;
border-bottom: 1em solid red;/*下边框显示48px*/
border-left: 1rem solid black ;
font-size: 3em}/*右边框显示16px*/
span{font-size: 1em;}/*字高48px*/
</style>
</head>
<body>
<div><span>123</span></div>
</body>
总结
em是相对于父元素的字体尺寸（若设置父元素字体尺寸则是设定值，否则继承浏览器默认值）
rem是相对于浏览器的默认字体尺寸（对于特定浏览器来说该值是固定的、谷歌IE默认为16px），
如果不设置父元素字体尺寸则（即父元素字体尺寸=浏览器默认值）em=rem
rem正确用法
html {font-size: 125%;}，
rem值=像素/20px；
字体最小为0.6rem，若设置值小于0.6rem则显示为0.6rem
收获：
学会用css写圆形三角形，学习一个新的属性
cursor: pointer;/*设定鼠标的形状为一只伸出食指的手*/;
手动测试em，rem的差异——深入理解；另外body的外边距为8px
返回列表
评论