- 相關(guān)推薦
CSS基礎(chǔ)知識(shí)之盒模型以及浮動(dòng)布局
談到盒模型，有經(jīng)驗(yàn)的小伙伴一定滾瓜爛熟，無(wú)非就是 內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)；這些屬性我們可以把它轉(zhuǎn)移到我們?nèi)粘Ｉ钪械暮凶樱ㄏ渥樱┥蟻?lái)理解，日常生活中所見(jiàn)的盒子也就是能裝東西的一種箱子，也具有這些屬性，所以叫它盒子模式。盒子由幾部分組成：
物品 + 填充物 + 外包裝 + 外邊距
content + padding + border + margin
/* margin 后面接多個(gè)值 */
/* 上 右 下 左 */
margin:50px 30px40px 20px;
/* 上 左右 下 */
margin:50px 30px 40px;
/* 上下 左右 */
margin:50px 30px;
/* 上下左右 */
margin:50px;
通常情況下：
父子關(guān)系產(chǎn)生邊距一般用padding
兄弟關(guān)系產(chǎn)生邊距一般用margin
p標(biāo)簽的基本樣式
p{
font-family:"微軟雅黑";
/* em */
font-size:1em;
/*
italic 斜體
oblique 傾斜
*/
font-style:oblique;
/* 100 - 900 */
/* bold 加粗 */
/* lighter */
/* normal */
font-weight:lighter;
/* 復(fù)合屬性 */
font:italic 9002em "宋體";
/* 文本設(shè)置 */
/* underline */
/* overline */
/* line-through */
/*text-decoration: line-through;*/
/* 縮進(jìn) */
/* 數(shù)值，可用用px 也可用 em，可以為負(fù)值 */
text-indent:-10px;
/*left, right, center*/
/* justify 兩邊對(duì)齊 */
text-align:justify;
/* 行間距 */
/* 如果一行內(nèi)容的情況下，可以用作垂直居中 */
line-height:-1px;
/* 字(單詞)間距 */
/* 可以為負(fù)值 */
word-spacing:-50px;
/* 字符間距 */
/* 可以為負(fù)值 */
letter-spacing:-5px;
}
插入背景圖片
/* 背景圖片，平鋪 */
background-image:url("img/1.gif");
/* 背景圖片是否重復(fù) x y */
background-repeat:repeat-y;
/* 背景圖片大小 寬 高 */
/*background-size: 100% 100%;*/
/* 1. 可以使用像素值
2. 可以使用方向值
3. 可以使用百分比
*/
background-position:30% 80%;
}
/* 偽類
hover 鼠標(biāo)懸停
*/
.p1:hover{
width:400px;
height:400px;
}
css基本樣式一覽
css 屬性名：
width: 寬度
height: 高度
margin: 外邊距
padding: 內(nèi)邊距
border: 邊框
background: 背景
display: 顯示方式
font: 字體
font-weight 文字著重
font-family 字體
font-size 文字大小
font-style 文字樣式
letter-spacing 字母間距
word-spacing 單詞間距
text-align 文本對(duì)齊方式
text-decoration 文本修飾
text-indent 首行縮進(jìn)
background-repeat 背景圖片重復(fù)
background-image 背景圖片
background-size 背景圖片大小
float 浮動(dòng)
浮動(dòng)布局
float: left 左浮
float：right 右浮
清除浮動(dòng)的方式：
1. clear:both;
2. 在父級(jí)中加上overflow:hidden; 變?yōu)锽FC(單獨(dú)布局的小單位)
3. 用浮動(dòng)去清浮動(dòng)。
文檔流：在當(dāng)前文檔下，給元素排列時(shí)所占用的位置。
浮動(dòng)：元素直接脫離文檔流，按照指定的方向移動(dòng)。直到遇到父級(jí)的邊界，或者其他的浮動(dòng)元素停止。
【CSS基礎(chǔ)知識(shí)之盒模型以及浮動(dòng)布局】相關(guān)文章：
CSS教程之盒模型10-17
詳解CSS3盒模型display:box08-04
CSS閉合浮動(dòng)元素教程06-26
DIV+CSS布局和TABLE布局的優(yōu)缺點(diǎn)07-17
css網(wǎng)頁(yè)布局用Margin還是用Padding07-21
CSS之入門篇10-19
CSS樣式表代碼布局基礎(chǔ)教程10-20