A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© Zy_阿匠 初级黑马   /  2017-1-3 16:37  /  1707 人查看  /  2 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 Zy_阿匠 于 2017-1-4 18:08 编辑

第一部分
第1课时
1、原生的html页面都是按照流式布局进行排列,也就是从上到下,从左到右的顺序进行排列
2、行内标签根据布局默认进行从左到右从上到下排列,块级元素因为都占据一行,所以默认
      情况下都是按照从上到下排列
第2课时
1、浮动是解决页面中,块级元素相互布局的一种方法。设置浮动的块级元素,可以脱离文档流的
      布局(从上到下,从左到右的流动布局),与其他块级元素同在一行中显示。虽然设置浮动的
      块级元素不影响其他块级元素的在文档流中的布局,但也会对块级元素的内容产生影响
2、浮动的属性flot,属性值分别为 :
      Float: none;默认设置,无浮动
      Float: left;设置元素左浮动
      Float:right;设置元素右浮动
3、案例:


第3课时
1、浮动的特性:
* 浮动脱离了文档的标准流,虽然不占据位置,但却影响了标准流的布局;浮动只有左浮动和右浮动
* 浮动元素a跟上一个元素有关系,如果上一个元素有浮动,则与其顶部进行对齐,并列显示;如果上一个元素无浮动,则与其底部对齐显示
* 父元素里有子元素,如果其中一个子元素有浮动,则只有当其他所有子元素都浮动时,才能对齐显示
* 浮动元素根据书写的位置来显示相应的浮动
* 当元素添加了浮动后,就具有了行内块级元素的特性,元素的大小完全取决于定义的大小或内容的大小,也就具有了包裹性
* 元素浮动后,破坏了原来正常文档流布局,造成内容塌陷。假如有标准流中的父元素a和子元素b,a没有设置宽高,如果b浮动,则b的宽高将会成为0,这就是造成了内容的塌陷
2、案例1-关系:


3、案例2-塌陷


第4课时
1、如果标准流中的父元素没有设置宽高、子元素设置浮动时,则会造成父元素的内容塌陷;解决的方式之一为
     给父元素设置overfloat属性
2、overfloar属性的属性值一共有四个,即:
* Visible,超出父元素宽高时,正常显示内容;
* Hidden,超出父元素宽高时,隐藏超出部分
* Auto,父元素自适应其所包裹的内容宽高,当内容超出父元素的宽高时,显示滚动条显示;当内容没有超出父元素的宽高时,正常显示
* Scroll,无论父元素包裹的内容是否超出父元素的宽高时,都会显示滚动条
3、案例-解决塌陷


第5课时
1、overfloat的属性原理是,它会触发块级元素的BFC,bfc可以让块级元素具有独立布局内部内容和所包裹元素的权利,而又不会受到外部其他元素的影响;
2、可以触发块级元素BFC的属性有,overfloat、position、display:table、block等
第二部分
第1课时
自适应网站布局案例:

第2课时
2个案例,分别设计到内容塌陷的解决方法及清除浮动的运用
1、第一个案例,全浮动居中,内容塌陷的解决方法

2、第二个案例,清除浮动方法的运用
清除浮动的属性为clear,其属性值为:left、right、both,案例如下:

第3课时
清除浮动的四种方法:
* 隔墙法,是建立一个空的div标签,并设置其清除属性,这样下面的块级标签就会依着空div标签进行流式布局,而不会跑到上面
* 设置overflow属性,属性值即:hidden、visible、scroll、auto;
* 使用after伪对象清除父元素下浮动
* 使用before伪对象清除父元素上浮动
第4课时
clearfix的原理及闭合场景的解决方案
1、实际开发中,网站整体布局中,主版心div,有2件重要的事:
* 其一是要触发div的BFC,使其可以自适应包裹其内的子元素,并且尽量不要设置高度,保持它的可移植性;可以触发BFC的主要方法为:设置属性overflow,使其父div具有包裹性;另外一种是设置display:table/block/in-block
* 其二是要清除主版心div的上浮动和下浮动,所要用到的方法为,使用伪类:after及:before after
2、clearfix的应用案例:

2 个回复

倒序浏览
回复 使用道具 举报
总记得很不需哦
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马