Bootstrap

百度前端实战训练营 Web布局(一)

布局与定位

布局包含两个含义:

  • 尺寸(盒子模型)
  • 定位(普通文档流)

css布局：

  • 通过css去拾取网页中的元素，并且控制它们相对普通文档流，周边元素，父容器甚至浏览器窗口的位置
  • 覆盖默认的布局行为

布局的基本概念

  • 盒子模型
  • 普通文档流：从左到右，从上到下
  • 普通文档流的基本元素：块级元素 行内元素(行内元素的宽高不能被指定) 行内块级元素

如何布局

  • 指定布局的标签display：block inline inlineblock

合理布局的作用

  • 使内容更加清晰
  • 页面载入更快
  • 有利于搜索引擎爬取

css的flex布局

flex布局：

  • flexbox的缩写 意为:“弹性布局”
  • 一维的布局模型
  • 任何一个容器都可以指定为flex布局

flex容器上的属性

  • flex-direction
  • flex-wrap
  • flex-flow

flex元素上的属性

  • flex-basis
  • flex-grow
  • flex-shrink

flex-grow

/*flex-frow*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .container{
            display: flex;
            border: 1px solid #666;
            width:600px
        }
        .item{
            width:100px;
            background-color: #edef38;
            border: 1px solid black;
            text-align:center;
        }

        .item-two{
            flex-grow: 1; 
        }
    </style>
</head><!--将多出的空间全部给item-two-->
<body>
    <div class="container">
        <div class="item item-one">1</div>
        <div class="item item-two">2</div>
        <div class="item item-three">3</div>
        <div class="item item-four">4</div>
        <div class="item item-five">5</div>
    </div>
</body>
</html>

flex-shrink

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .container{
        display: flex;
        border: 1px solid #666;
        width:450px
    }
    .item{
        width:100px;
        background-color: #edef38;
        border: 1px solid black;
        text-align:center;
        flex-shrink:0;
    }

    .item-three{
        flex-shrink: 1; 
    }
    </style>
</head><!--将溢出的部分全部由item-three来压缩-->
<body><!--由于如果在item中不指定flex-shrink：0,则默认item的flex-shrink：1,即溢出的部分由各个item平均分配来压缩-->
    <div class="container">
        <div class="item item-one">1</div>
        <div class="item item-two">2</div>
        <div class="item item-three">3</div>
        <div class="item item-four">4</div>
        <div class="item item-five">5</div>
    </div>
</body>
</html>

flex元素的对齐

  • align-items
  • justify-content

flex的适用场景

  • 导航
  • 拆分导航
  • 元素居中
  • 绝对底部

导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .navigator{
            background-color: #666;
            height: 45px;
            justify-content: space-between;
            padding: 0 20px;
            color: #fff;
            display: flex;
        }
        .left{
            text-align: left;
        }
        .right{
            text-align: right;
        }
    </style>
    <!--space-between表示最左边的元素对齐最左边，最右边的元素对齐最右边，中间的元素按等距离分开排列-->
</head>
<body>
    <div class="navigator">
        <div class="left" >网站名称</div>
        <div class="right">用户</div>
    </div>
</body>
</html>

元素居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    .container{
        border:1px solid #666;
        width:100px;
        height: 100px;
        display:flex;
        align-items: center;
        justify-content: center;
    }        
    .center{
        width: 32px;
        height: 32px;
        background-color: blue;
    }

    </style>
</head>
<body>
    <div class="container">
        <div class="center"></div>
    </div>
</body>
</html>

绝对底部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .container{
            display:flex;
            flex-direction: column;
            width: 300px;
            height: 500px;
            border:1px solid #666;
        }
        .content{
            flex-grow:1;/*将正文内容指定多出的空间全部分给正文内容*/
        }
        .footer{
            background-color: #999;/*底部就由于正文内容的撑开而显示在底部了*/
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="content">这是内容这是内容这是内容这是内容这是内容这是内容这是内容</div>
        <footer class="footer">这是底部</footer>
    </div>
</body>
</html>

css的定位：定位 浮动

  • 定位：能够把一个元素从它原本在正常布局流中应该在的位置移动到另一个位置

  • position：

  • static 静态定位

  • relative 相对定位

  • absolute 绝对定位

  • fixed 固定定位

  • sticky 粘性定位

  • 浮动：把一个元素浮动起来，会改变该元素本身和在正常布局流中跟随它的其它元素的行为

  • 这一元素会浮动到左侧或右侧，并且从正常布局流中移除，这时候其他的周围内容就会在这个浮动元素的周围环绕

定位四种类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            border: 1px solid #666;
            width: 500px;
            height: 300px;
            margin: 100px;
            position:fixed;
        }
        .child{
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            top: 30px;
            left: 30px;
        }
         /*指定child为relative的话是相对于默认应该存在位置的偏移*/
         /*指定child为absolute的话则子级元素可以在父级元素的父级元素的父级元素...直到定位不为静态定位为止内固定位置显示，实质上是相对于非static元素的偏移*/
         /*从这里以上父级容器先不设position，则默认值为静态定位*/
         
         /*从这里开始父级容器设position*/
         /*指定child为absolute，container不为static则为子级元素相对于父级元素的偏移*/
         /*指定child为fixed，不管父级容器position为什么都与它无关，fixed只相对于网页的偏移*/
    </style>
</head>
<body>
    <div class="container">
        <div class="child"></div>
    </div>
</body>
</html>

定位sticky

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 500px;
            height: 200px;
            margin: 0 auto;
        }
        dt{
            background-color: black;
            color: white;
            padding: 10px;
            position: sticky;
            top: 0;
            left: 0;
            margin: 1em 0;
        }
    </style>
</head>
<body>
    <h1>Sticky positioning</h1>
    <dl>
        <dt>A</dt>
        <dt>Apple</dt>
        <dt>Ant</dt>
        <dt>Altimeter</dt>
        <dt>Airplane</dt>
    
        <dt>B</dt>
        <dt>Bird</dt>
        <dt>Buzzard</dt>
        <dt>Bee</dt>
        <dt>Banana</dt>
        <dt>Beanstalk</dt>
        
        <dt>C</dt>
        <dt>Calculator</dt>
        <dt>Cane</dt>
        <dt>Camera</dt>
        <dt>Camel</dt>
        
        <dt>D</dt>
        <dt>Duck</dt>
        <dt>Dime</dt>
        <dt>Dipstick</dt>
        <dt>Drone</dt>
        
        <dt>E</dt>
        <dt>Egg</dt>
        <dt>Elephant</dt>
        <dt>Egret</dt>
    </dl>

</body>
</html>

浮动-环绕：造成浮动元素后面的元素受到影响导致浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .container{
        border: 1px solid #666;
        width: 500px;
        height: 200px;
       } 
        img{
            width: 50px;
            height: 50px;
            float: left;/*设置浮动，脱离文档流，其他元素就会环绕它*/
            margin: 0 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="1.webp" alt="">
        <p>文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字</p>
    </div>
</body>
</html>

浮动的缺点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 800px;
            height: 800px;
            border: 1px solid #666;
        }
        .col{
            width: 200px;
            float: left;
            margin: 20px;
        }
        .right{
            float:right;/*clear:right清除浮动*/
        }
        .no-float{
            border: 1px solid #999;
        }
        .no-float-bottom{
            border: 1px solid #999;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="col">我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动我在左边浮动
            <div class="col">
                我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容
                我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容我是中间内容

            <div class="col right">我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动我在右边浮动</div>
        </div>
        <div class="no-float">我不想浮动</div>
        <div class="no-float-bottom">我也不想浮动</div>
    </div>
</body>
</html>

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
[NOIP2008]传球游戏
Golang | Leetcode Golang题解之第240题搜索二维矩阵II
Ajax：原生ajax、使用FormData的细节问题，数据的载体
Web漏洞-任意文件读取漏洞
快速搭建一个在线聊天网站
系统分析师知识点汇总
github 丢失Two-factor Authentication code怎么处理
数字证书及其认证过程
操作系统实验：安装VMWare虚拟机、Qemu、建立xv6运行环境
架构设计：负载均衡层设计方案（5，java二叉树面试题总结
;