HTML基础知识（3）浮动、塌陷问题
1、浮动
1.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
}
/*
当一个元素设置为浮动后，元素会立即脱离文档流，下边的元素会立即向上移动，元素浮动以后会尽量向左上或者右上浮动
如果浮动元素上方是一个没有浮动的块元素，则浮动元素不会超过块元素
*/
.box1{
width: 200px;
height: 200px;
background-color: yellow;
float: right;
}
.box2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
1.2、测试结果
2、简单布局
2.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例子</title>
<style type="text/css">
/* 清楚默认样式 */
*{
margin: 0;
padding: 0;
}
/*设置头部div*/
.header{
/* 设置高度 */
height: 120px;
/* 设置宽度 */
width: 1000px;
/* 设置背景 */
background-color: grey;
/* 居中 */
margin: 0 auto ;
}
/*设置content div*/
.content{
/* 设置高度 */
height: 400px;
/* 设置宽度 */
width: 1000px;
/* 设置背景 */
background-color: green;
/* 居中 */
margin: 10px auto ;
}
/* 设置content中的内容 */
.left{
height: 100%;
width: 200px;
background-color: red;
float: left;
}
.center{
height: 100%;
width: 580px;
background-color: blueviolet;
float: left;
margin: 0 10px;
}
.right{
height: 100%;
width: 200px;
background-color: pink;
float: left;
}
/*设置footer div*/
.footer{
/* 设置高度 */
height: 150px;
/* 设置宽度 */
width: 1000px;
/* 设置背景 */
background-color: yellow;
/* 居中 */
margin: 0 auto ;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header"></div>
<!-- 内容 -->
<div class="content">
<!-- 左侧 -->
<div class="left"></div>
<!-- 中间 -->
<div class="center"></div>
<!-- 右侧 -->
<div class="right"></div>
</div>
<!-- 底部 -->
<div class="footer"></div>
</body>
</html>
2.2 测试结果
3、导航条
3.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航条</title>
<style type="text/css">
/* 清楚默认样式 */
*{
margin: 0;
padding: 0;
}
.nav{
/* 清楚列表项前字符 */
list-style: none;
width: 1000px;
background-color: blue;
margin: 10px auto;
/* 解决高度塌陷 */
overflow: hidden;
}
/* 设置li */
.nav li{
/* 设置li向左浮动 */
float: left;
/* 设置li宽度 */
width: 12.5%;
}
.nav a{
/* 将a转换为块元素 */
display: block;
/* 设置a的宽度 */
width: 100%;
/* 设置文字居中 */
text-align: center;
/* 设置高度 */
padding: 5px 0;
/* 去除超链接下划线 */
text-decoration: none;
/* 设置字体颜色 */
color: white;
font-weight: bold;
}
/* 设置鼠标移动到这里的效果 */
.nav a:hover{
background-color: red;
}
</style>
</head>
<body>
<div>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</body>
</html>
3.2 测试效果
4、塌陷问题clear
4.1 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮动带来的影响</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
float: right;
}
/*
由于收到box浮动的影响,.box1整体向上移动100px
有时我们需要清除浮动带来的影响,可以使用clear
可取值:
none:默认值,不清除浮动
left:清除左侧浮动元素带来的影响
right:清除左侧浮动元素带来的影响
both:清除两侧
清除其它元素浮动对当前元素造成的影响
*/
.box2{
border: 1px red solid;
}
.box3{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
/* 解决高度塌陷方案：
可以直接在高度塌陷的父元素的最后，在添加一个空白的div
这个div没有浮动，可以撑开父元素的高度，
然后对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度
基本没有副作用 */
.box4{
clear: both;
}
/* 通过after伪类，选中box2的后边 */
/* .clearfix:after{
/* 添加一个内容 */
/* content:""; */
/* 转化为要给块元素 */
/* display: block; */
/*清除两侧的浮动*/
/* clear:both; */
/* } */
</style>
</head>
<body>
<div class="box"></div>
<hr>
<div class="box1"></div>
<hr>
<br><br>
<div class="box2 clearfix">
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
4.2 测试结果
HTML基础知识（3）浮动、塌陷问题的更多相关文章
- 前端开发：css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 前端基础知识之html和css全解
前端回顾 目录 前端回顾 基础知识 HTTP协议 认识HTML HTML组成 HTML标签 div和span标签 特殊的属性 常用标签 认识css 选择器 属性 前端就是展示给用户并且与用户进行交互的 ...
- JVM 基础知识
JVM 基础知识(GC) 2013-12-10 00:16 3190人阅读 评论(1) 收藏 举报 分类: Java(49) 目录(?)[+] 几年前写过一篇关于JVM调优的文章,前段时间拿出来看了看 ...
- css+js+html基础知识总结
css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...
- CSS基础知识之float
前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
- 【RAC】RAC相关基础知识
[RAC]RAC相关基础知识 1.CRS简介 从Oracle 10G开始,oracle引进一套完整的集群管理解决方案—-Cluster-Ready Services,它包括集群连通性.消息和锁. ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- .NET面试题系列[1] - .NET框架基础知识(1)
很明显,CLS是CTS的一个子集,而且是最小的子集. - 张子阳 .NET框架基础知识(1) 参考资料: http://www.tracefact.net/CLR-and-Framework/DotN ...
- RabbitMQ基础知识
RabbitMQ基础知识 一.背景 RabbitMQ是一个由erlang开发的AMQP(Advanced Message Queue )的开源实现.AMQP 的出现其实也是应了广大人民群众的需求,虽然 ...
随机推荐
- java学习第七天xml.day18
反射 在java中,反射主要是指程序可以访问.检测和修改它本身状态或行为的一种能力. 获取字节码的方式: 使用反射获取构造器 : 内省
- 【JDBC】学习路径3-密码登录&SQL注入攻击
最后再提醒一句,每次在测试JDBC程序的时候,一定要确保MySQL正在运行. 打开控制台(终端),输入mysql 如果没启动,则出现以下提示: Mac端启动MySQL数据库,需要在系统便好设置中启动. ...
- ASP.NET Core 6框架揭秘实例演示[34]：缓存整个响应内容
我们利用ASP.NET开发的大部分API都是为了对外提供资源,对于不易变化的资源内容,针对某个维度对其实施缓存可以很好地提供应用的性能.<内存缓存与分布式缓存的使用>介绍的两种缓存框架(本 ...
- helm安装csi-driver-smb-v1.9.0
Application version v1.9.0 Chart version v1.9.0 获取chart包 helm repo add csi-driver-smb https://raw.gi ...
- ELK套件部署
前言 经过两周的不断碰壁,版本的选择 最终选择ELK的7.6.1套餐 因为我所需要的的警报插件sentinl也才跟新到7.6.1 运行环境:centos7 需要开放的端口:5601,9200,514( ...
- Elasticsearch高级检索之使用单个字母数字进行分词N-gram tokenizer（不区分大小写）【实战篇】
一.前言 小编最近在做到一个检索相关的需求,要求按照一个字段的每个字母或者数字进行检索,如果是不设置分词规则的话,英文是按照单词来进行分词的. 小编以7.6.0版本做的功能哈,大家可以根据自己的版本去 ...
- 全网最全Redis学习
一.Redis简介 Redis是以Key-Value形式进行存储的NoSQL数据库,C语言进行编写的.平时操作的数据都在内存中,效率特高,读的效率110000/s,写81000/s,所以多把Redis ...
- 从零打造“乞丐版” React（一）——从命令式编程到声明式编程
这个系列的目的是通过使用 JS 实现"乞丐版"的 React,让读者了解 React 的基本工作原理,体会 React 带来的构建应用的优势 1 HTML 构建静态页面 使用 HT ...
- 【学习笔记】Vin-Mono论文阅读笔记（一）
VINS-Mono 概述 VINS-Mono VINS-Mono是由一个单目相机和一个低成本IMU组成的鲁棒通用的单目视觉惯性系统.通过融合预积分的IMU测量值和特征观测值来获得高精度的视觉惯性里程计 ...
- Pixar 故事公式
文章转载自:https://mp.weixin.qq.com/s/wMfFVh9tAM5Qo4ED658yUg