1.栅格系统的使用,在不同分辨率下的不同分隔方法.
2.学习了轮播图的制作
3.学习了折叠菜单栏
4.表格制作中table布局出现问题,只好用div来写
5.学习了插入幻灯片
6.复习了hover效果的使用
发表于: 2018-09-05 19:56:26
1 545
今天完成的事情:
一.float: left; margin: 0 auto; display:inline-block;三者的之间的纠葛
1. float:left; 和 margin: 0 auto;
float在w3c给出的定义是:浮动元素将生成块级框,按指定的方向浮动,且不论它本身的何种元素etc...
那么float的特性简单的讲就是脱离当前的文档留,跑到容器的边缘,或者另一个float box的边上,一行放不下就放下一行。
因此,margin值在指定为auto或者0,在gui渲染时会被当做0处理,当然你具体指定数值则是可以的。
2. float: left; 和 display: inline-block;
display:inline-block的元素外部表现为行内元素,横向排列,内部则表现为块级元素;
看了网上终结的两者的区别大体如下:
2.1 文档流(Document flow):浮动元素会脱离文档流,并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然,周围元素不会环绕这个元素,你也不可能通过清除inline-block就让一个元素跑到下面去。
2.2 水平位置(Horizontal position):很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上,均不会影响父元素内浮动的元素。但是父元素内元素如果设置了display:inline-block,则对父元素设置一些定位属性会影响到子元素。(这还是因为浮动元素脱离文档流的关系)。
2.3 垂直对齐(Vertical alignment):inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线,但对浮动元素这种方法就不行了。
2.4 空白(Whitespace):inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了,当你对这些元素设置inline-block时,这些元素之间就会出现空白。而浮动元素会忽略空白节点,互相紧贴
使用inline-block:当你需要控制元素的垂直对齐跟水平排列时,使用inline-block。使用浮动:当你需要让元素环绕某一个元素时,或者需要支持旧版本ie,或者不想处理inline-block带来的空白问题时,使用浮动。
3. margin: 0 auto; 和display: inline-block;
同上解释,display: inline-block; 元素外部表现为行内元素,margin: 0 auto;这种块级元素的属性又怎么会有效果, 假如你要margin:0 auto的块居中,改成display: table即可,或者父集元素text-align: center;也可以
二.更改任务8/9
折叠导航栏出现了比较大的问题,一些布局和定位会相互影响。
三.任务10差不多快完成了
明天计划的事情:
1.完成任务10
2.看些js的基础知识
遇到的问题:暂无
收获:
1.栅格系统的使用,在不同分辨率下的不同分隔方法.
2.学习了轮播图的制作
3.学习了折叠菜单栏
4.表格制作中table布局出现问题,只好用div来写
5.学习了插入幻灯片
6.复习了hover效果的使用
进度:task8
任务总结:
任务名称:CSS=TASK8
成果链接:https://zhangxinlove.github.io/zhangxin/task8/task8-1.html
任务耗时:7天
技能脑图:
官网脑图:
任务总结:
任务8的难度比较大,很多地方都出现了比较大的问题
1.栅格系统的使用,在不同分辨率下的不同分隔方法.
2.学习了轮播图的制作
3.学习了折叠菜单栏
4.表格制作中table布局出现问题,只好用div来写
5.学习了插入幻灯片
6.复习了hover效果的使用
进度:task9
任务总结:
任务名称:CSS=TASK9
成果链接:https://zhangxinlove.github.io/zhangxin/task8/task8-1.html
任务耗时:1天
技能脑图:
官网脑图 :
任务总结:
任务9主要是为任务8添加响应式,通过响应式达到页面在不同分辨率的情况下显示不同的布局。
学习了媒体查询的使用方法
评论