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小時內與您取得聯系。

整合營銷服務商