web开发之-前端css(5)

myzbx 2025-01-08 15:46 13 浏览

显示

控制一个元素的显示方式，我们可以使用display:block;display:inline-block;display:none;其中布局相关的还有两个很重要的属性:display:flex;和display:grid;flex表示弹性盒子，grid表示网格；

布局

我们使用一个三例的布局为例来试一下:

display:flex;

<html>
    <head>
        <title>css</title>
    </head>
    <body>
        <div style="height: 900px;">
            <div style="width: 100%;height:100px;background:grey">我是头部</div>
            <div style="display: flex;height: 100%;">
                <div style="width: 100px;height: 100%;background:yellow;">左侧</div>
                <div style="width:100%;background:burlywood">中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间</div>
                <div style="width: 100px;height: 100%;background:yellow;">右侧</div>
            </div>
        </div>
    </body>
</html>

<html>
    <head>
        <title>css</title>
    </head>
    <body>
        <div class="container">
            <div class="item">flex1</div>
            <div class="item">flex2</div>
            <div class="item">flex3</div>
            <div class="item">flex4</div>
            <div class="item">flex5</div>
            <div class="item">flex6</div>
            <div class="item">flex7</div>
            <div class="item">flex8</div>
        </div>
    </body>
    <style>
        .container{
            display: flex;
            width:600px;
            height: 900px;
            background:grey;
            flex-direction: row; /** 设置排列的方式 row 横向  row-reverse 横向反转  column 纵向  column-reverse*/
            justify-content: flex-start; /** 设置每一个列的对齐方向 flex-start靠左排开,flex-end靠右排列,center居中排列,space-between左右靠边平均对齐，space-around */
            flex-wrap: wrap;/***是否换行 wrap换行,nowrap不换行，wrap-reverse倒序换行*/
            align-content: flex-start; /**用于设置各行之间如何对齐*/
            align-items:flex-start; /**设置纵向的排列方式*/ 
        }
        .item{
            width: 100px;
            height: 100px;
            margin: 10px;
            background:yellow;
        }
    </style>
</html>

注：以下的属性设置大家可以去尝试一下。

flex-direction: row; /** 设置排列的方式 row 横向 row-reverse 横向反转 column 纵向 column-reverse*/

justify-content: flex-start; /** 设置每一个列的对齐方向 flex-start靠左排开,flex-end靠右排列,center居中排列,space-between左右靠边平均对齐，space-around */

flex-wrap: wrap;/***是否换行 wrap换行,nowrap不换行，wrap-reverse倒序换行*/

align-content: flex-start; /**用于设置各行之间如何对齐*/

align-items:flex-start; /**设置纵向的排列方式*/

display:grid:

<html>
    <head>
        <title>css</title>
    </head>
    <body>
        <div style="height: 900px;">
            <div style="width: 100%;height:100px;background:grey">我是头部</div>
            <div style="display: grid;height: 100%;grid-template-columns: 100px auto 100px;">
                <div style="background:yellow">左侧</div>
                <div style="background:burlywood">中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间中间</div>
                <div style="background:yellow">右侧</div>
            </div>
        </div>
    </body>
</html>

以上我们只是用一个三例布局讲了一下基本的内容，这里布局还有很多属性，大家可以去试一下。一定得看，哪怕你不去手写，也要看一下那些属性的作用，因为这块太重要了，但是属性又太多了，要写起来可劲得写了，大家看不明白的，可以给我留言，我会看到给大家回复的！

浮动

浮动属性float会使元素脱离文档流，使其他内容重新排列，我们常见的文字环绕效果可以使用浮动来实现：

<html>
    <head>
        <title>css</title>
    </head>
    <body>
        <div>
            <div style="width: 100px;height:100px;padding:50px;border:1px solid black;float:left;left:0px;top:0px;">浮动</div>
            <div>显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容
                显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容
                显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容
                显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容显示内容内容
            </div>
        </div>
    </body>
</html>

我们缩小一下窗口就能看到效果。

注：布局属性很重要，大家一定要去看，去写！

HTML 元素（功能排序）

web开发之-前端css(5)

显示

布局

浮动

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

20个免费音乐音效下载网站，无版权素材商业影片也可用

什么是“恒定光圈”，什么是“浮动光圈”?-摄影早自习第331

谷歌SEO:外贸电商网站On-page SEO优化实战「附案例」