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

最新推荐文章于 2024-03-10 07:48:51 发布
最新推荐文章于 2024-03-10 07:48:51 发布
阅读量257 收藏
点赞数
分类专栏： 百度前端实战训练营 文章标签： 前端 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cichu77/article/details/128603093
版权
文章详细介绍了CSS中的布局技术，包括盒模型、普通文档流、flex布局以及定位原理。重点讲解了flex布局的属性如flex-grow和flex-shrink，以及如何通过align-items和justify-content实现元素的对齐。同时，文章还对比了定位的不同方式，如relative、absolute、fixed和sticky，并探讨了浮动元素的影响及缺点。
摘要由CSDN通过智能技术生成

布局与定位

布局包含两个含义:

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

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>
辞初
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度前端实战训练营--CSS基础
hechengjiang_009的博客
01-07 670
百度前端实战训练营——CSS基础
百度前端实战训练营--HTML基础
hechengjiang_009的博客
01-05 461
百度前端实战训练营--HTML基础
淘宝首屏静态页面（HTML+CSS）布局练习.zip
05-07
适合刚接触前端基础知识的同学，初步了解了HTML+CSS后，可以尝试练习类似项目；该项目主要为HTML+CSS实现，不涉及交互、逻辑功能，旨在提高样式布局能力
前端小练习～网页布局
qq_53142796的博客
04-05 203
【前端初学者】【案例】之CSS浮动布局：简单网页布局练习——附代码实操（上）
HY_Sophie的博客
11-23 659
【前端初学者】【案例】之CSS浮动布局：简单网页布局练习——附代码实操（上）
百度前端技术实战训练营——Web布局（上）
qq_62215764的博客
01-12 735
CSS布局指通过CSS去拾取网页中的元素，并且控制它们相对普通文档流、周边元素、父容器甚至浏览器窗口的位置，覆盖默认的布局行为。\newline合理布局的作用：网站通常分为页眉、菜单、内容和页脚。
实训第三天：前端的页面布局
没有
07-24 176
实训第三天：前端的页面布局 div与css流行的布局方式 盒子模型 margin:两个盒子之间的距离，外边距 border：盒子的边框，相当于盒子的壳 padding:盒子的内边距，相当于盒子的填充物 content:内容 盒子模型的四要素 外边距 内边距 边框 内容 margin padding border content 盒子模型的六要素 外边距 内边距 边框 内容 宽 高 margin padding border content wid
2019最新前端6天高薪训练营视频教程
01-04
综上所述，这套2019年最新的前端6天高薪训练营视频教程应该会涵盖以上提到的所有知识点，并通过实战案例帮助学习者快速上手，成为一名合格的Web前端开发者。无论是对于初学者还是有一定经验的开发者来说，系统地学习...
bootcamp_08172015:前端训练营
05-12
通常这样的训练营会包含一系列的讲座、实战练习和项目开发，帮助开发者快速掌握前端开发的核心技能，并了解当时的行业趋势和技术标准。 【标签】为空，这可能意味着没有提供特定的技术焦点或者主题，或者该训练营...
cv：完整的2020 Web开发新手训练营
02-18
【标题】"cv：完整的2020 Web开发新手训练营"揭示了这是一个针对Web开发初学者的全面学习资源，可能包含一系列课程、教程或项目，旨在帮助学员在2020年掌握Web开发的基础技能。这个训练营可能涵盖了前端到后端的各个...
前端之页面布局
爱是与世界平行
06-23 1168
前端的知识笼笼统统有很多，今天学习整理页面布局。在自己学习的时候，页面布局方面也是一个稍微有点难度的地方，通常需要一些时间构思，而且在写的时候都会遇到各种各样的问题，希望可以学到一个好的方法或技巧，利于页面布局的设计与开发。盒模型学习html，盒模型肯定是一个必备的知识，对盒模型的学习也是每一个初学者必学的知识点。 在一个文档中，每个元素都被表示为一个矩形的盒子。确定尺寸, 属性 — 像它的颜色，
前端学习-布局练习
旱鸭子
10-02 485
效果图: <!-- * @Description: In User Settings Edit * @Author: your name * @Date: 2019-10-02 10:16:08 * @LastEditTime: 2019-10-02 19:54:30 * @LastEditors: Please set LastEditors --> <!DOC...
Web前端开发技术（第3版） 实训5 项目16 DIV+CSS页面布局
weixin_59486604的博客
03-30 1868
这是思考区 </div> --> <!-- <div id="content">这是严肃区</div> --> <!-- <div id="menu">这是快乐水管够区</div> --> <!-- <div id="content">这是发呆区
2021/3/23--前端布局练习
A444477的博客
03-23 388
2021/3/23–前端布局练习 要求： 解题代码： <!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
vue3前端开发系列 - flex布局篇
硅谷工具人
10-08 3206
采用flex布局的元素，成为flex容器，它的所有子元素自动成为容器成员。通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。
前端布局 Flex（弹性）布局
热门推荐
qq_63512287的博客
10-15 1万+
前端布局中的Flex布局
HTML+CSS练习-页面布局
最新发布
m0_44965777的博客
03-10 485
实现效果： 文件 HTML CSS 图片
百度前端实战训练营--开营介绍
hechengjiang_009的博客
01-04 1721
百度前端训练营（个人记录）
菜鸟学习笔记——前端开发——CSS（5） 实例练习
zhihuiyu123的博客
06-21 3798
由于上次做网页布局的练习摔得有点惨，这次再找一个练一练。例题网址    http://www.runoob.com/w3cnote/htmlcss-make-a-website.html这次练习的是——简单的响应式网页step1：只布局，无响应效果导航栏由于之前练习过，暂时没什么难度；中间部分左右分布（一开始用的float）；下方一个页脚。这一步马马虎虎完成，然而调整窗口大小之后，页面就像一坨某某...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值