发表于: 2018-07-11 23:51:25

2 640


今天完成的事情:

基本完成任务6 有些细节需要修正

1 昨天做任务时,发现自己对imgbackground-image用法的熟悉程度并不完善,就自己遇到的问题总结一下两个标签的用法和区别

imgbackground-image区别;2img中设置文字悬浮(利用float或绝对定位)

img标签的用法

语法:<img src=""alt=""/>src里面为图片来源,alt表示当图片无法显示时图片位置会出现的说明性文字,在W3C标准中为必填选项,有助于辅助阅读,另外img还具有widthheightborderstyle属性

特点:img属于块级内联标签有自闭合特性,通俗的说就是在网页中自己建一块位置自己占位。

backgroun-image标签的用法

语法:background-image:url();

Url中为图片来源,通过background-positionbackground-size等属性来控制大小位置以及重复性等。

特点:background-image既不是Inline标签也不是block标签,无法单独使用,需要放在一个父标签里面使用,本身也是一个空标签,设置好之后作为父标签的背景。

2 了解z-index与堆叠上下文

设置positionz-index不为auto,将产生堆叠上下文,堆叠规则异于常规堆叠。处在堆叠上下文的元素的z-index只在当前父元素下有效,子堆叠上下文被看做是父堆叠上下文中一个独立的模块,相邻的堆叠上下文完全没关系。意味着如果一个元素位于一个最低位置的层,那你z-index设置得再大,它也不会出现在其它层元素的上面。

  1. 默认的摆放规则
  2.   根元素的背景和边界
  3.   普通流(无定位)里的块元素(没有position或者position:static;)HTML中的出现顺序堆叠
  4.   定位元素按HTML中的出现顺序堆叠
对于浮动的块元素来说,堆叠顺序变得有些不同。浮动块元素被放置于非定位块元素与定位块元素之间:
  根元素的背景与边框
  位于普通流中的后代块元素按照它们在 HTML 中出现的顺序堆叠
  浮动块元素
   常规流中的后代行内元素
后代中的定位元素按照它们在 HTML 中出现的顺序堆叠

明天计划的事情:

1新标签——HTML5 audio

2半透明

3 CSS3动画

遇到的问题:

现在做任务的时候主要遇到的是细节问题

类似在引入图片是 是直接放一个img还是将图片放到背景当中

了解到的知识点越多就会发现实现一个目的有很多种方法,接下来就是要学习如何去用最合适最高效的方法去实现这个目的。

收获:

Get到的知识点

1 imgbackground img

2 z-index堆叠



返回列表 返回列表
评论

    分享到