发表于: 2019-07-09 23:53:20
1 869
今天完成的事情:
今天写完了任务十四的第一和第二个页面,首先下午三点多才结束第一张图,昨天遗留的栅格布局分份不均匀的问题昨天已经搞了好长时间,今天一大早就开始请教师兄,首先就是测试的昨天扒的栅格布局的源代码有没有问题,师兄把栅格布局那张css放进我的HTML里面,然后又正常显示了,这说明我的代码把的有问题,可能遗漏了什么,建议我再扒一遍,当我准备重新扒的时候冯师兄说他之前也遇到过这个问题,印象比较深刻,让我写上
box-sizing: border-box;
这串代码,结果栅格布局就正常显示了,
这个一下就解决了困扰我很久的问题,感觉非常震惊,我必须要百度这串代码啥意思:
box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。
例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
搞完这个之后接下来就开始写footer了,这个东西比较少,没啥难度,写的比较快。
写完这张图之后就开始写第二张图,由于header和footer代码之前写好了,直接写main里面的就可以了,第二张图最主要的就是一个网格布局,网格布局现在也能写出来了,但是就是写的比较难,毕竟东西还是不少的,需要慢慢调试,好在总算写出来了,没遇见啥大问题。
明天计划的事情:
明天计划把任务十四的第三图写完,然后再从第一张图开始检查自己写出来的代码,明天主要就是自检完三张图,然后后天开始交任务,进军js。
收获:
主要的收获就是又认识了一个代码的意思,box-sizing "border-box,不求一天认识的多,但是要记得牢,不能学着忘着,这样就效率太低了,别的就没什么了。
评论