10.21-10.25之 WEB任务(一)
1、一周复习hcj,HTML一般用的也就那些东西,了解一下行内元素、块级元素、行内块元素。
2、清除浮动(好像是五种还是六种方式)
3、BFC(概念、触发、作用、应用)
4、居中问题(水平垂直居中方法,大概有十来种,你自己总结一下)
5、圣杯布局(flex、float、position要会,尤其前两种,gird和table了解就行)
6、轮播图:js原生做弄清楚原理有箭头,实现了写导航点自动播放然后无缝
注:就是不是让你全背下来,但是常用的要会,不能写什么都要翻文档,菜鸟或者w3c都可以 。
上一篇:行内元素,块级元素、行内块级元素
二、清除浮动
由于浮动元素不再占用原文档的位置,不清除浮动的花就会对后面的元素排版造成影响,即清除浮动主要为了解决父元素因为子级浮动而引起内部高度变为0,引起高度坍塌。
实例分析没有浮动和不清除浮动的效果:
HTML:
<div class="container">
<h1>我是h1,猜猜有几种清除浮动的方式</h1>
<p>代码图像演示并说明优缺点</p>
</div>
CSS:(没有浮动时图一,注释取消实现浮动图二)
<style>
.container{
background-color: pink;
}
h1,p{
/* float: left; */
border: 2px solid black;
width: 100%;
}
</style>
图一与图二上下对比发现,浮动元素h1,p的父级container的粉红色没有啦!是因为他们飘起来爸爸就抱不到他们啦!于是出现解决方案!
师傅官方解释嘿嘿:就是父盒子的高度,如果不设定是为0,如果有内容,是内容撑起高度,浮动时候,子盒子脱离文档流,父盒子没有内容,高度为0,所以看不到背景颜色
解决:
方法一:额外标签法
在包裹浮动元素的父元素中末尾加上<div style="clear:both"></div>
其中 .clear:both(left|right),解释一个left好了,清除左侧浮动影响也可以是不允许左侧有浮动元素。
<div class="container">
<h1>我是h1,猜猜有几种清除浮动的方式</h1>
<p>代码图像演示并说明优缺点</p>
<div style="clear: both;"></div>
</div>
效果图当然和图一是一样的就不添加图片了?
缺点:
增加无意义的标签,违背了结构和表现分离的web标准,后期维护不便。(为此我还去扩展了一下什么是web标准,就当扩充文写吧。)
方法二:overflow:hidden
为此我还去w3c复习了一下overflow的取值,除了hidden还有auto,scroll,但inherit和visible就不行了。auto和scroll有滚动条。
缺点:内容增多造成不自动换行,导致内容被溢出、隐藏。
方法三:float:xxx
这个方法很好理解,解释给父级CSS也加上对应的float,比如这里是float:left。
实现效果还是图一?
缺点:之后页面多了不可能让每一层都这么float啊,影响页面布局。
方法四:父级增加一个CSS为clearfix(最常用)
HTML:
<div class="container clearfix">
<h1>我是h1,猜猜有几种清除浮动的方式</h1>
<p>代码图像演示并说明优缺点</p>
</div>
CSS:
<style>
.container{
background-color: pink;
}
.clearfix:before,
.clearfix:after
{
content: "";
display: table;
}
.clearfix:after{
clear: both;/* 双伪元素清除浮动 */
}
.clearfix{
*zoom: 1;/* 由于IE6/IE7不支持after用zoom:1触发hasLayout */
}
h1,p{
float: left;
border: 2px solid black;
width: 100%;
}
</style>
或者(不用双伪元素):
<style>
.container{
background-color: pink;
}
.clearfix:after{
content: ".";/* 内容也可以为空,试了一下为空的时候visibility和height可以注释掉 */
display: block;
clear: both;
visibility: hidden;/* 隐藏了content的 .但仍然占用空间所以写height来控制 */
height: 0;/* 使父级元素和子元素原来不浮动时的包裹高度一致 */
}
.clearfix{
*zoom: 1;/* 由于IE6/IE7不支持after用zoom:1触发hasLayout */
}
h1,p{
float: left;
border: 2px solid black;
width: 100%;
}
</style>
四种方法实现效果就都如此啦嘿嘿~
师傅指点后再扩充一种超简单的方法
方法五:这个很容易想到,如果能确定所需高度直接给父盒子设定高度
下一篇:BFC的概念触发及应用