第五天和第六天 三种简历
课程目标
掌握CSS盒模型及通过Float进行简单的布局
阅读
- MDN-盒模型
- MDN-再述盒模型
- MDN-浮动layout/Floats
- 如何理解 CSS 中的浮动布局方式?
- What methods of ‘clearfix’ can I use?
- 清除浮动(clearfix hack)
- 编码规范
阅读笔记
- 框属性
width
和height
padding
border
margin
:外边距有一个特别的行为被称作外边距塌陷(当两个框彼此接触时,它们的间距将取两个相邻外边界的最大值,而非两者的总和)
- 高级的框操作
overflow
:
auto
:当内容过多,溢流的内容被隐藏,然后出现滚动条来让我们滚动查看所有的内容。hidden
:当内容过多,溢流的内容被隐藏。visible
:当内容过多,溢流的内容被显示在盒子的外边(这个是默认的行为)
background-clip
:背景裁剪ontline
:轮廓。被勾画于在框边界之外,外边距区域之内。
- CSS框类型:
display
:block
,inline
,andinline-block
。
- 盒模型概要
- 完全改变盒模型:
box-sizing: border-box
- 不常见的display类型:
display: table
display: flex
display: grid
- 完全改变盒模型:
- 浮动
clear
:
left
:停止任何活动的左浮动right
:停止任何活动的右浮动both
:停止任何活动的左右浮动
- 清除浮动还是闭合浮动
- 清除浮动:
clear: left|right|both|none;
- 闭合浮动:使浮动元素闭合,从而减少浮动带来的影响 。
- 在footer上设置clear: both清除浮动并不能解决wrap高度塌陷的问题。
- 清除浮动:
- CSS中的定位机制:普通流,浮动,绝对定位(其中
position:fixed
是position:absolute
的一个子类) 清除浮动的原理
添加额外标签:
缺点:会添加无意义的空标签,有违结构与表现的分离。<div style = "clear: both"></div> // 其他标签<br>等亦可
使用br标签和其自身的html属性
缺点:同样有违结构与表现的分离,不推荐使用。// bryou clear = "all|left|right|none"属性 .main{float:left;} .side{float:right;} <div class="main"></div> <div class="side"></div> <br clear="all" />
父元素设置
overflow: hidden
,在IE6中还需要触发hasLayout,例如zoom: 1;
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。.container { overflow: hidden; _overflow: visible; /* for IE */ _zoom: 1; /* for IE */ }
父元素设置
overflow: auto
属性,和3差不多。
缺点:多个嵌套后,firefox某些情况会造成内容全选;IE中mouseover造成宽度改变时会出现最外层模块有滚动条等,firefox早期版本会无故产生focus等。.clearfix { overflow: auto; zoom: 1; }
- 父元素也设置浮动
这个想想都知道不是一个好的解决办法。 - 父元素设置
display:table
使用
:after
伪元素,由于IE6-7不支持:after
,使用zoom:1
触发hasLayout。// 不支持IE6/7 .container::after { content: ""; display: block; clear: both; } // 支持Firefox3.5+,Safari4+,Chrome,Opera9+,IE6+ .container::before, .container::after { content: ""; display: table; } .container::after { clear: both; } .container { zoom: 1; }
- 综上所述:在支持BFC的浏览器(IE8+,firefox,chrome,Safari)通过创建新的BFC闭合浮动;在不支持BFC的浏览器(IE6-7),通过触发hasLayout闭合浮动。
编码中遇到的一些问题
在做第二个效果图的时候要用到两栏布局,采用的方案是
// 固定宽度区浮动,自适应区不设宽度而设置margin .wrap { overflow: hidden; *zoom: 1; } .left { float: left; width: 20%; } .right{ margin-left: 22%; }
第二个效果图让左边的div自适应右边的div
function changeBoxSize() { var scrollHeight = document.getElementById("inner").scrollHeight; document.getElementById("inner").style.height = scrollHeight + "px"; } window.onresize() = changeBoxSize(); // div大小改变的时候就执行函数 .left { margin-bottom: -3000px; padding-bottom: 3000px; }
上传github文件
git init (初始化本地仓库)
git add. (将本地所有文件加到仓库里)
git commit -m "message" (设置提交信息)
git remote add origin [email protected]:Hippo32/ZeroAbility.git (本地仓库链接远程仓库)
git push -u origin master (push文件到仓库中)
验证
- 盒模型的概念
- inline、block和inline-block的概念
- 内外边距,宽度,高度,box-sizing等属性
- 浮动,清除浮动
- 如何使用浮动进行布局
github预览地址:https://hippo32.github.io/ZeroAbility/day5and6/resume.html