WEB基礎之 CSS浮動和嵌入形狀

2. 嵌入形狀shapes

2.2 shape-margin

float屬性允許浮動任何元素，如：影象、段落、列表。

屬性值描述

left

元素向左浮動。

right

元素向右浮動。

none

預設值。元素不浮動，並會顯示在其在文字**現的位置。

inherit

規定應該從父元素繼承 float 屬性的值。

p

img

浮動元素的左(或右)外邊界不能超出其包含塊的左(或右)內邊界。

防止元素彼此覆蓋，浮動元素的左(或右)外邊界必須是源文件中之前出現的左浮動(右浮動)元素的右(或左)外邊界，除非後出現浮動元素的頂端在先出現浮動元素的底端下面。

左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊。右浮動元素的左外邊界不會在其左邊左浮動元素的右外邊界的左邊。這條規則避免浮動的元素重疊。假如網頁正文的寬度是500畫素，內容裡有兩個影象，都是300畫素寬。第乙個影象向左浮動，第二個影象向右浮動。根據這條規則，第二個影象不會與第乙個影象出現100畫素寬的重疊區域。事實上，第二個影象的頂邊將正好在左浮**像的底邊以下。

乙個浮動元素的頂端不能比其父元素的內頂端更高。

浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高。

如果源文件中乙個浮動元素之前出現另乙個元素，浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端更高。

浮動元素不能超出其包含元素的邊界。左(或右)浮動元素的左(或右)邊有另乙個浮動元素，前者的右外邊界不能在其包含塊的右(或左)邊界的右(或左)邊。如果沒有足夠的空間，浮動元素會被擠到乙個新的「行上」

浮動元素必須盡可能高地放置。即滿足其他約束條件的前提下，浮動得盡可能高。

左浮動元素必須向左盡可能遠，右浮動元素則必須向右盡可能遠。

浮動規則只處理了浮動元素和其父元素的左、右和上邊界；沒有涉及下邊界。

浮動元素會延伸從而包含其所有後代浮動元素。

負外邊距可能導致浮動元素移到其父元素的外面。當浮動元素比其父元素更寬，浮動元素會超出其父元素的左右內邊界，從而盡可能正確的顯示。

對於行內元素：

- 行內框與乙個浮動元素重疊時，其邊框、背景和內容都在該浮動元素之上顯示。 - 塊框與乙個浮動元素重疊時，其邊框和背景在該浮動元素之下顯示，而內容在浮動元素之上顯示。

clear 屬性規定元素的哪一側不允許存在浮動元素。

屬性值描述

left

在左側不允許浮動元素。

right

在右側不允許浮動元素。

both

在左右兩側均不允許浮動元素。

top在頂部不允許浮動元素。

bottom

在底部不允許浮動元素。

none

預設值。允許浮動元素出現在兩側。

inherit

規定應該從父元素繼承 clear 屬性的值。

clear
: both;

注：大多數情況下，無法知道乙個元素周圍多大範圍內不允許有浮動元素，要確保乙個設定clear屬性的元素的頂端與乙個浮動元素的底端之間有一定空間。可以為浮動元素本身設定乙個下外邊距。如：

img

shape-outside屬性指定使用下面列表的值來定義浮動元素的浮動區域。這個浮動區域決定了行內內容（浮動元素）所包裹的形狀。

屬性值描述

none

浮動區域不受影響，行內元素以預設的方式包裹著該元素的margin box。

shape-box

根據浮動元素的邊緣（通過 css box model 來定義）形狀計算出浮動的區域。可能是 margin-box, border-box, padding-box, 或者 content-box。這個形狀包括了由 border-radius 屬性製造出來的弧度（與 background-clip 的表現類似）。

basic-shape

基於 inset()， circle()， ellipse()，或者 polygon()其中乙個創造出來的形狀計算出浮動區域。如果同時存在，那麼會為方法定義乙個參考盒，這個參考盒預設為 margin-box 。

image

提取並且計算指定的alpha通道得出浮動區域（譯者：即根據的非透明區域進行包裹）。就跟通過 shape-image-threshold來定義一樣。

2.1.1 shape-box的型別

2.1.2 basic-shape的型別

2.1.3 語法

/* 關鍵字值 */
shape-outside
: none;
shape-outside
: margin-box;
shape-outside
: content-box;
shape-outside
: border-box;
shape-outside
: padding-box;
/* 函式值 */
shape-outside
:circle()
;shape-outside
:ellipse()
;shape-outside
:inset
(10px 10px 10px 10px)
;shape-outside
:polygon
(10px 10px, 20px 20px, 30px 30px)
;/* 值 */
shape-outside
:url(image.png)
;/* 漸變值 */
shape-outside
:linear-gradient
(45deg, rgba
(255, 255, 255, 0) 150px, red 150px)
;/* 全域性值 */
shape-outside
: initial;
shape-outside
: inherit;
shape-outside
: unset;

舉例：

img.plane

參考：shape-outside

shape-margin用於設定由shape-outside建立的css形狀的外邊距。

shape-margin
: 0;
shape-margin
: 20px;
shape-margin
: 1em;
shape-margin
: 5%;

WEB基礎之 CSS浮動和嵌入形狀

CSS基礎學習十八 CSS布局之浮動

WEB基礎之 CSS字型

web前端基礎之css

WEB基礎之 CSS浮動和嵌入形狀

CSS基礎學習十八 CSS布局之浮動

WEB基礎之 CSS字型

web前端基礎之css

相關推薦