发表于： 2019-04-24 22:24:14
2 924
今日学习：
1、完成了任务三（不太满意，感觉有小bug）
使用块级元素来进行布局，使用到了position 和float 属性来实现想要的效果。
感悟1：
度量单位开始采用的px（其实px单位在这种简单的页面也可以使用，但要整体调整页面元素大小就没有em方便了），然后采用em单位。但是遇到了一些问题：首先我在<body>标签中把font-size设置为10px
然后把其它以px为单位的元素的大小除以10并换为em单位（也尝试了rem单位），但是当我想把元素调小是我发现调整把font-size的大小调到10px以下元素并大小并没有改变。但是把font-size值调大却可以改变元素的大小。之后我把font-size设置为50px并把元素大小再处以10后达到了理想的效果。
我认为主要是字体的大小font-size不能小于10px，如果小于10px的话字就不能正常显示，所以浏览器对此做出了限制。但在网上却没有查到相关的说法，不知道对不对。
感悟2：
当我使用font-size:10px的时候图片是和<header>框是连在一块的
， 但是当我为了调小图片大小改变为font-size:50px时图片却和<header>框连不到一块了
，具体原因尚不清楚，但是我添加了一个定位把图片移回去了
。
感悟3：
关于定位；任务3 使用了position:absolute 和 position:relative 两种定位。absolute定位会脱离普通流，如果加入了top,left ,right,bottom定位的位置是依据元素包围框来计算的，如果没有加入则会定位在前一个元素右边区域的上方。relative定位不会脱离普通流（会在普通流中占位，但显示时可偏离原来位置），位置计算是依据原来普通流的位置来计算的。（好复杂，还要继续学习与练习）
感悟4：
关于盒子模型,做了几个小实验，得出：盒子宽度=width+padding*2+boder*2+margin*2。与outline没有关系。
感悟5：
图片在<div>中居中只要在<div>属性中加入text-align:center即可，但是这也会影响<div>中的其他元素使其居中，还有其他方法可以只让单一元素居中，但本任务较为简单，就没采用（只要其他方法有些复杂我看不懂）。
明日计划：
明天开始进行任务四，明天时间较为充分，争取能完成任务四。
返回列表
评论