css中的盒子模型及其浮動

2021-08-04 08:23:14 字數 1083 閱讀 4477

margin:外邊距  當前盒子與其他盒子的距離

1個值 上下左右採用統一的值

2個值 上下和左右採用不同的值 上下採用第乙個值 左右採用第二個值

3個值 上 左右 下 ;

4個值  按順時針的順序  上右下左

margin-top margin-left margin-right  margin-bottom

padding:內邊距  :內容和邊框之間的距離(其屬性值的用法與margin相同)

border-style的屬性

none:無邊框

dotted:點邊框

solid:實線邊框

double:雙線

groove:定義3d溝槽邊界

ridge:定義3d脊邊界

inset:定義3d嵌入邊框

outset:定義3d突出邊框

border-color要和border-style配合使用

外邊距,內邊距,邊框都會影響內容的寬度。

box-shadow :x軸方向偏移 y軸方向偏移  模糊範圍 陰影拓展範圍 陰影顏色(右下角)

inset 內陰影(左上角)

outline:輪廓線 不會佔據空間

盒子的擺放模式:

標準流模式

塊級盒子

行級盒子

浮動盒子

浮動盒子不會自動展開,表現為行級元素的樣子,且標準盒子視浮動盒子為不存在而佔據浮動盒子的位置,但內容會受到浮動盒子的影響。

父級盒子中的所有合資都採用浮動元素,若父級盒子未指定高度,則父級盒子高度為0

可以設定clear屬性,使標準流中的元素不受浮動屬性的影響

清除浮動的三種方式:

1.新增clear:both屬性 ( 不推薦)

2.為父元素新增乙個div。並為其新增clear:both屬性(會給**增加乙個div)

3.為父元素新增乙個偽類 after屬性:

.cleanfix:after

如果瀏覽器不相容,新增zoom:1

CSS浮動 盒子模型

因為div都是獨自佔一行,如果想要幾個div佔一行就要使用浮動。one two three 頁面展示 紅色框向右浮動 乙個頁面的寬度最長是1350px如果第三個浮動框 每個浮動框是500px 放不下會自動浮動到下一行如果第乙個浮動框高度比第二個浮動框高度要大,就會出現下圖的情況。清除浮動 如果想要浮...

css盒子模型,定位,浮動

1.盒子模型 margin 外邊距 清除邊框外的區域,外邊距是透明的。border 邊框 圍繞在內邊距和內容外的邊框。padding 內邊距 清除內容周圍的區域,內邊距是透明的。content 內容 盒子的內容,顯示文字和影象。最終元素的總寬度計算公式是這樣的 總元素的寬度 寬度 左填充 右填充 左...

CSS的浮動與盒子模型

一 浮動 1.css浮動 浮動就是讓塊級標籤不獨佔一行,目的 使用場景 是讓塊級標籤元素可以排在一行上。浮動元素會生成塊級框 2.float 屬性值 left左浮動 right有浮動 none預設值,不浮動 也可以取消 inherit 3.浮動的原理就是讓元素脫離文件流 文件流是指文件中可顯示物件在...