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= ...
随机推荐
- elasticsearch7.5.0+kibana-7.5.0+cerebro-0.8.5集群生产环境安装配置及通过elasticsearch-migration工具做新老集群数据迁移
一.服务器准备 目前有两台128G内存服务器,故准备每台启动两个es实例,再加一台虚机,共五个节点,保证down一台服务器两个节点数据不受影响. 二.系统初始化 参见我上一篇kafka系统初始化:ht ...
- ASP.NET4.0中JavaScript脚本调用Web Service 方法
环境:VS2019 .net 4.0 framework 根据教材使用ScriptManager在JavaScript中调用Web service 时,失败.现将过程和解决方法记录如下: 1.定义W ...
- 缓存keep-alive
keep-alive缓存 如果没有缓存,每点击一次导航,内容区就会创建一个组件,该组件会经历整个生命周期,每点击一次,就会创建一个组件,比较浪费性能,这时,我们就要考虑到是否能将点击过的已创建的组件进 ...
- ZKWeb 官网与演示站点的部署步骤 (Linux + Nginx + Certbot)
因为没有给域名续费,加上私人时间不足,ZKWeb 的官网和演示站点已经停止了几个月的时间. 最近时间开始变多,所以重新购买了别的域名和服务器把官网和演示站点重新部署上去. 在此前站点是托管在共享主机上 ...
- Java连载59-局部内部类、匿名内部类
一.局部内部类 1.局部内部类等同于局部变量 2.局部内部类在访问局部变量的时候,局部变量必须使用final修饰. 3.举个例子: package com.bjpowernode.java_learn ...
- 使用mysql-proxy实现mysql的读写分离
前言: MySQL读写分离是指让master处理写操作,让slave处理读操作,非常适用于读操作量比较大的场景,可减轻master的压力.使用mysql-proxy实现mysql的读写分离,mysq ...
- 周末DHU友谊赛(半日游)感想
DHU的校园挺好的啊,感觉教学楼啊,整体环境啊比咱学校好上一些,和大家一起出来有些春(冬)游的意味,食堂也是十分的宽敞,座位好多! 吐槽shu的食堂座位到饭点明显太少,食堂品类好多,shu的吃多了感觉 ...
- JS中遍历对象属性的四种方法
Object.keys().Object.values().Object.entries().for...in.Map (1)Object.keys(): let ex1 = {c1: 'white' ...
- UWP 利用VisualTreeHelper查找页面中的元素
一般我们在展示数据的时候,都会采用DataTemplate的预先设置数据模板,再使用Set ItemsSource的方式进行数据绑定 这样就能满足大部分的需求. 不过有时候需要对页面已经展示出来的元素 ...
- ELK：ElasticSearch中有数据,Kibana查询不到数据
ElasticSearch中有数据,Kibana查询不到数据 多数原因就是Linux的时区问题, 在linux输入date查看当前时间是否根本地相对应,不对应那么你就来对了, 解决方案一. 这个选择的 ...