优秀的编程知识分享平台

网站首页 > 技术文章 正文

web开发之-前端css(5)（css前端设计）

nanyue 2025-06-04 00:13:19 技术文章 5 ℃

显示

控制一个元素的显示方式，我们可以使用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>


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

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

Tags：

猜你喜欢

最近发表
标签列表