HTML CSS基礎知識個人筆記 4

2. 盒子模型

2.2 內邊距-padding

2.3 外邊距-margin

2.4 盒子小結

background：:background-color || background-image || background-repeat || background-attachment || background-position

注意使用方位值和具體數值時的區別！！！（見下列**）

建議簡寫位置，不是規定，不同於font：font-style font-variant font-weight font-size/line-height font-family;(font-size 和 font-family 必填)

background: #000 url(images/ms.jpg) no-repeat scroll center top;

/*background-color: #000;*/

/*rgba red green blue alpha(0.3 .3 30%)*/
background-color: rgba( 0, 0, 0, .3 );

邊框寫兩個：上下 左右

邊框寫三個：上 左右 下

邊框寫四個：上 右 下 左 （順時針）

邊框簡寫：

boder: 1px solid red;

div

見2.4

設定**和單元格的collapse屬性為collapse，即摺疊，變為一根線

abcabc

abc 123
123123
abcabcabc

簡寫：

/*上下左右都是 20px*/

/*padding: 20px;*/
/*上下 10px 左右 20px*/
/*padding: 10px 20px*/
/*上 10px 左右 20px 下 30px*/
/*padding: 10px 20px 30px;*/
/*上 10px 右 20px 下 30px 左 40px 順時針*/
/*padding: 10px 20px 30px 40px*/

div

div

如上圖所示，可以看到盒子相關的引數

盒子寬度: width + padding-left + padding-right + border-left + border-right;

盒子高度: height + padding-top + padding-bottom + border-top + border-bottom;

例1：

HTML CSS基礎知識個人筆記 1

html input 控制項 建立方式，table cap tr td或者table tr th，th為表頭，caption為標題 注意和dl的小差別，dl dt dd 的dd為空，不會佔位。目前是如此。user info name num male 111 xiaohong female 2221...

HTML CSS基礎知識個人筆記 6

2.定位 2.1 靜態定位 static 2.2 相對定位 relative 2.3 絕對定位 absolute 2.4 固定定位 fixed 2.5 絕對定位 特殊固定 和浮動的隱藏模式轉換 2.6 定位z index疊放順序 2.7 經典案例 清除浮動的問題 就是由於子級元素的浮動導致父級元素的...

HTML CSS基礎知識個人筆記 7

display 不佔坑 visibility 佔坑 典型處理a mask 預設，溢位部分顯示 overflow visible 溢位部分隱藏，不是刪除 overflow hidden 滾動條，不管有沒有超出，都顯示滾動條 overflow scroll 在超出的時候，加滾動條，body 和 test...