发表于: 2019-07-10 22:13:29
1 823
今天也是复习了前面任务所学的的知识点,任务五我遇到的第一个问题就是背景图片大小不知道怎么控制,开始的时候背景图片很大,我百度了一下找到了background-size这个属性,这个属性是控制背景图大小的,既可以写百分比也可以写px和关键字。这里我使用了百分比来调整背景图片的大小
,之后的问题就是,之后遇到的问题就是分割线的制作,分割线开始时我用的时hr标签,但是后来我发现这个标签并不好用,分割线的长短和颜色不能控制,最主要的是不能做竖线。所以后来改用div来制作了。最后的问题是只要屏幕分辨率一变小字体总是折叠起来,我百度到了white-space属性,这个属性就是不让字体折叠的。任务五的头部我设置了position:fixed;属性来让其固定在顶部,headr里面的的图片和文字我用了固定定位和绝对定位调整,内容部分用了弹性盒子布局。
定位属性也是css很常用的一个属性,主要分为固定定位,绝对定位和相对定位,相对定位是让元素相对于自己原来的位置,进行位置调整,主要用途是微调元素和做绝对定位的参考,子绝父相,相对定位没有脱离标准流,移动的只是幻象,原位置还存在。绝对定位以屏幕左上角或者左下角或者以已有定位的祖先元素为参考点(子绝父相)进行移动,绝对定位可以对元素进行范围较大的调整或者是压图,绝对定位脱离标准流。固定定位是把元素固定在屏幕哪个位置不动。弹性盒子display:flex;是现在css里最方便的种布局方式了,弹性盒子可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。设置弹性盒子之后设置了弹性布局之后,子元素的css中的float, clear, vertical-align 这些属性将失效。
评论