盒子模型
1.框模型
框：頁面上所有元素都可以稱為「框」
框模型：(box model),又稱盒子模型
定義框處理元素內容、內邊距padding、外邊距margin、邊框的樣式border
外邊距margin
margin-方向:
margin-left:
margin-right:
margin-top:
margin-bottom:
不定義方向乙個值 預設四個方向一樣; 兩個值 第乙個 左右 第二個 上下 ; 三個不常見 ; 四個值 左 上 右 下
左右外邊距設定為auto時，當前的塊級元素會居中顯示
內邊距padding
padding-方向:
padding-left
padding-right:
padding-top:
padding-bottom:
不定義方向乙個值 預設四個方向一樣; 兩個值 第乙個 左右 第二個 上下 ; 三個不常見 ; 四個值 左 上 右 下
邊框的樣式border
border-方向:
border-left
border-right:
border-top:
border-bottom:
不定義方向乙個值 預設四個方向一樣; 兩個值 第乙個 左右 第二個 上下 ; 三個不常見 ; 四個值 左 上 右 下
注意：1.有些塊級元素會存在預設外邊距 如 body h1~h6 p
2、垂直外邊距合併
兩個垂直外邊距相遇時，將會合成乙個外邊距。最終外邊距的值是兩者中 邊距較大的的值。
3、背景
屬性：background-image
取值：url(影象路徑)
background-image:url("");
1、背景重複
預設情況，背景圖會在水平和垂直兩個方向都出現重複的效果(平鋪)
屬性：background-repeat
取值：repeat ：預設值，水平垂直平鋪
repeat-x : 水平平鋪
repeat-y : 垂直平鋪
no-repeat : 不平鋪(用的最多)
2、背景固定
屬性：background-attachment
取值：fixed，背景影象固定
3、背景定位
改變背景影象在元素中的位置
屬性：background-position
取值：x y :x表示水平方向移動距離，+向右，-向左，y表示垂直方向移動距離，+向下，-向上
x% y% :
0% 0% : 顯示在元素的左上方
100% 100% : 顯示在元素的右下方
50% 50% : 居中
left :靠左
right:靠右
center :將元素顯示在水平或垂直方向的中間
top:靠上
bottom:靠下
background-position:left top;
background-position:top left;
background-position:center;
4、文字格式化
1、指定字型
font-family：選擇字型格式
font-family:"microsoft yahei","arial","verdana";
2、字型大小
font-size:value;
font-size:12px;
3、字型加粗 normal正常
font-weight:normal / bold ;
400 - 900
4、字型樣式(斜體) i
font-style:normal/italic;
5、小型大寫字母 font-variant字型型狀
font-variant:normal/small-caps;
6、字型屬性
font:font-style font-variant font-weight font-size font-family;
常用方式：
font:font-size font-family;
font:12px "微軟雅黑",arial,verdana;
html盒子模型 jquery盒子模型
最近學了jquery的盒子模型之後，感覺真的顛覆我之前對盒子模型的看法，我在最初以為盒子模型只存在於html,我們就來看看他們有何區別。1.html盒子模型 如果說js裡面萬物皆是物件，那麼html裡面的萬物皆是盒子。不是盒子的我們也可以用dispiay block 變成盒子。那他的盒子是怎麼計算的...
html盒子模型
什麼是css的盒子模式呢？為什麼叫它是盒子？先說說我們在網頁設計中常聽的屬性名 內容 content 填充 padding 邊框 border 邊界 margin css盒子模式都具備這些屬性。這些屬性我們可以把它轉移到我們日常生活中的盒子 箱子 上來理解，日常生活中所見的盒子也具有這些屬性，所以叫...
html盒子模型
在css中有乙個需要了解的東西，那就是盒子模型，這是css看待元素的一種方式。可以說頁面就是由乙個個盒模型堆砌起來的，每個html元素都可以叫做盒模型，盒模型由外而內包括 邊距 margin 邊框 border 填充 padding 內容 content 它在頁面中所佔的實際寬度是margin bo...