CSS 3 浮動佈局，深度挖掘-2 -cyy

時間 2020-11-16

標籤 css html 瀏覽器 ide 網站 url spa code htm 欄目 CSS 简体版

原文原文鏈接

環繞距離控制：css

<!DOCTYPE html>
<html>
<head>
<title>css</title>
<style type="text/css">
    p{
        border:2px solid #ddd;
        padding:10px;
        overflow:hidden;
    }
    span.shape{
        width:200px;
        height:200px;
        border:2px solid red;
        padding:5px;
        margin:5px;
        display:block;
        float:left;
        /*環繞距離控制：*/
        shape-outside:content-box;
        shape-outside:padding-box;
        shape-outside:border-box;
        shape-outside:margin-box;
    }
</style>
</head>

<body>
<p>
<span class="shape"></span>
    HTML5是構建Web內容的一種語言描述方式。HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式．被認爲是互聯網的核心技術之一。HTML產生於1990年，1997年HTML4成爲互聯網標準，並普遍應用於互聯網應用的開發。
HTML5是Web中核心語言HTML的規範，用戶使用任何手段進行網頁瀏覽時看到的內容本來都是HTML格式的，在瀏覽器中經過一些技術處理將其轉換成爲了可識別的信息。HTML5在從前HTML4.01的基礎上進行了必定的改進，雖然技術人員在開發過程當中可能不會將這些新技術投入應用，可是對於該種技術的新特性，網站開發技術人員是必需要有所瞭解的。
</p>
</body>

</html>

浮動顯示區域形狀定製：html

<!DOCTYPE html>
<html>
<head>
<title>css</title>
<style type="text/css">
    p{
        border:2px solid #ddd;
        padding:10px;
        overflow:hidden;
    }
    span.shape{
        width:100px;
        height:100px;
        background:pink;
        margin:5px;
        display:block;
        float:left;
        shape-outside:margin-box;
        /*圓形，at後面設置圓心*/
        clip-path:circle(50%);
        clip-path:circle(50% at 100% 0);
        clip-path:circle(50% at 100% 100%);
        /*橢圓*/
        clip-path:ellipse(30% 50%);
        /*多邊形*/
        clip-path:polygon(50% 0,100% 100%,0 100%);
        clip-path:polygon(50% 0,100% 50%,100% 100%,0 100%,0 50%);
    }
</style>
</head>

<body>
<p>
<span class="shape"></span>
    HTML5是構建Web內容的一種語言描述方式。HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式．被認爲是互聯網的核心技術之一。HTML產生於1990年，1997年HTML4成爲互聯網標準，並普遍應用於互聯網應用的開發。
HTML5是Web中核心語言HTML的規範，用戶使用任何手段進行網頁瀏覽時看到的內容本來都是HTML格式的，在瀏覽器中經過一些技術處理將其轉換成爲了可識別的信息。HTML5在從前HTML4.01的基礎上進行了必定的改進，雖然技術人員在開發過程當中可能不會將這些新技術投入應用，可是對於該種技術的新特性，網站開發技術人員是必需要有所瞭解的。
</p>
</body>

</html>

使用浮動控制文本內容環繞排版：瀏覽器

<!DOCTYPE html>
<html>
<head>
<title>css</title>
<style type="text/css">
    p{
        border:2px solid #ddd;
        padding:10px;
        overflow:hidden;
    }
    span.shape{
        width:100px;
        height:100px;
        background:pink;
        margin:5px;
        display:block;
        float:left;
        /*將shape-outside的值，設置成跟clip-path一致*/
        shape-outside:polygon(0 0,100% 100%,0 100%);
        clip-path:polygon(0 0,100% 100%,0 100%);
        shape-outside:circle();
        clip-path:circle();
        shape-outside:ellipse(30% 70%);
        clip-path:ellipse(30% 70%);
    }
</style>
</head>

<body>
<p>
<span class="shape"></span>
    HTML5是構建Web內容的一種語言描述方式。HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式．被認爲是互聯網的核心技術之一。HTML產生於1990年，1997年HTML4成爲互聯網標準，並普遍應用於互聯網應用的開發。
HTML5是Web中核心語言HTML的規範，用戶使用任何手段進行網頁瀏覽時看到的內容本來都是HTML格式的，在瀏覽器中經過一些技術處理將其轉換成爲了可識別的信息。HTML5在從前HTML4.01的基礎上進行了必定的改進，雖然技術人員在開發過程當中可能不會將這些新技術投入應用，可是對於該種技術的新特性，網站開發技術人員是必需要有所瞭解的。
</p>
</body>

</html>

圍繞圖片的文本繞排：ide

<!DOCTYPE html>
<html>
<head>
<title>css</title>
<style type="text/css">
    p{
        border:2px solid #ddd;
        padding:10px;
        overflow:hidden;
    }
    img{
        width:100px;
        height:100px;
        margin:5px;
        display:block;
        float:left;
        /*將shape-outside的值，設置成跟url一致*/
        shape-outside:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604813720912&di=9cd496dbf6cb5870254d4aef6b6854bc&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F15%2F20200715071202_ofuwl.thumb.400_0.jpeg);
    }
</style>
</head>

<body>
<p>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604813720912&di=9cd496dbf6cb5870254d4aef6b6854bc&imgtype=0&src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F15%2F20200715071202_ofuwl.thumb.400_0.jpeg">
    HTML5是構建Web內容的一種語言描述方式。HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式．被認爲是互聯網的核心技術之一。HTML產生於1990年，1997年HTML4成爲互聯網標準，並普遍應用於互聯網應用的開發。
HTML5是Web中核心語言HTML的規範，用戶使用任何手段進行網頁瀏覽時看到的內容本來都是HTML格式的，在瀏覽器中經過一些技術處理將其轉換成爲了可識別的信息。HTML5在從前HTML4.01的基礎上進行了必定的改進，雖然技術人員在開發過程當中可能不會將這些新技術投入應用，可是對於該種技術的新特性，網站開發技術人員是必需要有所瞭解的。
</p>
</body>

</html>