CSS基礎知識之盒模型以及浮動佈局

談到盒模型，有經驗的小夥伴一定滾瓜爛熟，無非就是 內容(content)、填充(padding)、邊框(border)、邊界(margin)；這些屬性我們可以把它轉移到我們日常生活中的盒子（箱子）上來理解，日常生活中所見的`盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。盒子由幾部分組成：

物品 + 填充物 + 外包裝 + 外邊距

content + padding + border + margin

/* margin 後面接多個值 */

/* 上 右 下 左 */

margin:50px 30px40px 20px;

/* 上 左右 下 */

margin:50px 30px 40px;

/* 上下 左右 */

margin:50px 30px;

/* 上下左右 */

margin:50px;

通常情況下：

父子關係產生邊距一般用padding

兄弟關係產生邊距一般用margin

p標籤的基本樣式

p{

font-family:"微軟雅黑";

/* em */

font-size:1em;

/*

italic 斜體

oblique 傾斜

*/

font-style:oblique;

/* 100 - 900 */

/* bold 加粗 */

/* lighter */

/* normal */

font-weight:lighter;

/* 複合屬性 */

font:italic 9002em "宋體";

/* 文本設置 */

/* underline */

/* overline */

/* line-through */

/*text-decoration: line-through;*/

/* 縮進 */

/* 數值，可用用px 也可用 em，可以為負值 */

text-indent:-10px;

/*left, right, center*/

/* justify 兩邊對齊 */

text-align:justify;

/* 行間距 */

/* 如果一行內容的情況下，可以用作垂直居中 */

line-height:-1px;

/* 字(單詞)間距 */

/* 可以為負值 */

word-spacing:-50px;

/* 字符間距 */

/* 可以為負值 */

letter-spacing:-5px;

}

插入背景圖片

/* 背景圖片，平鋪 */

background-image:url("img/1.gif");

/* 背景圖片是否重複 x y */

background-repeat:repeat-y;

/* 背景圖片大小 寬 高 */

/*background-size: 100% 100%;*/

/* 1. 可以使用像素值

2. 可以使用方向值

3. 可以使用百分比

*/

background-position:30% 80%;

}

/* 偽類

hover 鼠標懸停

*/

.p1:hover{

width:400px;

height:400px;

}

css基本樣式一覽

css 屬性名：

width: 寬度

height: 高度

margin: 外邊距

padding: 內邊距

border: 邊框

background: 背景

display: 顯示方式

font: 字體

font-weight 文字着重

font-family 字體

font-size 文字大小

font-style 文字樣式

letter-spacing 字母間距

word-spacing 單詞間距

text-align 文本對齊方式

text-decoration 文本修飾

text-indent 首行縮進

background-repeat 背景圖片重複

background-image 背景圖片

background-size 背景圖片大小

float 浮動

浮動佈局

float: left 左浮

float：right 右浮

清除浮動的方式：

1. clear:both;

2. 在父級中加上overflow:hidden; 變為BFC(單獨佈局的小單位)

3. 用浮動去清浮動。

文檔流：在當前文檔下，給元素排列時所佔用的位置。

浮動：元素直接脱離文檔流，按照指定的方向移動。直到遇到父級的邊界，或者其他的浮動元素停止。