投稿
  1. 极客之音首页
  2. 前端开发

CSS基础__3

小半 • • 前端开发 • 阅读 195

导读：本篇文章讲解 CSS基础__3，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

一、CSS Float(浮动)

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

浮动元素之后的其他元素将围绕当前浮动元素显示。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css float浮动</title>
    </head>
    <style>
        #div1{
            width: 300px;
            height: 100px;
            background-color: red;
            float:right;
        }
        #div2{
            width: 300px;
            height: 100px;
            background-color: green;
            float:left;
        }
        img{
            width: 300px;
            width: 300px;
        }
    </style>
<body>
    <h4>CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列</h4>
    <h4>浮动元素之后的其他元素将围绕当前浮动元素显示。</h4>
    <div id="div1">
        <h4>第一个div,右浮动</h4>
    </div>
    <div id="div2">
        <h4>第二个div，左浮动</h4>
    </div>
    <hr>
    <p>
        <img src="../img/baidu.png" alt="">
         CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列<br>
        CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列<br>
        CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列<br>
        CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列<br>
        CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列<br>
        CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列<br>
    </p>
    <p>
        <img src="../img/baidu.png" alt="">
         CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列<br>
        CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列<br>
        CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列<br>
        CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列<br>
        CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列<br>
        CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列<br>
    </p>
</body>
</html>

CSS基础__3

清除浮动的方式有哪些?比较好的是哪一种?

 1.clear.both–本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来
         额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）
         如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。
                 优点：通俗易懂，方便
                 缺点：添加无意义标签，语义化差不建议使用。

 例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #fatherbox{
                width: 400px;
                border: 1px solid red;
            }
            #big{
                width: 200px;
                height:200px;
                background-color: royalblue;
                float: left;
            }
            #small{
                width: 120px;
                height:120px;
                background-color:greenyellow;
                float: left;
            }
            .footer{
                width: 900px;
                height: 100px;
                background-color: hotpink;
            }
            #ewai{
                clear: both;
            }
        </style>
    </head>
<body>
    <div id="fatherbox">
        <div id="big">big</div>
        <div id="small">small</div>
        <div id="ewai">额外标签法</div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

CSS基础__3

 2.给父元素添加overflow: hidden–通过触发BFC方式，实现清除浮动
           优点：代码简洁
           缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。不推荐使用。
            以上面的代码为基础，去掉clear:both，给父元素添加overflow:hidden样式

例如：

  #fatherbox{
                width: 400px;
                border: 1px solid red;
                overflow: hidden;
            }

CSS基础__3

3.使用after伪元素清除浮动（推荐使用）
          优点：符合闭合浮动思想，结构语义化正确
           缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

例如：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .clearfix:after {
            /*伪元素是行内元素 正常浏览器清除浮动方法*/
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            *zoom: 1;
            /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
        }
        #big {
            width: 200px;
            height: 200px;
            background-color: royalblue;
            float: left;
        }
        #small {
            width: 120px;
            height: 120px;
            background-color: greenyellow;
            float: left;
        }
        .footer {
            width: 900px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div id="big">big</div>
        <div id="small">small</div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

CSS基础__3

4.使用before和after双伪元素清除浮动（推荐使用）
         优点：代码更简洁
         缺点：用zoom:1触发hasLayout.

例如：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .clearfix:after,
        .clearfix:before {
            content: "";
            display: table;
        }
        .clearfix:after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
        #big {
            width: 200px;
            height: 200px;
            background-color: royalblue;
            float: left;
        }
        #small {
            width: 120px;
            height: 120px;
            background-color: greenyellow;
            float: left;
        }
        .footer {
            width: 900px;
            height: 100px;
            background-color: hotpink;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div id="big">big</div>
        <div id="small">small</div>
    </div>
    <div class="footer">footer</div>
</body>
</html>

CSS基础__3

二、CSS 布局 – Overflow 

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden  内容会被修剪，并且其余内容是不可见的。

scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

 例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css overflow</title>
    </head>
    <style>
        div{
            width: 300px;
            height: 200px;
            background-color: greenyellow;
            overflow: scroll; 
        }
        
    </style>
<body>
    <h4>CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条</h4>
    <h5>
        visible 默认值。内容不会被修剪，会呈现在元素框之外。<br>
        hidden  内容会被修剪，并且其余内容是不可见的。<br>
        scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。<br>
        auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    </h5>
    <div>
        <img src="../imgs/avatar2.png" alt="">
    </div>
</body>
</html>

CSS基础__3

 三、CSS Position(定位)

position 属性指定了元素的定位类型。

元素可以使用的顶部 top，底部bottom，左侧left和右侧right属性定位

名称

特点

static默认的【可忽略】

符合正常的文档流对象

fixed

与文档流无关，不会随之滚动

relative

符合正常的文档流对象，相对其以前的位置

absolute

最近的已定位[ position: static;除外]父元素

sticky

在 position:relative 与 position:fixed 定位之间切换

 tatic 定位—HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

正常的文档流对象是指html中元素的默认排列方式。从左上角到右下角依次排列元素，碰见块级自动换行，行内元素一行排满才进入下一行。

CSS基础__3

fixed 定位

元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动.

fixed定位使元素的位置与文档流无关，因此不占据空间。

fixed定位的元素和其他元素重叠。

会受到 top, bottom, left, right影响。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position fixed</title>
    </head>
    <style>
        div{
            width: 250px;
            height: 250px;
            background-color: red;
            position: fixed;
        }
       
    </style>
<body>
    <h4>CSS position属性中fixed固定定位</h4>
    <h5>
        fixed定位使元素的位置与文档流无关，因此不占据空间。<br>
        fixed定位的元素和其他元素重叠。<br>
        会受到 top, bottom, left, right影响。
    </h5>
    <div>
        <img src="../imgs/avatar2.png" alt="">
    </div>
    <h5>
        fixed定位使元素的位置与文档流无关，因此不占据空间。<br>
        fixed定位的元素和其他元素重叠。<br>
        会受到 top, bottom, left, right影响。
    </h5>
    <h5>
        fixed定位使元素的位置与文档流无关，因此不占据空间。<br>
        fixed定位的元素和其他元素重叠。<br>
        会受到 top, bottom, left, right影响。
    </h5>
    <h5>
        fixed定位使元素的位置与文档流无关，因此不占据空间。<br>
        fixed定位的元素和其他元素重叠。<br>
        会受到 top, bottom, left, right影响。
    </h5>
    <h5>
        fixed定位使元素的位置与文档流无关，因此不占据空间。<br>
        fixed定位的元素和其他元素重叠。<br>
        会受到 top, bottom, left, right影响。
    </h5>
    <h5>
        fixed定位使元素的位置与文档流无关，因此不占据空间。<br>
        fixed定位的元素和其他元素重叠。<br>
        会受到 top, bottom, left, right影响。
    </h5>
    fixed定位使元素的位置与文档流无关，因此不占据空间。<br>
    fixed定位的元素和其他元素重叠。<br>
    会受到 top, bottom, left, right影响。
</h5>
fixed定位使元素的位置与文档流无关，因此不占据空间。<br>
fixed定位的元素和其他元素重叠。<br>
会受到 top, bottom, left, right影响。
</h5>
fixed定位使元素的位置与文档流无关，因此不占据空间。<br>
fixed定位的元素和其他元素重叠。<br>
会受到 top, bottom, left, right影响。
</h5>

</body>
</html>

CSS基础__3

relative 定位

相对定位元素的定位是相对其以前的位置。

移动相对定位元素，但它原本所占的空间不会改变。

相对定位元素经常被用来作为绝对定位元素的容器块。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position relative</title>
    </head>
    <style>
        div{
            width: 250px;
            height: 250px;
            background-color: red;
            
        }
        img{
            position: relative;
            top: 20px;
            left: 20px;
        }
       
    </style>
<body>
    <h4>CSS position属性中relative 相对定位</h4>
    <h5>
        相对定位元素的定位是相对于自己以前的位置移动。<br>
        移动相对定位元素，但它原本所占的空间不会改变。<br>
        相对定位元素经常被用来作为绝对定位元素的容器块。<br>
        会受到 top, bottom, left, right影响。
    </h5>
    <div>
        <img src="../imgs/avatar2.png" alt="">
    </div>
</body>
</html>

CSS基础__3

 absolute 定位

绝对定位的元素的位置相对于最近的已定位[ position: static;除外]父元素

如果元素没有已定位的父元素，那么它的位置相对于当前浏览器窗口.

absolute 定位使元素的位置与文档流无关，因此不占据空间。

absolute 定位的元素和其他元素重叠。

会受到 top, bottom, left, right影响。

 例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position absolute</title>
    </head>
    <style>
        div{
            width: 250px;
            height: 250px;
            background-color: red;
            position: relative;
        }
        img{
            border: 1px solid black;
           position: absolute;
            left: 50px;
            top: 10px;
        }
       
    </style>
<body>
    <h4>CSS position属性中absolute 绝对定位</h4>
    <h5>
         绝对定位的元素的位置相对于最近的已定位[ position: static;除外]父元素<br>
        如果元素没有已定位的父元素，那么它的位置相对于当前浏览器窗口.<br>
        absolute 定位使元素的位置与文档流无关，因此不占据空间。<br>
        absolute 定位的元素和其他元素重叠。<br>
        受到 top, bottom, left, right影响。
    </h5>
    <div>
        <img src="../imgs/avatar2.png" alt="">
    </div>
</body>
</html>

 CSS基础__3

 sticky 定位

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

 例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>position sticky</title>
    </head>
    <style>
        #div1{ 
            height: 60px;
            background-color: red;
            position: sticky;
            top: 30px;

        }
        ul>li{
            list-style-type:none;
            display: inline-block;
            margin-left: 20px;
            font-size: 40px;
            color: cyan;
        }
        #div2{
            height: 2000px;
        }
        
    </style>
<body>
    <h4>CSS position属性中sticky 粘连定位</h4>
    <h5>
          粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。<br>
        它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。<br>
        元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。<br>
        这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，
        指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效
        否则其行为与相对定位相同。
    </h5>
    <div id="div1">
        <ul>
            <li>视频</li>
            <li>贴吧</li>
            <li>图片</li>
            <li>首页</li>
        </ul>
    </div>
   <div id="div2">
       <p>滚动我</p>
       <p>滚动我</p>
       <p>滚动我</p>
       <p>滚动我</p>
       <p>滚动我</p>
       <p>滚动我</p>
       <p>滚动我</p>
   </div>
</body>
</html>

CSS基础__3

 四、重叠的元素

z-index属性指定了一个元素的堆叠顺序

z-index取值是一个数字，数字值越大就显示在最上面，数字值越小就显示在最下面。

注意:依赖于position属性，没有position属性那么z-index属性没有效果。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>z-index</title>
    </head>
    <style>
        #div1{ 
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
            z-index: 3;
        }
        #div2{
            height: 200px;
            width: 200px;
            background-color: blue;
            position: absolute;
            top: 180px;
            z-index: 2;
        }
        #div3{
            height: 200px;
            width: 200px;
            background-color:chartreuse;
            position: absolute;
            top: 240px;
            z-index: 1;
        }
        
    </style>
<body>
    <h4>CSS z-index属性</h4>
    <h5>
        z-index属性指定了一个元素的堆叠顺序<br>
        z-index取值是一个数字，数字值越大就显示在最上面，数字值越小就显示在最下面
    </h5>
     注意:依赖于position属性，没有position属性那么z-index属性没有效果。
    <div id="div1">
    </div>
   <div id="div2"> 
   </div>
   <div id="div3"> 
</div>
</body>
</html>

CSS基础__3

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79872.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！