盒子模型相關知識點

2021-10-10 23:28:31 字數 1399 閱讀 1588

/* 垂直盒子css樣式 */

div#one

#two

<

!-- 垂直盒子html --

/* 水平盒子 css*/

div#one-1

#two-1

<

!-- 水平盒子 html--

>

"one-1"

>box1<

/div>

"two-1"

>box2<

/div>重疊盒子

1、margin不同於border和padding只能取正數,margin的值可以取負數。margin為負數時,使元素向相反的方向移動,甚至覆蓋

/* 重疊盒子 */

div.two-

22<

!-- 重疊盒子 --

>

="one-11"

>box1<

/div>

="two-22"

>box2<

/div>盒子的大小:內容+填充+邊框+邊界

內容垂直居中vertical-align要與行高結合使用

要讓盒子水平給盒子加float屬性

標準文件流:自左向右,自上向下

display:none和visibility:hidden的區別

浮動定位都是針對盒子(div)而言

用了浮動會產生塌陷,清除塌陷的三種方式:

a) 為父元素設定高度

b) 為父元素加overflow:hidden

c) 利用clear:both清除浮動塌陷

預設為靜態定位即標準文件流排列方式

單獨給標籤加position:relative,設定引數,是相對於自己本身的位置移動。(可以用margin屬性獲得同樣的顯示效果)

絕對定位使標籤的位置與文件流無關,不佔據頁面大小,課理解為浮動在頁面之上。如果單獨給標籤設定position:absolute,引數為距離整個body左側多少,上部多少。如果頁面上有其他元素有相對定位,那絕對定位勻速就會相對於包含他的最近一級具有相對定位屬性的元素移動位置

鎖定定位,固定在頁面上的某乙個位置

z-index值越大,顯示優先順序越高

盒子模型相關知識

盒子模型 box model 組成 邊框 border 外邊距 margin 內邊距 padding 和實際內容 content border可以設定元素的邊框,邊框有三部分組成邊框寬度 粗細 邊框樣式 邊框顏色。語法 border border width border style border ...

盒子模型的知識點彙總

一 盒子模型 1.什麼是css盒子模型?css盒子模型僅僅是乙個形象的比喻,html中所有的標籤都是盒子 結論1.在html中所有的標籤都可以設定 寬度 高度 指定可以存放內容的區域 內邊距 填充物 邊框 手機盒子自己 外邊距 盒子和盒子之間的間隙 我是span 我是超連結我是加粗我是強調 二 盒子...

盒子模型基本介紹及知識點

盒子模型 就是把html頁面中的布局元素看作是乙個矩形的盒子,也就是乙個盛裝內容的容器。盒子模型有元素的內容 邊框 border 內邊距 padding 和外邊距 margin 組 成。盒子裡面的文字和等元素是 內容區域 盒子的厚度 我們成為 盒子的邊框 盒子內容與邊框的距離是內邊距 盒子與盒子之間...