妙味课堂——HTML+CSS(第四课)(一)
这一课学的东西真是太多了，还不赶快记下来，留待以后慢慢回味！
首先我们回顾一下inline-block的特性：
- 使块元素在一行显示
- 使内嵌支持宽高
- 换行被解析了(问题)
- 不设置宽度的时候，宽度由内容撑开
- 在IE6，7下不支持块标签(问题)
关于1、2、4、5点，我前面的一篇文章已经详细赘述，在此略过。现在单独看第3点，可能我以前还没叙述清楚，举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div,span {
height: 100px;
background: red;
display: inline-block;
}
</style>
</head>
<body>
<div class="div1">div1</div><div class="div2">div2</div><!-- 换行 -->
<span class="span1">span1</span><!-- 换行 -->
<span class="span2">span2</span>
</body>
</html>
运行效果图：
该例子显然也证明了块元素在一行显示、内嵌支持宽高、不设置宽度的时候，宽度由内容撑开。
接下来，我们看CSS中的float(浮动)
通过一个例子来看其特性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div,span {
/*width: 100px;*/
height: 100px;
background: red;
border: 1px solid #000;
float: left;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>
</html>
运行效果图：
可以看出float的特性如下：
- 使块元素在一行显示
- 使内嵌支持宽高
- 不设置宽度的时候，宽度由内容撑开
解决了换行被解析了的问题！此时拥有float(浮动)特性的元素都飘起来了，按照指定的方向(left)飘到最左方。
当float属性的值为right时，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div,span {
width: 100px;
height: 100px;
background: red;
border: 1px solid #000;
float: right;
}
</style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<span class="span1">span1</span>
<span class="span2">span2</span>
</body>
</html>
运行效果图：
此时float: right的元素依次飘到最右方。
所以，float属性的值分别有：
- left
- right
- none
接下来我们来说明float的第4个特性，也是通过一个例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background: red;
float: left;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
运行效果图为：
结果出乎意料，还有一个宽高各为100px，背景颜色为blue的块元素去哪儿了呢？答案是被上面的宽高各为100px，背景颜色为red的块元素覆盖了。那么可以修改如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background: red;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
运行效果图：
通过上面的例子，我们引出一个概念：文档流
文档流——文档中可显示对象在排列时所占用的位置。从上面例子已经可以看出float的第4个特性：4、脱离文档流。
至此，浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。如果一个元素右/左浮动，则：
- 它本身会尽可能向右/左移动，直到碰到边框或者别的浮动元素，特别强调浮动对块元素和行内元素都生效!
- 元素向右/左浮动，就相当于让出自己的左/右边，别的元素就会在它的左/右边排列。
那么接下来，看float的第5个特性，其实说实话，我也不是特别清楚这个特性，懵懵懂懂的，在此留下这个疑问???！先给出来，float的第5个特性：5、提升层级(半层)。按照老师的解释，将一个页面从横切面刨开，会有两个截面，一个横截面是元素本身(包含元素背景...)，另一个是元素内容(文字)。通过下例来说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
font-size: 20px;
}
.box1 {
width: 100px;
height: 100px;
background: red;
float: left;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
运行效果图：
此时，<div class="box2">box2</div>中的内容box2被挤下去了，为什么被挤下去呢?所以这是一个疑问。
再看一个示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
font-size: 20px;
}
.box1 {
width: 100px;
height: 100px;
background: red;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>
按照一般尿性来说，box2块元素的内容应该在最左上方显示，结果被活生生挤到一边去了。
总结，float的特性如下：
- 使块元素在一行显示
- 使内嵌支持宽高
- 不设置宽度的时候，宽度由内容撑开
- 脱离文档流
- 提升层级(半层)
讲完这些，趁热打铁，我们来看看一个练习，关于如何布局的问题。布局如下：
要做出如上布局，该如何做呢?
第一次试验：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
.box {
width: 900px;
margin: 0 auto;
}
.box div {
width: 300px;
}
.left_1 {
height: 200px;
background: red;
float: left;
}
.left_2 {
height: 300px;
background: blue;
float: left;
}
.left_3 {
height: 240px;
background: green;
float: left;
}
.left_4 {
height: 300px;
background: pink;
float: left;
}
.left_5 {
height: 100px;
background: #000;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="left_1"></div>
<div class="left_2"></div>
<div class="left_3"></div>
<div class="left_4"></div>
<div class="left_5"></div>
</div>
</body>
</html>
注意：块元素不设宽，会跟着父级走。
以上每个块元素都加上float属性，运行结果如下：
发现布局混乱一团糟，不可取。
第二次试验：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
.box {
width: 900px;
margin: 0 auto;
}
.left {
width: 300px;
float: left;
}
.left div {
height: 298px;/* 块元素不设宽，会跟着父级走 */
background: #9f0;
border: 1px solid #fff;
}
.center {
width: 300px;
float: left;
}
.center div {
height: 198px;
background: #cf0;
border: 1px solid #fff;
}
.right {
width: 300px;
float: right;
}
.right div {
height: 298px;
background: #ff0;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<div></div>
<div></div>
</div>
<div class="center">
<div></div>
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
</div>
</div>
</body>
</html>
布局就大功告成了，但是我们也可以给此布局加上边框和高度：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
}
.box {
width: 900px;
margin: 0 auto;
border: 5px solid #000;
height: 600px;
}
.left {
width: 300px;
float: left;
}
.left div {
height: 298px;/* 块元素不设宽，会跟着父级走 */
background: #9f0;
border: 1px solid #fff;
}
.center {
width: 300px;
float: left;
}
.center div {
height: 198px;
background: #cf0;
border: 1px solid #fff;
}
.right {
width: 300px;
float: right;
}
.right div {
height: 298px;
background: #ff0;
border: 1px solid #fff;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<div></div>
<div></div>
</div>
<div class="center">
<div></div>
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
</div>
</div>
</body>
</html>
运行效果图：
妙味课堂——HTML+CSS(第四课)(一)的更多相关文章
- 妙味课堂——HTML+CSS(第四课)(二)
单开一篇来讲一个大点的话题——清浮动 来看下例: <!DOCTYPE html> <html> <head> <meta charset="U ...
- 妙味课堂——HTML+CSS(第三课)
常见标签我已经在上一篇文章中提及,我们做前端设计时,主要也是用这些标签(最常用的). 然而有一个问题,就是有的标签都有自己的默认样式.试通过如下代码来说明: <!DOCTYPE html> ...
- 妙味课堂——HTML+CSS(第一课)
一句话,还记忆不如烂笔头,何况还这么笨,记下笔记,也是记录这一路学习的过程. 妙味课堂第一课并未一味地先讲HTML,而是穿插着CSS讲解,这一点不同于一些其他视频,这一点挺特别的!所以这一课涉及到HT ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- 妙味课堂:JavaScript初级--第11课：字符串、查找高亮显示
1.数字字母 Unicode 编码 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content- ...
- 妙味课堂——HTML+CSS(第二课)
常见标签——img标签 <img src="图片地址" alt="图片名"/> alt属性是图片名字,是给百度搜索引擎抓取使用的.也有当图片地址不正 ...
- 妙味课堂:JavaScript初级--第12课：json与数组
1.json数据格式及json语法 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 妙味课堂史上最全的javascript视频教程，前端开发人员必备知识点，新手易学，拔高必备！！！
妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分 ...
- 妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
随机推荐
- CoverFlow效果
1. 成员函数 mCamera是用来做类3D效果处理,比如z轴方向上的平移,绕y轴的旋转等 mMaxRotationAngle是图片绕y轴最大旋转角度,也就是屏幕最边上那两张图片的旋转角度 mMaxZ ...
- sql server 2016 management studio没有的解决方式
最近安装sql sever2016后发现没有 management studio管理工具,无法操作sql server,可以单独下载安装后即可. 下载地址: https://msdn.microsof ...
- iOS8 无法设置定位服务
针对iOS8系统,需要在plist文件中添加这两个参数 NSLocationAlwaysUsageDescription = YES NSLocationWhenInUseUsageDescripti ...
- WPF——数据绑定（二）绑定方法—绑定本地对象
注意:本人初学WPF,文中表达或技术性问题请勿见怪,欢迎指正,谢谢 标记拓展语法:绑定到本地对象 什么是绑定到本地对象,我个人理解就是实现UI层上两个或多个控件的相互关联,一个控件的状态改变,导致另一 ...
- “我爱淘”冲刺阶段Scrum站立会议3
完成任务: 将搜索框的界面已经实现以及部署到整个框架中. 计划任务: 实现搜索功能,通过数据库的链接,实现用户可以查到自己需要的书籍的信息. 遇到问题: 1.数据库的操作,怎么实现查询功能: 2.Ac ...
- 【Binary Tree Maximum Path Sum】cpp
题目: Given a binary tree, find the maximum path sum. The path may start and end at any node in the tr ...
- IE9兼容性视图与IE9标准视图
如果你使用的是IE9,那么按下F12键就会出现开发者工具,上面有两个下拉菜单:浏览器模式和文档模式.那么什么是浏览器模式?什么又是文档模式?二者有何区别? 浏览器模式用于切换IE针对该网页的默认文档模 ...
- 腾讯qq的发展史
腾讯qq的发展史 即时通信软件的历史并不久远,但是它一诞生,就立即受到网民的喜爱,并风靡全球. 在其发展史上,以色列人功不可没.正是四位以色列籍的年轻人,在1996年7月成立的Mirabilis ...
- 03.Hibernate一对多关联
前言:在域模型中,类与类之间最普遍的关系就是关联关系,在UML语言中关联关系是有方向的.在数据库中表与表之间也会有关联关系,本节介绍通过Hibernate映射一对多的关联关系,这是一种最普遍的关联关系 ...
- FbxDataType is ambiguous
??? 使用fbx自定义的类型的时候,比如 FbxIntDT 会有link error 根本原因是 FbxDataType is ambiguous solution: 把fbx的lib换成 libf ...