关于css:CSS布局模式之浮动-4

40次阅读

共计 7787 个字符，预计需要花费 20 分钟才能阅读完成。

css 布局的三种模式

规范流

依照元素的显示模式进行排列，故称为规范流

浮动

次要用于多个块级盒子在同一行显示

定位

次要把盒子定位到浏览器的某个地位 前面会常常用到定位

行内块元素和浮动的区别

行内块元素能够让元素在同一行显示，然而两头有空隙，而浮动却恰好解决这个问题

float(浮动)

设置浮动属性的元素会脱离规范流，会将元素挪动到指定的地位

浮动的作用

  • 能让多个块级盒子在同一行显示
  • 能够实现盒子的左右对齐
  • 浮动最早是用来实现图片盘绕成果 
    选择器 {float: 属性值;}

浮动之浮篇

浮动的盒子会脱标，且不占地位 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            height: 200px;
            width: 200px;
            background-color: blue;
            float: left;
        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: brown;

        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

浮动的盒子之漏篇

浮动的盒子，会把原来的地位漏给上面规范流的盒子，且不占地位 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            height: 200px;
            width: 200px;
            background-color: blue;
            /* 浮动的盒子不占地位，地位会漏给上面的盒子 */
            float: left;
        }

        .box2 {
        
            width: 400px;
            height: 400px;
            background-color: brown;

        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

float 之特篇

浮动的个性：浮动的盒子会扭转元素的 display 属性, 转换相似行内块个性，但没有缝隙 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            height: 400px;
            width: 400px;
            background-color: blue;
            float: left;
        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: black;
            float: left;
         }

         .box3 {
            width: 400px;
            height: 400px;
            background-color: brown;
            float: pink;
            float: left;
         }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>

</html>


注意事项：当父元素的宽度不够包容浮动的盒子，浮动的盒子会从新起一行

浮动小结

浮动小细节

一个残缺的网页，是由规范流 + 浮动 + 定位 一起实现的 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .nav {
            width: 400px;
            height: 400px;
            border: 1px solid red;
        }

        .box1,
        .box2 {
            width: 200px;
            height: 200px;
            background-color: black;
            float: left;
        }

        .box2 {background-color: blueviolet;}

        .box3 {
            width: 400px;
            height: 200px;
            background-color: brown;
            float: left;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

浮动案例 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        .box {
            width: 800px;
            height: 800px;
            margin: 100px auto;

        }

        .left {
            width: 200px;
            height: 800px;
            background-color: red;
            float: left;

        }

        .right {
            width: 600px;
            height: 800px;
            float: left;

        }

        .right li {
            list-style: none;
            width: 140px;
            height: 395px;
            float: left;
            background-color: brown;
            margin-left: 10px;
            margin-top: 5px;
            font-weight: bold;
            color: wheat;
            line-height: 395px;
            text-align: center;


        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <ul class="right">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul>
    </div>
</body>

</html>

导航栏案例 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            .banner {
                width: 760px;
                height: 150px;

                margin: auto;
            }

            .nav {
                width: 760px;
                height: 32px;
                background: url(image/nav_bg.jpg) repeat-x;
                margin: auto;
            }

            .nav li {
                list-style: none;
                float: left;
            }

            .nav li a {
                display: block;
                width: 80px;
                height: 32px;
                text-align: center;
                line-height: 32px;
                text-decoration: none;
                color: #40510A;
                background: url(image/button1.jpg);

            }

            .nav li a:hover {background: url(image/button2.jpg);

            }
        </style>
    </head>
    <body>
        <!-- 广告条部份开始 -->
        <div class="banner">
            <img src="image/banner.jpg" alt="">
        </div>
        <!-- 广告条部份完结 -->


        <!-- 导航局部开始 -->
        <div class="nav">
            <ul>
                <li><a href="#"> 网站导航 </a></li>
                <li><a href="#"> 网站导航 </a></li>
                <li><a href="#"> 网站导航 </a></li>
                <li><a href="#"> 网站导航 </a></li>
                <li><a href="#"> 网站导航 </a></li>
                <li><a href="#"> 网站导航 </a></li>
            </ul>
        </div>
    </body>
</html>

浮动元素与父元素的关系

浮动的元素不会压住父元素的边框，也不会压住父元素的 padding 值，而且浮动的盒子与父盒子参照对齐 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 200px;
            background-color: red;
            border: 5px solid black;
            padding: 20px;
        }

        .son {
            width: 200px;
            height: 100px;
            float: left;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

浮动元素与兄弟元素的关系

1. 浮动的盒子只会影响前面的规范流盒子，并不会影响后面的规范流的盒子

2. 一个盒子浮动，其它的盒子也应该浮动 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            border: 1px solid red
        }

        .son1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .son2 {
            width: 400px;
            height: 200px;
            background-color: green;
            float: left;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>

</html>

为什么要革除浮动？

革除浮动的实质：是为了解决父元素因为子元素浮动而引起高度为 0 的状况。革除浮动后，父元素会自动检测浮动的子元素的高度，父元素有了高度后，就不会影响上面的规范流

革除浮动的办法 

 选择器 {clear: 属性值};  clear: 革除

额定标签法 

    在最初浮动的元素增加一对空标签，如 <div style="clear: both;"></div> 等等 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 800px;
            margin: auto;
            border: 1px solid red;
        }

        .box1 {
            width: 400px;
            height: 400px;
            background-color: green;
            float: left;
        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: black;
            float: left;

        }

        .box3 {
            height: 500px;
            width: 800px;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="box1"></div>
        <div class="box2"></div>
        <!-- 在最初浮动的元素前面增加一对空标签 -->
        <div style="clear: both;"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

长处：通俗易懂

毛病：减少很多没意义的标签，造成构造错乱

父级增加 overflow:hidden 即可 

 语法：overflow:hidden  |  auto  | scroll

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 800px;
            margin: auto;
            border: 1px solid red;
            /* 间接给父元素增加 overfolw-hidden */
            overflow: hidden;
        }

        .box1 {
            width: 400px;
            height: 400px;
            background-color: green;
            float: left;
        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: black;
            float: left;

        }

        .box3 {
            height: 500px;
            width: 800px;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

长处：书写代码不便

毛病：代码变多时而导致无奈显示被暗藏的内容

应用 after 伪元素革除浮动 

     .clearfix::after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            overflow: hidden;
        }

        .clearfix {
            *zoom: 1;
            /* 关照 ie6 ie7 的兼容性 */
        }

比拟完满 但有兼容性 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            
            padding: 0;
        }

        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            overflow: hidden;
        }

        .clearfix {
            *zoom: 1;
            /* 关照 ie6 ie7 的兼容性 */
        }

        .nav {
            width: 800px;
            margin: auto;
            border: 1px solid red;

        }

        .box1 {
            width: 400px;
            height: 400px;
            background-color: green;
            float: left;
        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: black;
            float: left;

        }

        .box3 {
            height: 500px;
            width: 800px;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div class="nav clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

双伪元素来革除浮动

语法 

.clearfix::before,
        .clearfix:after {
            content: "";
            display: table;

        }

        .clearfix:after {clear: both;}

        .clearfix {
            *zoom: 1;
            /* 关照 ie6 ie7 的兼容性 */
        }
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix::before,
        .clearfix:after {
            content: "";
            display: table;

        }

        .clearfix:after {clear: both;}

        .clearfix {
            *zoom: 1;
            /* 关照 ie6 ie7 的兼容性 */
        }

        .nav {
            width: 800px;
            margin: auto;
            border: 1px solid red;

        }

        .box1 {
            width: 400px;
            height: 400px;
            background-color: green;
            float: left;
        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: black;
            float: left;

        }

        .box3 {
            height: 500px;
            width: 800px;
            background-color: chartreuse;
        }
    </style>
</head>

<body>
    <div class="nav clearfix">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>

</html>

革除浮动的总结

ctrl+f 搜寻网页

ps 的基础知识

常见的图片格式

  • jpg
  • gif
  • png
  • psd:photoshop 的专用格局

ps 如何切片

  • 利用切片工具进行切片
  • 利用新建图层进行切片
  • 利用辅助线进行切片

正文完
css
发表至： css
2020-08-03
 0
关于css:commoncss
关于css:springboot-Swagger如何运行
关于css:使用CSS-Variable来实现可配置的微前端应用样式
关于css:适配常见问题