发表于： 2019-07-04 14:49:26
2 1078
今日完成的任务：
任务3的结尾工作：
师兄说任务三的图片大小不对，我重新按师兄的要求严格缩小2倍px值修改了尺寸，但不懂为什么要这么做，下去以后查了px，em，rem的区别：下面给大家分享一下：
1.PX实际上就是像素，用PX设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，如果改变了浏览器的缩放，这时会使用我们的Web页面布局被打破。这样对于那些关心自己网站可用性的用户来说，就是一个大问题了。因此，这时就提出了使用“em”来定义Web页面的字体。
2.EM就是根据基准来缩放字体的大小。EM实质是一个相对值，而非具体的数值。这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。另外，em是相对于父元素的属性而计算的，如果想计算px和em之间的换算，输入数据就可以px和em相互计算。
3.EM是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而Rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。
扩展资料：
1.PX是Pixel的缩写，也就是说像素是指基本原色素及其灰度的基本编码，由 Picture(图像) 和 Element（元素）这两个单词的字母所组成的，如同摄影的相片一样，数码影像也具有连续性的浓淡阶调。若把影像放大数倍，会发现这些连续色调其实是由许多色彩相近的小方点所组成，这些小方点就是构成影像的最小单位“像素”。
2.em单位名称为相对长度单位。相对于当前对象内文本的字体尺寸，国外使用比较多。<em>(emphasize) 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
3.REM是相对单位，是相对HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。
所以，我的理解是，px是相对于浏览器界面的一个固定单位，换句话说，如果浏览器相当于一个桌子面，上面摆满了用px固定值描述的东西，一旦浏览器（桌面）大小缩小，那么你摆在上面的东西可能会因为位置不够掉下来（当然对于代码，是不会掉下来的），如果变大，那么就会空出来很多地方。所以如果要想让你描述的画面总是能填满不同设备的浏览器界面，自适应屏幕，那么固定值是行不通的，只能全部改成比例，所以就诞生了比例单位em。既然是比例单位，那总得有分子分母，可是em这个单位的分母总是由父元素来确定的，实际情况是，父元素的经常会改变，所以用起来会比较麻烦。因此，大家想，不如固定一个父元素，大家统一以它为标准，这就诞生了以根元素html为基准的比例单位rem。
因此，如果要考虑网页能有良好的适应性，以后还是用rem做单位好了，所以我决定下一个任务用rem做单位试试。
更深的高端进阶思考，可以看看这个网站https://www.cnblogs.com/zaoa/p/8630393.html
任务4的预热：
1.了解绝对定位，相对定位的关系
总结：relative移动后在文档流中依然占位，简单理解就是，你把车子开走了，你的私家车位还是你的，别人还是不能停。absolute在使用后自带浮动属性，所以原来的位置就没有了，就像你去公共停车场停车，你走以后，你的车位就没了。fixed是针对浏览器窗口进行的定位，大家想一下右下角“一刀999”的广告就明白了。
2.切图并完成任务4初步结构搭建
3.了解弹性盒子
弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
以下是常用的代码：
display:-webkit-flex; *如果用了弹性布局，子元素不需要浮动，
-webkit-justify-content： 子元素水平排列方式方式。
center 水平居中
space-between 两端对齐
space-around 手拉手平均分
flex-start 居左对齐
flex-end 居右对齐
-webkit-align-items： 子元素垂直排列
center 垂直居中
space-between 上下两端对齐
space-around 手拉手上下平均分
flex-start 顶部对齐
flex-end 底部对齐
-webkit-flex-direction： 排列方式
row 默认值 横向排列
row-reverse 横向颠倒排列 *不常用
column 垂直排列
column-reverse 垂直颠倒排列 *不常用
-webkit-flex-wrap： 默认no-wrap让元素步换行
wrap 换行
nowrap 不换行
-webkit-align-content: 控制容器内多行在Y轴上的排列方式
center 居中对齐
flex-start 顶部对齐
flex-end 底部对齐
space-between 上下对齐
space-around 上下手拉手对齐
具体的概念有点多，下面是我认为比较好理解的连接：https://www.jianshu.com/p/5240d88172f2
用法总结的话，只知道的是，听师兄说弹性盒子适用性比较好，至于总结，等这个任务过了，再谈心得。
遇到的问题以及思考:
感觉弹性盒子有很好的用处，可是代码写的太少了，还是慢慢练吧，见的多了，写得多了就会用了。
明天的计划：
完成任务4代码，为后天修改代码做准备。
返回列表
评论