html CSS的盒子模型

2021-07-31 05:34:55 字數 1280 閱讀 5206

css的盒子模型1

◇邊框(border)

上 border-top

下 border-bottom

左 border-left

右 border-right

◇內補丁(paddings):內邊距

上  padding-top

下  padding-bottom

左  padding-left

右  padding-right

◇外補丁(margins):外邊距

上  margin-top

下  margin-bottom

左  margin-left

右  margin-right

css的盒子模型2

☆css布局——漂浮

◇ float : none | left | right

none : 預設值。物件不飄浮

left : 文字流向物件的右邊

right : 文字流向物件的左邊

◇ clear : none | left | right | both--清除

none :  預設值。允許兩邊都可以有浮動物件 

left :  不允許左邊有浮動物件 

right :  不允許右邊有浮動物件 

both :  不允許有浮動物件

css的盒子模型3

☆css布局——定位

static :  預設值。無特殊定位,物件遵循html定位規則。 

absolute : 將物件從文件流中拖出,使用 left , right , top , bottom 等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件,則依據 body 物件。而其層疊通過 z-index 屬性定義。

fixed :  未支援。物件定位遵從絕對(absolute)方式。但是要遵守一些規範。 

relative : 物件不可層疊,但將依據 left , right , top , bottom 等屬性在正常文件流中偏移位置。

舉例: 

position: absolute;/*絕對定位之後,該盒子從文件流中拖出來(脫離文件流), 不跟後續的盒子進行流布局。  它的位置由自己設定的left,top,right,bottom等值決定,  這些值的參考邊界是上級容器*/

position:relative; /*相對上級容器,相對定位。注意,該盒子沒有脫離文件流即原來的地盤還佔著的(空在那裡)*/

HTML css盒子模型

盒子模型 盒子屬性 1.border style邊框模式 border top style上部 border bottom style下部 border left style左 border right style右 2.border width邊框畫素 border top width上部 bor...

HTML CSS盒子模型

本篇文章 本文講述了css盒子模型的一些基本關鍵字。lang en charset utf 8 盒子模型title p,div pdiv style head 熱愛生命 我不去想是否能夠成功 既然選擇了遠方 便只顧風雨兼程 我不去想能否贏得愛情 既然鍾情於玫瑰 就勇敢地吐露真誠 我不去想身後會不會襲...

HTML CSS之盒子模型

一 元素分類 css中html的標籤元素大體分為三種型別 1 塊狀元素 特點 每個塊級元素都從新的一行開始,並且其後的元素也另起一行 乙個塊級元素獨佔一行 元素的高度 寬度 行高以及頂和底邊距都可設定 元素寬度在不設定的情況下,是它本身父容器的100 和父元素的寬度一致 除非設定乙個寬度。塊狀元素轉...