1. 引用
<link rel="stylesheet" href="style.css"/>
2. 常用標(biāo)簽屬性
- ul
margin:0;
padding:0;
list-style: none;//去除原點
- li
li{
transition:background-color .5s ease-in;//背景色過渡
}
li:hover{
background-color:#bbb;
}
- a (:hover)
text-decoration: none;//取消下劃線
- input
padding:0;//input存在默認(rèn)的內(nèi)邊距
outline: none;//去除聚焦時的藍色邊框
- button
cusor:pointer;//鼠標(biāo)經(jīng)過變?yōu)樾∈謽邮?- img
width: 100%;//根據(jù)父容器的大小進行縮放
height·: auto;//根據(jù)自身的高度進行縮放
vertical-align: top;/*圖片默認(rèn)和文字的基線對齊，底部會產(chǎn)生幾像素的空白*/
- 字體和文本
div {
//字體
font-style:normal;//normal,italic
font-weight:400;//normal
font-size:16px;//一定要帶單位
font-family:"微軟雅黑";//一般帶特殊符號需要加引號
line-height:24px//一般比字號大7份招，8個像素
//文本
color:#ff0000 //文本顏色菱涤，等價于#f00 red rgb(255,0,0)
text-indent:2em;//段落首行縮進兩個字（1em等于一個字的距離）
text-decoration:none;//取消裝飾
text-align:center;//left right center 讓div中的文字居中對齊（讓盒子中的內(nèi)容居中）
}
//字體樣式連寫
div {
font:normal 400 16px "微軟雅黑" //順序不能改變蜜自，size和family屬性不能省略
}
- 邊框和內(nèi)邊距
div {
border-collapse:collapse;//合并相鄰邊框
border:1px solid red %50;//四邊粗細(xì) 四邊樣式 四邊顏色 圓角大小(css3)
padding:10px 20px 30px 40px;//上10px 右20px 下30px 左40px(順時針)
}
- 盒子陰影
div {
box-shadow:2px 2px 2px 2px red;//陰影x軸 陰影y軸 模糊程度 陰影大小 顏色
}
- 清除浮動
//方法1
.clear {
clear: both;
}
//方法2
.div{
overflow: hidden;
}
//方法3
.clearfix:after{
content: "020";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 觸發(fā) hasLayout */
*zoom: 1;//加上*號 ie6勺疼，ie7識別
}
//方法4
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
* zoom: 1;
}
3.模塊標(biāo)簽常用寫法
- logo寫法(有利于seo)
<div class="logo">
<h1>
<a href="#" title="京東網(wǎng)">京東</a>
</h1>
</div>
4. 快捷鍵
標(biāo)簽 + tab
標(biāo)簽 * 3
5. 技巧及注意事項
5.1 居中：
1.行內(nèi)训措、行內(nèi)塊元素可以當(dāng)做文本來看(通常用來做水平居中等布局操作)
2.如果盒子的高度和單行文本的高度相同掠归，可以使文本垂直居中(如導(dǎo)航欄標(biāo)簽垂直居中)
3.塊元素水平居中的方法設(shè)置左右margin為auto
div {
width:100px;
text-aligin:center;//塊元素中的行內(nèi)元素可以達到居中效果
line-height:100px;//塊元素中的文本垂直居中
margin:0 auto;//塊元素居中
}
5.2 合并：
1.塊元素的外邊距會發(fā)生合并的現(xiàn)象掀亩，并且會取較大的一方的值(所有瀏覽器現(xiàn)象相同芹啥，只設(shè)置其中一方的margin就可以避免)
2.嵌套塊元素垂直外邊距合并(1.給父級設(shè)置1px的padding或者border 2.使用overflow屬性)
5.3 定位：
1.子絕父相(孩子使用絕對定位的時候锻离，父級一般會使用相對定位)
5.4 其他：
1.子級盒子默認(rèn)會繼承父級的寬高(子級此時設(shè)置padding不會撐開子級盒子)
2.行內(nèi)塊元素中的圖片默認(rèn)是和文字的基線對齊的(verticle-align:baseline;多用于img，input)
6 過渡
6 常用插件
- 代碼壓縮
