前端05day 前端05day

相对定位

相对定位 - 锐客网.box1{ height: 200px; background-color: red; position: relative; } .box2{ width: 200px; height: 200px; background-color: yellow; position: relative; left: 100px; top: 200px; } .box3{ width: 200px; height: 200px; background-color: yellowgreen; } .s1{ position: relative; width: 200px; height: 200px; background-color: yellow; } 我是一个span

绝对定位

绝对定位 - 锐客网.box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: yellow; position: absolute; } .box3{ width: 300px; height: 300px; background-color: yellowgreen; } .box4{ width: 300px; height: 300px; background-color: orange; } .s1{ width: 100px; height: 100px; background-color: yellow; position: absolute; }我是一个span

固定定位

固定定位 - 锐客网.box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: yellow; position: fixed; left: 0px; top: 0px; } .box3{ width: 200px; height: 200px; background-color: yellowgreen; }

CSS高度塌陷高度塌陷问题

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。

高度塌陷 - 锐客网.box1{ border: 10px red solid; }.box2{ background-color: yellow; width: 100px; height: 100px; float: left; }

解决高度塌陷的方法
解决高度塌陷 <一>

根据W3C的标准，在页面中元素都一个隐含的属性叫做Block Formatting Context（块的格式化环境）简称BFC，该属性可以设置打开或者关闭，默认是关闭的

当开启元素的BFC以后，元素将会具有如下的特性： 1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素

如何开启元素的BFC 1.设置元素浮动

使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素绝对定位
3.设置元素为inline-block

可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
4.将元素的overflow设置为一个非visible的值
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式

高度塌陷 - 锐客网.box1{ border: 10px red solid; overflow: hidden; zoom: 1; } .box2{ width: 100px; height: 100px; background-color: blue; float: left; } .box3{ height: 100px; background-color: yellow; }

解决高度塌陷<二>

可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的
然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用
使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构

解决高度塌陷方法2 - 锐客网.box1{ border: 1px solid red; } .box2{ width: 100px; height: 100px; background-color: blue; float: left; } .clear{ clear: both; }

解决高度塌陷<三>

【前端05day】可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
这样做和添加一个div的原理一样，可以达到一个相同的效果，
而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

解决高度塌陷方法3 - 锐客网.box1{ border: 1px solid red; } .box2{ width: 100px; height: 100px; background-color: blue; float: left; } .clearfix:after{ content: ""; display: block; clear: both; } .clearfix{ zoom: 1; }

作业

开班计划 - 锐客网*{ margin: 0; padding: 0; } body{ font: 12px/1 宋体; } .box1{ width: 300px; margin: 50px auto; } .box2{ border-top: 2px #52bbae solid; height: 36px; background-color: #f5f5f5; line-height: 36px; padding:0px 20px 0px 16px; } .box2 a{ float: right; color: red; } .box2 h3:hover{ float:left; font: 10px '宋体'; list-style: none; }.box3 a{ color: black; text-decoration: none; font-size: 12px; } .box3 a:hover{ color: red; text-decoration: underline; } .box3 h3{ margin-top: 15px; margin-bottom: 15px; } .box3 ul{ list-style: none; border-bottom:1px dashed #deddd9; } .box3 li{ margin-bottom: 15px; } .box3 .red-font{ color: red; font-weight: bold; } .box3 .right{ float: right; } .box3 .no-border{ border: none; } 18年面授开班计划近期开班人工智能+python-高薪就业班开班时间：2018-04-26 预约报名开班时间：2018-03-23 无座，名额爆满开班时间：2018-01-23 开班盛况开班时间：2017-12-10 开班盛况开班时间：2017-11-18 开班盛况 Android开发+测试-高薪就业班开班时间：2018-04-26 预约报名开班时间：2018-03-23 开班盛况开班时间：2018-01-23 开班盛况开班时间：2017-12-10 开班盛况大数据软件开发-青芒工作室开班时间：2018-04-26 预约报名开班时间：2018-01-23 开班盛况