HTML51-清除浮动overflow、网易注册界面基本结构搭建
一、overflow:hidden;作用
（1）可以将超出标签范围的内容裁剪掉
（2）清除浮动
.box1{
background-color: red;
/*border:1px white solid;*/
overflow: hidden;
}
.box2{
background-color: green;
/*border:1px white solid;*/
}
.box1 p{
width:100px;
background-color: blue;
}
.box2 p{
width:100px;
background-color: red;
}
p{
float:left;
}
..........省略代码...........
<div class="box1">
<p>我是文字1</p>
<p>我是文字2</p>
<p>我是文字3</p>
</div>
<div class="box2">
<p>我是文字4</p>
<p>我是文字5</p>
<p>我是文字6</p>
</div>
注意：在IE6中是不支持这个方法的的。
（3）可以通过overflow：hidden；让里面的盒子设置margin-top之后，外面的盒子不会被顶下来。
如下代码，我们一个大盒子里面嵌套了一个小盒子，如果不设置overflow这个属性，那么小盒子设置了margin-top属性，大小盒子就会一起被外边距顶下来，但是设置了overflow这个属性，那么大盒子就没有问题正常显示。我们以前学过的解决方法就是给大盒子添加一个border属性就可以了，但是在企业开发中如果不需要border的话，那么加上了，就是画蛇添足了。
.box4{
width:400px;
height:400px;
background-color: red;
overflow: hidden;
}
.box5{
width:200px;
height:200px;
margin-top: 50px;
background-color: blue;
}
............省略代码.............
<div class="box4">
<div class="box5"></div>
</div>
二、网易注册界面基本机构搭建
1.从上到下，从外到内，从左到右，善于利用盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D139_FrameworkeOfNeteasyInterface</title>
<style>
.header{
width:960px;
height:80px;
background-color: red;
margin: 0 auto;
overflow: hidden;
}
.content{
width: 960px;
height: 600px;
background-color: blue;
margin: 0 auto;
}
.footer{
width: 960px;
height: 48px;
background-color: yellow;
margin: 0 auto ;
}
.logo{
width:748px;
height: 47px;
background:url("image/netEasyLogo.jpg");
margin-top: 12px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo" ></div>
div.
</div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>
三、源码：
D138_ClearFloatSIx.html
D139_FrameworkeOfNeteasyInterface.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D138_ClearFloatSIx.html
https://github.com/ruigege66/HTML_learning/blob/master/D139_FrameworkeOfNeteasyInterface.html
2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
HTML51-清除浮动overflow、网易注册界面基本结构搭建的更多相关文章
- CSS浮动与清除浮动(overflow)例子
在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧． float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- css:清除浮动 overflow
是因为overflow除了(visible)会重新给他里面的元素建立块级格式化(block formatting context)floats, position absolute, inline-b ...
- css 浮动布局，清除浮动
浮动的特性: (1)浮动元素有左浮动(float:left)和右浮动(float:right)两种 (2)浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 (3)相邻浮动的块元素可以并在一 ...
- CSS clear both清除浮动总结
我们知道有时候使用了CSS float浮动,会产生CSS浮动,这个时候就需要清理浮动,我们就用clear样式属性即可实现. 接下来我们来认识与学习CSS clear知识与用法. clear清除浮动目录 ...
- overflow:hidden的清除浮动效果
我们都知道"overflow:hidden"可以溢出隐藏,即当内容元素的高度大于其包含块的高度时,设置该属性即可把内容区域超出来的部分隐藏,使内容区域完全包含在该包含块中. 然而& ...
- overflow:hidden清除浮动原理
overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.
- overflow 清除浮动
对overflow的理解还停留在“规定当内容溢出元素框时发生的事情”,这种简单的认识上,今天发现overflow还可以清除浮动. <style> .outside{ height:auto ...
- 清除浮动2-父元素设置overflow:hidden
<!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...
随机推荐
- BBS项目知识点汇总
目录 bbs项目知识点汇总 一. JavaScript 1 替换头像 2 form表单拿数据 3 form组件error信息渲染 4 添加html代码 5 聚焦操作 二 . html在线编辑器 三 . ...
- 《Dotnet9》建站-记录建站过程中使用的一些网址
时间如流水,只能流去不流回! 点赞再看,养成习惯,这是您给我创作的动力! 本文 Dotnet9 https://dotnet9.com 已收录,站长乐于分享dotnet相关技术,比如Winform.W ...
- C# List集合 GroupBy分组
var grpBalance = listBalance.GroupBy(m => new { m.MerChantId, m.Name}).Distinct().Select(t => ...
- BIM工程信息管理系统搭建-系统功能需求
BIM工程信息管理系统功能需求 该系统是真实存在项目,项目于2013年开始研发到2014年初完成,按照当时技术能力和国内BIM现状,现在BIM技术已比之前好多了,不管是建模.展示等.均提高了不少,本博 ...
- CSDN不限积分代下载，知网、万方、sci、IEEE论文代下载，智慧树、超星尔雅刷课
下载内容: 1.CSDN不限积分代下载. 2.知网.万方.sci.IEEE论文代下载. 3.超星尔雅,智慧树刷课. 注:由于本人手抖买一个CSDN会员,想挽回一点损失,所以创立了一个下载群,绝对不是骗 ...
- 关于独显A卡利用率一直是0不运行的问题
情况: 独显一直是0,玩游戏时核显,也就是GPU-0快满了GPU-1也是0,跟没有一样,怀疑自己买电脑的时候是不是被骗了. 在高级电源选项中,有个可切换动态显卡->全局设置的选项,设置成最大化性 ...
- 1001 害死人不偿命的(3n+1)猜想 (15 分)
卡拉兹(Callatz)猜想: 对任何一个正整数 n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把 (3n+1) 砍掉一半.这样一直反复砍下去,最后一定在某一步得到 n=1.卡拉兹在 1950 ...
- 分布式图数据库 Nebula Graph 中的集群快照实践
1 概述 1.1 需求背景 图数据库 Nebula Graph 在生产环境中将拥有庞大的数据量和高频率的业务处理,在实际的运行中将不可避免的发生人为的.硬件或业务处理错误的问题,某些严重错误将导致集群 ...
- WPF之DataTemplateSelector的运用
本文主要记录WPF中DataTemplateSelector的运用,数据模板选择器主要运用在一些项容器中用于根据不同的数据类型选择不同的DataTemplate,以便展示不同的数据.在此以在listb ...
- 配置 yum 源的两种方法
配置 yum 源的两种方法 由于 redhat的yum在线更新是收费的,如果没有注册的话不能使用,如果要使用,需将redhat的yum卸载后,重启安装,再配置其他源,以下为详细过程: 1.删除red ...