CSS之基础知识开篇（三）

作者: 莫失丿莫忘 | 来源:发表于2017-06-22 15:29 被阅读45次

CSS之基础知识开篇（三）
CSS之基础知识开篇（四）
CSS之基础知识开篇（五）
CSS之基础知识开篇（一）
CSS之基础知识开篇（二）
好程序员web前端培训之CSS基础知识之position
学习Vue框架之前，要有JavaScript的知识储备
CSS样式表继承详解
CSS相关汇总
Jquery之基础知识开篇（三）--DOM操作

1.浮动产生负作用

背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
边框不能撑开
如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

2. 清除浮动(真正的叫法叫闭合标签）

目的：为父盒子撑开高度，解决父盒子为0的问题
需要清除浮动的原因：一般都浮动了，不同div的盒子都会紧贴在一起，块级元素要并列需要浮动，但是要两个都浮动的盒子上下排列，不紧跟，并且保持第二个盒子里面的内容并排，就需要清除第二个盒子的浮动。简单地说，浮动是因为使用了float:left或float:right或两者都有而产生的浮动。

方法1.为父级元素添加高度（这种方法儿子最高的高度变了，父亲的高度也要手动撑开，调成跟儿子一样大）；如果父级元素box1没写高度的话没写高度，在用box2的时候，会自动贴到box1后面，所以box1要设置高度，为儿子们撑起一片天，才不会让外人入侵；
如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。
只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
  /*内外边距为0，元素贴边显示*/
    }
    .box1{
        width: 400px;
        /*height: 80px;为父级添加高度*/
        background-color: black;
    }
    .b1{
        float: left;
        width: 80px;
        height: 50px;
        background: green;
    }
    .b2{
        float: left;
        width: 80px;
        margin-left: 10px;
        height: 50px;
        background: orange;
    }
    .b3{
        margin-left: 10px;
        float: left;
        width: 80px;
        height: 50px;
        background: green;
    }
    .box2{
        width: 400px;
        height: 80px;
        background: red;
    }
    .b4{
        float: left;
        width: 80px;
        height: 50px;
        background: purple;
    }
    </style>
</head>
<body>
<div class="box1">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>   
</div>
<div class="box2">
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>   
</div>   
</body>
</html>

没高度的结果：

Paste_Image.png

为父级增加高度的结果（父级的高度比儿子高，或与最大的相等）：

Paste_Image.png

方法2：用clear：coth(总共用的有三种放置clear：both的方法，清除左右浮动：外墙法），又称隔墙法，不能使父亲撑开高度。隔开两部分的浮动
clear:both是指不允许元素浮动在该元素的两侧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        width: 400px;
        /*height: 80px;方法1为父级添加高度*/
        background-color: black;
    }
    .b1{
        float: left;
        width: 80px;
        height: 50px;
        background: green;
    }
    .b2{
        float: left;
        width: 80px;
        margin-left: 10px;
        height: 50px;
        background: orange;
    }
    .b3{
        margin-left: 10px;
        float: left;
        width: 80px;
        height: 50px;
        background: green;
    }
    .box2{
        width: 400px;
        height: 80px;
        background: red;
    }
    .b4{
        float: left;
        width: 80px;
        height: 50px;
        background: purple;
    }
    .cb1{
        clear: both;
        /*clear: both;方法2，清除左右浮动*/
    }
    </style>
</head>
<body>
<div class="box1">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>   
</div>
<div class="cb1"></div>
<!-- 在两个盒子之间再添加一个box -->
<div class="box2">
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>   
</div>   
</body>
</html>

在两个盒子间添加盒子显示结果：

Paste_Image.png

方法3：同样用clear：both（内墙法），但是在一个盒子内在添加一个盒子（相比在之间添加盒子，这种方法能够为自动为父级的盒子添加合适的高度，该高度是子级儿子撑出的最高的高度,因为如果两个盒子父级都没有高度为0的话，就没办法用背景色修饰。因为（浮动）脱标的元素是不能把一个元素撑出高度的）-还有一种可以写在第二个盒子的div里，但是不能用margin.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
    .*{
        margin: 0;
        padding: 0;
    }
    .box1{
        width: 400px;
        /*height: 80px;为父级添加高度*/
        background-color: black;
    }
    .b1{
        float: left;
        width: 80px;
        height: 50px;
        background: green;
    }
    .b2{
        float: left;
        width: 80px;
        margin-left: 10px;
        height: 50px;
        background: orange;
    }
    .b3{
        margin-left: 10px;
        float: left;
        width: 80px;
        height: 50px;
        background: green;
    }
    .box2{
        width: 400px;
        height: 80px;
        background: red;
    }
    .b4{
        float: left;
        width: 80px;
        height: 50px;
        background: purple;
    }
    .cb1{
        clear: both;
        /*clear: both;清除浮动*/
    }
<!-- 为两个盒子添加缝隙
.h1{
        height:20px;
        background: green;
}
--> 
    </style>
</head>
<body>
<div class="box1">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>   
<div class="cb1 h1"></div>
<!-- 在一个盒子之间再添加一个box -->
</div>
<div class="box2">
<!-- 还有一个方法3可以把class="cb1 h1"写在box2这里，用clear：both，但是margin会失效，不能产生缝隙。 -->
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>   
</div>   
</body>
</html>

显示结果：

Paste_Image.png

方法四：overflow：hidden:溢出隐藏，可以把溢出边框的内容隐藏掉；

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
     <style type="text/css">
     div{
         width: 500px;
         height: 60px;
         color: blue;
         border: 10px solid red;
         overflow: hidden;
     }
     </style>
</head>
<body>
<div>
    <div>
        你看看我有多大你看看我有多大你看看我有多大
        你看看我有多大你看看我有多大你看看我有多大
        你看看我有多大你看看我有多大你看看我有多大
        你看看我有多大你看看我有多大你看看我有多大
        你看看我有多大你看看我有多大你看看我有多大
        你看看我有多大你看看我有多大你看看我有多大
        你看看我有多大你看看我有多大你看看我有多大
        你看看我有多大你看看我有多大你看看我有多大
        你看看我有多大你看看我有多大你看看我有多大
        你看看我有多大你看看我有多大你看看我有多大结束
    </div>
</div>
</body>
</html>

使用前：

Paste_Image.png

使用后：

Paste_Image.png

但是当遇到浮动的时候，他的效果与内墙法是一样的，能为父亲增加高度，记得是为父级的盒子添加。触发bfc模式，不用再清除浮动。但是缺点是当有超出部分会被清除掉，无法显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .box1{
        width: 400px;
        /*height: 80px;为父级添加高度*/
        background-color: black;
        overflow: hidden;


    }
    .b1{
        float: left;
        width: 80px;
        height: 50px;
        background: green;
    }
    .b2{
        float: left;
        width: 80px;
        height: 50px;
        background: orange;
    }
    .b3{
        float: left;
        width: 80px;
        height: 50px;
        background: green;
    }
    .box2{
        margin-top: 10px;
        width: 400px;
        background: red;
    }
    .b4{
        float: left;
        width: 80px;
        height: 80px;
        background: purple;
    }
    /*.cb1{
        clear: both;               
        background: black;
        /*clear: both;清除浮动*/

    /*.h1{
        height:20px;
        background: green;
    }*/

    </style>
</head>
<body>
<div class="box1">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>   

<!-- 在一个盒子之间再添加一个box -->
</div>
<!-- <div class="cb1 h1"></div>
 --><div class="box2">
<div class="b4"></div>
<div class="b5"></div>
<div class="b6"></div>   
</div>   
</body>
</html>

使用前：

Paste_Image.png

使用后：

Paste_Image.png

方法五（压轴方法：网易；要背）：
清除浮动真正叫法叫闭合浮动；伪元素（放在浮动的父元素上形成闭合）：

.clearfix:after {       <----在类名为“clearfix”的元素内最后面加入内容；
    content: ".";     <----内容为“.”就是一个英文的句号而已。也可以不写。
    display: block;   <----加入的这个元素转换为块级元素。
    clear: both;     <----清除左右两边浮动。
    visibility: hidden;      <----可见度设为隐藏。注意它和display:none;是有区别的。
仍然占据空间，只是看不到而已；
    height: 0;     <----高度为0；
    font-size:0;    <----字体大小为0；
}

整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。（这个css的原理是经过使用 after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素 (display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.）
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。

IE6用zoom:1.代码如下;

Paste_Image.png

.clearfix { *zoom:1;} <----这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话，不用深究，听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。
总结：
清除浮动的方法：

    1. 额外标签法  
    2. Overflow: hidden   触发 bfc 模式 就不用清除浮动
    3. 伪元素 
 .clearfix:after {
          content:””;
          Visibility:hidden; 
          Display:block;
          Height:0;
          Clear:both;
     }
    .clearfix{
      Zoom:1;
}
4.双伪元素：
.clearfix:before,.clearfix:after{
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}

CSS之基础知识开篇（三）
1.浮动产生负作用背景不能显示由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或...
CSS之基础知识开篇（四）
1.Z-index 层级只有定位的盒子（除了static）才有 z-index如果都是定位绝对定位 ...
CSS之基础知识开篇（五）
1.鼠标样式 Cursor: pointer 鼠标变成小手Cursor: default; 默认光标：小白...
CSS之基础知识开篇（一）
1. CSS的组成 css 样式由选择符和声明组成，而声明又由属性和值组成。 1.1 选择符（选择器）选择符：又称...
CSS之基础知识开篇（二）
1.CSS盒模型盒子模型有两种，分别是标准盒子模型和IE盒子模型。 CSS 把盒模型分为两种基本形态：Block...
好程序员web前端培训之CSS基础知识之position
好程序员web前端培训之CSS基础知识之position CSS定位机制标准文档流(Normal flow) 浮...
学习Vue框架之前，要有JavaScript的知识储备
前端三剑客知识储备（有关前端的专题） ☑ HTML基础知识 ☑ CSS基础知识 ☑ JavaScript5基础知识...
CSS样式表继承详解
最近在恶补css样式表的基础知识。上次研究了css样式表之冲突问题详解。这次是对css继承特性的学习。什么是cs...
CSS相关汇总
CSS命名规范 CSS基础知识 CSS优化技巧 CSS的继承关系 CSS的选择器关系介绍
Jquery之基础知识开篇（三）--DOM操作
1.jQuery操作DOM 拿到了jQuery对象，就要操作对应的DOM节点了。 DOM 是 Document O...