妙味课堂——HTML+CSS(第四课)(二)

单开一篇来讲一个大点的话题——清浮动

来看下例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 300px;
            margin: 0 auto;
            border: 10px solid #000;
        }
        .div {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div"></div>
    </div>
</body>
</html

运行效果图：

可见，父级元素<div class="box"></div>并没有包裹住子集元素<div class="div"></div>

接下来我们讲解怎么清浮动?

①给父级也加浮动，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 300px;
            margin: 0 auto;
            border: 10px solid #000;
            float: left;
        }
        .div {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div"></div>
    </div>
</body>
</html>

运行效果如下图：

发现问题：页面中所有元素都要加浮动，margin左右自动失效（floats bad ！），所以此方法不建议使用。

②给父级加display: inline-block;，不脱离文档流(应该是不让子集元素脱离文档流)。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 300px;
            margin: 0 auto;
            border: 10px solid #000;
            display: inline-block;
        }
        .div {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div"></div>
    </div>
</body>
</html>

运行效果图如下：

发现问题：margin左右自动失效。

③在浮动元素下加<div class="clear"></div>，在添加如下样式：.clear { height: 0px; clear: both; font-size: 0; }，但在IE6下还有问题！到底是什么问题呢?我在后面会讲，现在又接触了一个新的属性——clear

clear属性有如下值：

right
left
both
none
inherit

clear是指元素的某个方向上不能有浮动元素，而clear: both是指元素左右两侧均不允许有浮动元素。了解以上知识后，来看一个示例：

1、当clear为right时，

<!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;
            clear: right;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

从上图可看出元素<div class="box2">box2</div>才不会管你左边有没有浮动元素呢，它只管它右边有没有浮动元素。

2、当clear为left时，代码略过，直接看运行效果图：

同上，不赘述。

3、当clear为both，同上，不赘述。

至此，我们来看第③方法怎么清浮动。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 300px;
            margin: 0 auto;
            border: 10px solid #000;
        }
        .div {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .clear {
            height: 0px;
            clear: both;
            font-size: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

我们说过此方法在IE6下还有问题！到底是什么问题呢?来看IE6下最小高度问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            margin: 0;
            background: #000;
        }
        .box {
            height: 5px;
            background: red;
            font-size: 0;
        }
        /*
            在IE6下高度小于19px的元素，高度会被当作19px处理
            解决办法：font-size: 0;
            但font-size只能处理最小2个像素的高度
        */
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在chrome浏览器中是没有任何问题的，但在IE6下有问题，在IE6下高度小于19px的元素，高度会被当作19px处理。解决办法：font-size: 0，但font-size只能处理最小2个像素的高度(也即解决后IE6下还有2px偏差，怎么解决呢?也是一个疑问)。

④在浮动元素下加<br clear="all" /> clear: left/right/all(both)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 300px;
            margin: 0 auto;
            border: 10px solid #000;
            /*display: inline-block;/* 不脱离文档流 */
        }
        .div {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div"></div>
        <br clear="all" />
    </div>
</body>
</html>

发现问题：不符合工作中：结构、样式、行为，三者分离的要求。

在讲解第⑤种方法时，我们需要了解几个概念。

1、after伪类，如下例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        p {
            width: 200px;
            border: 1px solid #000;
        }
        p:after {
            content: "!!!!!!!!";
            background: red;
            display: block;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <p>妙味课堂</p>
</body>
</html>

after伪类：元素内部末尾添加内容。语法：

:after{content"添加的内容";}

注意：在IE6、7下是不兼容的！

2、haslayout

haslayout是Windows Internet Explorer渲染引擎(?)的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了haslayout的属性，属性值可以为true或false。当一个元素的haslayout属性值为true时，我们说这个元素有一个布局（layout）。

所以，haslayout根据元素内容的大小，或者父级的大小来重新计算元素的宽高。

就目前所学来说，使用以下样式可以触发IE下haslayout=true。

display	inline-block
height	(任何值除了auto)
float	(left或right)
width	任何值除了auto
zoom	除normal外任意值

3、zoom，缩放

zoom: 1;时，保持原样

zoom: 2;时，放大到2倍

zoom: 0.5;时，缩小到一半

最后，来看第⑤种方法怎么清浮动。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 300px;
            margin: 0 auto;
            border: 10px solid #000;
        }
        .div {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .clear:after {
            content: "";
            display: block;
            clear: both;/* 只有在块元素有效，但在IE6、7下不支持after伪类 */
        }
    </style>
</head>
<body>
    <div class="box clear">
        <div class="div"></div>
    </div>
</body>
</html>

注意：clear属性只有在块元素时才有效。

发现在IE6、7下也无任何异常，因为在IE6、7下浮动元素的父级有宽度(width)，就不用清浮动。但是没有设置width时，怎么办，这是可以使用zoom属性。如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            margin: 0 auto;
            border: 10px solid #000;
        }
        .div {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
        .clear {
            zoom:;
        }
        .clear:after {
            content: "";
            display: block;
            clear: both;/* 只有在块元素有效，但在IE6、7下不支持after伪类 */
        }
    </style>
</head>
<body>
    <div class="box clear">
        <div class="div"></div>
    </div>
</body>
</html>

所以，⑤给浮动元素父级加{ zoom: 1;}，:after { content: ""; display: block; clear: both; }，此方法是目前最常用的清浮动的方法。

接下来，来讲解第⑥种清浮动的方法，不过我们首先要了解overflow(溢出)属性。

overflow属性值有：

auto，溢出显示滚动条
scroll，默认就显示滚动条
hidden，溢出隐藏

举例来说明：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            font-size: 12px;
            line-height: 30px;
            overflow: auto;
        }
        h3 {
            width: 100px;
            height: 30px;
            background: red;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）
        要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误，就是源于 haslayout。如果它设置成了true，它就不得不去渲染它自己，因此元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单词，如果haslayout没有被设置成true，那么元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方。
    </div>
    <h3>妙味课堂</h3>
</body>
</html>

当overflow为auto，内容溢出，显示滚动条。

当overflow为scroll，默认就显示滚动条。

当overflow为hidden，内容溢出隐藏。

当不使用overflow时，内容溢出，就会成这个鸟样：

再看下例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow: auto;/* 证明可以包着浮动元素 */
        }
        .div1 {
            width: 260px;
            height: 400px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div1"></div>
    </div>
</body>
</html>

可以看出，使用overflow属性的父级元素可以包着浮动元素。

所以，第⑥种清浮动的方法为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 300px;
            margin: 0 auto;
            border: 10px solid #000;
            overflow: auto/hidden;
        }
        .div {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div"></div>
    </div>
</body>
</html>

配合width兼容IE6、7。

但是，更常用的是配合zoom兼容IE6、7。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box {
            margin: 0 auto;
            border: 10px solid #000;
            overflow: auto/hidden;
            zoom: 1;
        }
        .div {
            width: 200px;
            height: 200px;
            background: red;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="div"></div>
    </div>
</body>
</html>

至此，第⑥种清浮动的方法：给浮动元素的父级加overflow: auto/hidden; 一定要配合zoom: 1;。

妙味课堂——HTML+CSS(第四课)(二)的更多相关文章

妙味课堂——HTML+CSS(第四课)(一)
这一课学的东西真是太多了,还不赶快记下来,留待以后慢慢回味! 首先我们回顾一下inline-block的特性: 使块元素在一行显示使内嵌支持宽高换行被解析了(问题) 不设置宽度的时候,宽度由内容撑 ...
妙味课堂——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入门基础_热 ...

随机推荐

7.Knockout.Js（Mapping插件）
前言 Knockout设计成允许你使用任何JavaScript对象作为view model.必须view model的一些属性是observable的,你可以使用KO绑定他们到你的UI元素上,当这些o ...
SVN基于一个branch创建新branch
在本地现有Branch(Checkout出来的目录)上,右键SVN,选择Branch/Tags,选择目录.比如https://sadcsc01.pmmr.com/web/Jaguar/branches ...
Rstdio中更换R版本
1.打开Rstdio,选择Tool --> Global Options.
ASP.NET&AJAX&JSON - 动态读取数据
因为之前帮WM组做了一个delivery的dashboard,大概用了3周的时间,.net也忘了差不多了,ajax和highchart表也是现学的,蛮费劲!总算也搞出来了.发帖纪录一下. 1. 前台A ...
[shell基础]——uniq命令
uniq命令常见选项去除重复行 -u 显示不重复的行 -d 显示有重复的行 -c 打印每一行重复的次数测试文本内容如下: # cat 4.txt 11 ...
layoutSubviews 浅尝
layoutSubviews是UIView中的属性方法,即只要继承于UIView,就可以使用这个方法,这个方法也很强大,以下是他的触发时机: 1.init初始化不会触发layoutSubviews 2 ...
软件工程随堂小作业—— 寻找“水王”（C++）
一.设计思路 (1)输入发帖ID记录表 (2)从第一个ID开始,与后续的发帖ID进行比较,若相同计数器则加一,否则减一.若计数器的数值被减为零,则重新选取当前ID开始记录比较. (3)输出结果二.源 ...
团队开发之《极速蜗牛》NABC分析
一.简介项目名称:极速蜗牛特点:操作简单,视觉与听觉配合,让用户有最完美的体验. 二.NABC分析 N(need):在人们无时无刻离不开手机的今天,难免有无聊的时候,此刻一款操作简单又能令人们动脑 ...
阴影 box-shadow（一）
阴影 box-shadow(一) box-shadow是向盒子添加阴影.支持添加一个或者多个. 很简单的一段代码,就实现了投影效果,酷毙了.我们来看下语法: box-shadow: X轴偏移量 Y轴偏 ...
Python字符编码详解
1. 字符编码简介 1.1. ASCII ASCII(American Standard Code for Information Interchange),是一种单字节的编码.计算机世界里一开始只有 ...

妙味课堂——HTML+CSS(第四课)(二)

妙味课堂——HTML+CSS(第四课)(二)的更多相关文章

随机推荐

热门专题