发表于: 2018-04-28 22:47:45
2 467
今天完成的事情:完成个人主页的编辑,完成task1、task2、task3任务总结,上传自己的代码到修真院的github上,了解关于relative, absolute, fixed 的区别,用css实现居中的几种方法
明天计划的事情:
遇到的问题:fork了修真院的库之后直接使用浏览器操作上传(ubload),发现自己文件夹放错了位置,在网上搜索了用浏览器操作删除文件的方法,但是没有找到如何删除文件夹。后来直接问了高昕师兄,了解到把文件夹下的所有文件删除文件夹就会消失。
收获:
1、了解HTML <a> 标签的 href 属性,绝对url与相对url
<a> 标签的 href 属性用于指定超链接目标的 URL。
绝对URL
绝对URL就是你的网站主页上的文件或目录在硬盘上真正的路径
绝对URL,就是总是以域名(或者/)开头的网址就是"绝对URL"。
注释:"/"代表域名对应的网站根目录。
例如:http://www.baidu.com/image/baobao.gif
相对URL
相对URL就是相对于当前文件目标文件所在的位置
相对URL的实现条件:
a)当前文件是谁?
b)目标文件是谁?(需要被引入的资源文件)
c)当前文件与目标文件的关系?
平级关系:直接写目标文件名
下级关系:目标文件在某个文件夹下,先写同级的目录名,再写目录下的文件名。images/baobao.gif
上级关系:目录文件在上一级目录中,先向上走一级,再找到相应的文件夹,再找文件。
./ 当前文件
../ 向上走一级
../../ 向上走两级
2、relative, absolute, fixed 的区别和应用
relative:生成相对定位的元素,相对于其正常位置进行定位。
生成相对定位的元素,相对于其正常位置进行定位。元素的位置通过left、right、top、button属性进行规定,可以通过z-index进行层次分级。 元素仍保持其未定位前的形状,原本所占的空间仍将保留。(如果没有定位偏移量,对元素本身没有任何影响。所以可以设置父元素的position属性为relative,使其成为子元素的包含块)
absolute:生成绝对定位元素。使元素脱离文档流,并相对于其包含块进行定位,包含块可能是文档中的另一个元素或者是初始包含块,元素原先在正常文档流中所占的空间会会被后面元素占据;
元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框;绝对定位元素的包含块由离它最近的 'position' 属性为 'absolute'、'relative' 或者 'fixed' 的祖先元素创建。只要父级元素设置了position并且不是static(默认既是static),那么设定了absolute的子元素即以此为包含块(最近的)。如果都没有定义,那么就相对于整个文档body定位(注意不是相对于浏览器窗口定位)
fixed:生成绝对定位元素,相对于浏览器窗口的定位。
通常配合z-index一起来使用。比如说网页上悬挂的聊天图标或者广告就是用了fixed
3、用css实现居中的几种方法
水平居中:
1、行内元素 设置 text-align:center
2、定宽块状元素 设置 左右 margin 值为 auto
3、不定宽块状元素
a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto
b:给该元素设置 displa:inine 方法
c:父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:50%
垂直居中:
1、父元素高度确定的单行文本
设置 height = line-height
2、父元素高度确定的多行文本
a:插入 table (插入方法和水平居中一样),然后设置 vertical-align:middle
b:先设置 display:table-cell 再设置 vertical-align:middle
评论