web开发之-前端css(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>

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

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

是Web开发和CSS的新手吗？你是否想过如何在互联网上看到那些漂亮的形状？别再奇怪了。你来对地方了。

下面，我将解释使用CSS创建形状的基本知识。还有很多要告诉你关于这个话题！因此，我不会涵盖所有（绝大部分）工具和形状，但这应该使你基本了解如何使用CSS创建形状，并且创建文字环绕图形的方式方法。

有些形状比其他形状需要更多的“技巧和窍门”。使用CSS创建形状通常是使用宽度，高度，顶部，右侧，左侧，边框，底部，变换和伪元素（例如：before和：after）的组合。我们还具有更现代的CSS属性，可使用诸如shape-outside和clip-path之类的形状来创建形状，这些内容我将在后面写出来。

SS的shape-outside属性允许你定义一个元素（通常是浮动元素）的外部形状。这个形状可以是矩形、圆形或者自定义路径，它会影响其周围浮动元素的布局。shape-outside可以用于创造一些视觉上非常有趣的文本环绕效果，比如让文本环绕一张图片、一个形状或者其他浮动元素。

一个典型的效果如下所示：

1. 基本用法

想要完成上面的效果，需要先掌握shape-outside的一些基本用法：

矩形 (rectangle): 使用border-radius属性可以创建圆角矩形。

.float-element {
  shape-outside: rectangle(10px, 10px, 10px, 10px); /* 设置圆角 */
}

圆形 (circle): 可以指定圆形的半径。

.float-element {
  shape-outside: circle(50%); /* 半径为元素宽度的50% */
}

椭圆形 (ellipse): 可以指定椭圆形的两个半径。

.float-element {
  shape-outside: ellipse(50% 25%); /* 水平半径50%，垂直半径25% */
}

多边形 (polygon): 可以创建具有任意数量边的多边形，需要指定每个顶点的坐标。

.float-element {
  shape-outside: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); /* Optional: to clip the element itself to a circle */

}

路径 (path): 使用SVG路径定义形状。

.float-element {
  shape-outside: path('M10,10 L50,10 L50,50 L10,50 Z');
}

2. 文本环绕

shape-outside属性最常用于创建文本环绕效果。当一个浮动元素的shape-outside属性设置为margin-box、border-box或padding-box时，文本会环绕该元素的相应盒子模型边缘。此外，还可以使用url()函数引用图片或SVG的路径作为形状。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circular Clip Text Around Image</title>
<style>
  .float-image {
    float: left;
    shape-outside: circle(50%); /* 50% of the element's width */
    width: 200px; /* Width of the image */
    height: 200px; /* Height of the image */
    margin: 10px;
    padding: 5px;
    border: 1px solid #000;
    background-image: url('./强.jpg'); /* Replace with your image path */
    background-size: cover; /* Ensure the image covers the entire element */
    clip-path: circle(50%); /* Optional: to clip the element itself to a circle */
  }

</style>
</head>
<body>

<div class="float-image"></div>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed blandit ligula non leo cursus, vitae eleifend nisl molestie. Nulla quis ligula at mauris rhoncus vestibulum. Maecenas at nulla ipsum. Donec rutrum congue leo at malesuada. Integer auctor tristique sem, vitae lacinia sem sagittis sed. Nullam auctor, enim nec pellentesque aliquam, arcu dui lacinia mauris, id lobortis enim odio id felis.
  </p>

</body>
</html>

在这个示例中：

.float-image 类定义了一个浮动的圆形图片元素，其中 shape-outside 属性使文本环绕该圆形。
.text-wrap 类定义了文本块的样式，它有一个左边距，以适应图片的宽度和边距。
CSS 的 background-image 属性用于将图片设置为元素的背景，并使用 background-size: cover; 确保图片完全覆盖元素，而不改变其宽高比。
一个可选的 clip-path: circle(50%); 被添加到 .float-image，这样图片本身也被裁剪成圆形。
HTML 中的 <div> 元素用于创建图片和文本环绕效果。

兼容性和注意事项

shape-outside是CSS Shapes Module Level 1的一部分，并非所有浏览器都支持。
当使用自定义形状时，确保为不支持shape-outside的浏览器提供一个回退样式。
使用shape-outside时，要注意性能影响，尤其是使用复杂路径或图片作为形状时。

3. 更多示例

示例 1：使用圆形环绕图片

.float-image {
  float: left;
  shape-outside: circle(50%); /* 50% 指的是图片宽度的一半 */
  width: 200px; /* 图片的宽度 */
  height: 200px; /* 图片的高度 */
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
  background-image: url('path/to/image.jpg');
  background-size: cover; /* 确保图片覆盖整个浮动元素 */
}

在这个例子中，文本将环绕一个圆形图片。

示例 2：使用椭圆形环绕图片

.float-image {
  float: left;
  shape-outside: ellipse(50% 25%); /* 水平半径是宽度的50%，垂直半径是高度的25% */
  width: 200px;
  height: 100px;
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

这里文本环绕的是一个椭圆形图片。

示例 3：使用多边形环绕文本

.float-shape {
  float: left;
  shape-outside: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
  margin: 10px;
  width: 150px;
  height: 150px;
  background-color: #f0f0f0; /* 背景颜色，用于演示形状 */
  clip-path: polygon(0% 50%, 50% 0%, 100% 50%, 50% 100%);
}

在这个例子中，文本将环绕一个钻石形状的元素。

示例 4：使用SVG路径环绕文本

.float-svg {
  float: left;
  shape-outside: path('M10,10 L50,10 L50,50 L10,50 Z');
  margin: 10px;
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
}

这里文本环绕的是一个通过SVG路径定义的自定义形状。

示例 5：文本环绕带有图片的复杂形状

.float-image-complex {
  float: left;
  shape-outside: url('path/to/complex-shape.svg#shapeID');
  margin: 10px;
  padding: 5px;
  border: 1px solid #000;
  width: 200px;
  height: 150px;
  background-image: url('path/to/image.jpg');
  background-size: cover;
}

在这个例子中，文本环绕的是一个SVG文件中定义的复杂形状，并且该形状元素背后有一张图片。

示例 6：使用margin属性增加环绕空间

.float-shape {
  float: left;
  shape-outside: circle(50%);
  margin: 20px; /* 增加环绕空间 */
  width: 150px;
  height: 150px;
  background-color: #f0f0f0;
}

通过增加margin属性的值，可以让文本与形状之间有更多的空间。

4. shape-outside 使用场景

shape-outside属性除了用于环绕文本之外，还可以用于其他一些创造性的布局和设计效果。例如：

1. 创造视觉焦点

通过使用shape-outside创建非矩形的浮动元素，可以吸引用户的注意力，引导他们的视线。例如，一个心形或星形的浮动元素可以作为页面上的一个视觉焦点。

2. 设计响应式布局

在响应式设计中，可以使用shape-outside来创建适应不同屏幕尺寸的布局。例如，一个形状可以根据视口的大小变化而变化，从而影响其周围元素的布局。

3. 制作有趣的按钮和链接

可以给按钮或链接设置shape-outside，让文本环绕这些形状，创造独特的交互元素。

4. 增强数据可视化

在数据可视化中，可以使用shape-outside来增强图表和图形的视觉效果，例如，让文本环绕一个饼图或柱状图的轮廓。

5. 制作动画效果

结合CSS动画，shape-outside可以用于创建动态变化的形状，从而影响其周围元素的布局和动画效果。

6. 增强表单元素的视觉效果

可以让表单元素如输入框或按钮采用非标准的形状，以提升表单的视觉吸引力。

7. 创造艺术作品和背景

使用shape-outside可以创建复杂的艺术作品或背景图案，这些形状可以是几何图形、自然形状或其他抽象图案。

8. 制作导航菜单

可以设计一个非传统的导航菜单，其中菜单项采用独特的形状，并且菜单项周围的文本环绕这些形状。

9. 增强品牌元素

如果品牌有特定的形状标志或图案，可以使用shape-outside将这些元素融入到网页设计中，增强品牌识别度。

10. 制作游戏界面

在游戏或互动应用中，可以使用shape-outside来创建有趣的界面元素，如环绕特定形状的得分或生命值显示。

在线咨询

上一篇：2025年公务员考试网课视频课程资源全套百度云网盘分
下一篇：前端自适应布局方法总结

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商