妙味课堂——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入门基础_热 ...
随机推荐
- Linux开机启动程序详解
Linux开机启动程序详解我们假设大家已经熟悉其它操作系统的引导过程,了解硬件的自检引导步骤,就只从Linux操作系统的引导加载程序(对个人电脑而言通常是LILO)开始,介绍Linux开机引导的步骤. ...
- wpa_supplicant测试
Android系统中对于WIFI的设置集成到了“设置”中,其实跟手动设置差不多.这里介绍下如何手动连接WIFI,以方便以后调试WIFI. 第一步要做的就是要加载WIFI模块驱动了.当然如果你的WIFI ...
- IOS中GPS定位偏移纠正（适用于Google地图）
在这个神奇的国度里,我们总得学习一些有中国特色的东东,例如“火星坐标”.也许有人还不知道这是什么玩意,我就简要介绍一下吧. 如果你有带GPS模块的智能手机,打开定位功能,然后访问Google ...
- CocoaPods 教程 转载
CocoaPods安装和使用教程 Code4App 原创文章.转载请注明出处:http://code4app.com/article/cocoapods-install-usage 目录 CocoaP ...
- .net 使用validator做数据校验
概述 在把用户输入的数据存储到数据库之前一般都要对数据做服务端校验,于是想到了.net自带的数据校验框架validator.本文对validator的使用方法进行介绍,并分析下校验的的原理. 使用va ...
- LinQ[持续更新]
var query = from t1_row in eprg.AttestationConditions where t1_row.Attestation.ProviderNumber == pro ...
- Powershell下设置环境变量
NODE中经常会用到process.env.NODE_ENV来判断当前环境,因为使用的系统是windows,在sublime text下安装terminal插件后,默认启动的时Powershell, ...
- Ant学习---第四节：Ant属性的介绍
一.ant 属性设置,用 property 标签,详解如下: 特点 大小写敏感: 不可改变,先到先得,谁先设定,之后的都不能改变. 设置 1 .设置 name 和 value 属性值,比如: < ...
- Leetcode-Construct Binary Tree from inorder and preorder travesal
Given preorder and inorder traversal of a tree, construct the binary tree. Note: You may assume that ...
- 团队开发NABC特点
一.软件特点 我们所设计的躲避小球游戏,能够防止用户沉迷,且不会使用户有挫败感,失去玩游戏的兴趣. 二.进行NABC分析 N:我们适应于用户对娱乐.打发时间需求 A:我们用图形界面实现 B:此游戏适用 ...