发表于: 2019-05-01 23:19:14
1 860
编辑日报内容...
今天完成的事情:
1.完成任务七一张图
2.了解了下如何画三角形
明天计划的事情:
1.完成提交任务七
遇到的问题:
1.做任务七的时候发现写的有内容的正方形无法高度自适应
1.1 询问师兄后查找资料后总结:一个没有内容的正方形块自适应屏幕可以用width:
x%,padding-top:x%, 因为padd-top/bottom是基于父元素的宽的,所以宽高就都
相等了想要让有内容的正方形块自适应同样宽度x%,高度用padding:x%,设置
relative,然后再创建一个块宽度高度100%,然后用absolute定位在上面,注意设
置位置
2.做任务七的时候发现隐藏着的几个图片为什么显示不出来
2.1 询问师兄后发现是因为的css写的有问题
这样的语法才是正确的
空格表示嵌套关系为后面一个指定样式,逗号是隔开
3. 做任务七的时候发现设置溢出的时候为什么高度背景色不能填满整个屏幕
3.1 询问师兄后发现宽度可以设置100%是因为块元素占满整行,背景色就会充满整行
,高度设置百分百没用,需要html设置100%,然后body设置100%,再给溢出的
那个父元素设置100%即可
4. 做任务七的时候发现两个块之间会有白色的缝隙
4.1 询问师兄后发现border只有背景没有边框的时候,里面的块设置margin,会撑
出去,跑到父元素的框外
收获:
1. 画三角形可以用border, border实际上是由4个三角形组合而成的,设置长高为0,botder的width就
是三角形的高度设置成想要的长度,颜色,需要哪个位置的三角形,把其它三条边设置成透明色
(transparent)即可,但被隐藏的仍然占据着位置,可以再简化一下,比如你需要最下面的三角形,就把
上边框设置为0,可以设置相邻的width大小来改变三角形形状,不可以一开始就只设置一条边,那样显
示不出来,如果三角形需要边框的话,因为本身就是border所以不可以用border添加边框可以再叠加一个
稍大的三角形再后面,可以利用绝对定位,加上:after(用这个少用一个标签)。
评论