发表于: 2019-04-23 23:33:57
2 930
今天完成的事情:
1.基本完成任务二,三
2.查找了解了内联元素,块元素新知识点
3.了解了相对路径
4.了解了块的水平居中,文本的水平垂直居中
5.了解了margin重叠
6.了解了div数字字母的自动换行
7.了解了通配符
明天计划的事情:
1.完成任务二,三
2.学习任务四知识点
遇到的问题:
1.用通配符设置margin,padding为0时,空格跟换行不知道有没有消除;
1.1 询问师兄后自己在vscode中实验,发现没有消除,要设置font-size为0
2.做任务三是发现块元素跟的高为什么能用%符号,之前任务一中则要用
padding-top才可以
2.1 了解资料后发现因为任务一的九宫格中没有内容,本身就没有高度,所
以无法用%,需要用padding-top撑起高度,而任务三的块元素本身是有内容
有 高度的,所以可以用%
3.做任务三发现内联元素之间有空隙,不清楚是什么原因
3.1 了解资料后发现块元素或内联块元素之间换行空格是没有间隙的,而内
联元素换行或有空的时是会产生间隙的,用font-size为0或者取消换行空格
换行都可以消除
4.用margin:auto设置块的水平居中后发现margin-top无法产生作用
4.1 百度后发现是因为margin-top写在了margin:auto的前面,上面的边距
又被后面的margin:auto重置了,写在后面即可,或者用margin的简写
5.做任务三的时候发现两个图片的间距设置了margin(用的%单位),但是当
窗口放大或者缩小之后右边图片的位置会发生变化
5.1 询问师兄后了解到了,虽然两个图片的间距设置了自适应,但是因为它
们图片的大小是固定的,所以实际上他们之间的间距并没有问题是自适应了
可因为图片大小固定的原因导致了位置的变化 ,随后用了float解决
收获:
1. 绝对路径("file://哪个盘:/文件夹名/图片名") ../表示上一个文件夹 ../../表示上两个文件夹
相对路径:同一目录下("图片名") 相对路径:同一文件夹下的不同文件夹:如下 ↴↴
一层,("../文件夹名/图片名") 二层,("../../文件夹名/图片名")
2.文字水平垂直居中可以用line-height:设置成文档高度100%,然后设置text-align:center
3.margin水平边距永远不会重合,2个或两个以上的块级盒模型相邻的垂直margin会重叠。
如果其中有一个是浮动的,那垂直的margin不会重叠 ,并且浮动的盒模型和它的子元素之
间也是这样
设置了overflow属性的元素和它的子元素之间的margin不被重叠(overflow取值为visible除外)
设置了绝对定位(position:absolute)的盒模型,垂直margin不会被重叠,并且和他们的子元
素之间也一样
设置了display:inline-block的元素,垂直margin不会重叠,甚至和他们的子元素之间也是一样
根元素的垂直margin不会被重叠
4.内联元素:和相邻的元素同一行,内容撑慢一行自动换行,宽高不可变,margin上下不可变,
左右可变,padding上下可变但只对自己作用,对其他元素无效,左右可变对其他也有效但img
和object这列比较特殊,他们显示的内容是外部引用的资源,可以设置margic和padding
评论