妙味课堂——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入门基础_热 ...
随机推荐
- 记录：asp.net mvc 中 使用 jquery 实现html5 实现placeholder 密码框 提示兼容password IE6
@{ViewBag.Title = "完美结合";} <script>var G_start_time = new Date;</script> <! ...
- 为什么学习Python
因为做iOS开发的,之前一直用OC,但是突然有一天苹果说出Swift,但是那时候的Swift真的是Bug多多,语法都不固定,所以只是大致看了看,而一年多之后,Swift已经发布2.0了,语言也相对稳定 ...
- Linux 进程（一）：环境及其控制
进程环境 main启动 当内核执行C程序时,在调用main前先调用一个特殊的启动例程.可执行程序将此启动例程指定为程序的起始地址,接着启动例程从内核中取出命令行参数和环境变量值,然后执行main函数. ...
- 29.DDR2问题1仿真模型文件
在使用modelsim仿真DDR2时,一般我们会用美光网站上下载的DDR2仿真模型.仿真模型文件一般有ddr2_module.v,ddr2.v,ddr2_mcp.v,ddr2_parameters.v ...
- qt 焦点设置策略
focusPolicy 一个QWidget获得焦点的方式受 focusPolicy 控制 Qt::TabFocus 通过Tab键获得焦点 Qt::ClickFocus 通过被单击获得焦点 Qt::St ...
- 89C51单片机定时器控制的流水灯
/***************************************************Copyright: 2014-02-11.version1.0File name: timer ...
- 在Action中以Struts2的方式输出JSON数据
参考地址;http://blog.csdn.net/itdada/article/details/21344985
- JavaScript 闭包详解
一.Javascript闭包的用途 事实上,通过使用闭包,我们可以做很多事情.比如模拟面向对象的代码风格:更优雅,更简洁的表达出代码:在某些方面提升代码的执行效率. 1.匿名自执行函数 我们知道所有的 ...
- redis.conf配置
# Redis configuration file example # Redis示例配置文件 # Note on units: when memory size is needed, it is ...
- 【BZOJ】【1011】【HNOI2008】遥远的行星
神奇的思路题QAQ 玛雅看到这题我就醉了,什么玩意……5%的误差?果断膜拜@ydc神犇的题解: 就是因为不清楚如何应用那个答案误差不超过5%啦. 从没见过这么诡异的题一下就懵了,问到了方法之后都还半信 ...