css中命名用中杠線"-";JS中命名用下劃線"_"
針對textarea文本域中：
resize: none; 去除拉伸功能幌陕；
outline-style: none; 去掉選中時(shí)的聚焦藍(lán)框霹崎；
單元格中的邊框間距設(shè)置問題：
table內(nèi)聯(lián)屬性設(shè)置:在table標(biāo)簽中設(shè)置屬性，其中邊框顏色不能顯示，只能在style中設(shè)置邊框顏色;
<style>
table{
width: 500px;
text-align: center;
border: 6px dashed blue;
}
</style>
在body中的table標(biāo)簽添加屬性值：其中border為屬性值瞎惫，不能添加邊框樣式和顏色；（無論設(shè)置邊框尺寸為多少帽馋，都是1px）
<table border="1px" cellspacing="0" cellpadding="0">
...
</table>
table嵌入樣式的設(shè)置：在style樣式標(biāo)簽中設(shè)置分別對thead下的th與tbody下的td設(shè)置邊框睡扬，給table設(shè)置border-collapse:collapse;實(shí)現(xiàn)邊框重合；
<style>
table{
width: 500px;
text-align: center;
border: 5px solid blue;
border-collapse: collapse;
}
table thead tr th,table tbody tr td{
border: 4px solid red;
}
</style>
圖片的重置樣式設(shè)置：
img{
border: 0; /*去除img的默認(rèn)1px的邊框*/
vertical-align: middle; /*去掉圖片底側(cè)默認(rèn)的3像素空白縫隙悦屏，display:block也可以實(shí)現(xiàn)*/
}
刪除線標(biāo)簽有s,del兩個(gè)节沦，重置樣式去掉刪除線用text-decoration: none;;
斜體標(biāo)簽有i,em兩個(gè)，重置樣式去掉斜體樣式础爬，設(shè)置font-style: none;;
h標(biāo)簽甫贯，重置樣式去掉粗體樣式，設(shè)置font-weight: normal;;
設(shè)置光標(biāo)箭頭變成小手標(biāo)：cursor: pointer;;
設(shè)置容器的width與height值看蚜，指的是除了padding與border以外叫搁，內(nèi)容區(qū)域的寬高。若后添加padding與border值失乾，則容器整體寬高會(huì)增大常熙，若要保持容器的總寬高不變，必須相應(yīng)減少設(shè)置的寬高值碱茁；
給input標(biāo)簽添加placeholder后裸卫，設(shè)置placeholder樣式：
.section-nav .w .nav-right input::-webkit-input-placeholder{
font-size: 12px;
text-align: right;
padding: 0 4px;
background-color: #eeeeee;
}
.section-nav .w .nav-right input:hover::-webkit-input-placeholder{
color: #ffffff;
background-color: #ff6700;
}
兩個(gè)內(nèi)聯(lián)元素在html中，如果換行書寫纽竣，這樣兩個(gè)元素之間會(huì)有一個(gè)空格的間隙墓贿；不能緊密相連茧泪，解決方法是添加浮動(dòng)；
在容器內(nèi)添加圖片聋袋，可以用背景圖添加队伟，如果圖片有點(diǎn)擊效果，可以添加一個(gè)空的a鏈接在背景圖上幽勒，或者是給a鏈接添加背景圖嗜侮；
背景圖添加中，如果圖片的尺寸大于添加背景圖的容器尺寸啥容，可以用background-size設(shè)置背景圖添加尺寸锈颗。
img在使用過程中添加浮動(dòng)后覆醇，不能繼承父級容器的行高，設(shè)置行高也不能像單行文本一樣垂直居中炭臭，解決方法永脓，在外面套一層標(biāo)簽(p div span均可以)；
例：在一個(gè)a標(biāo)簽中添加圖片徽缚，使其右浮動(dòng)
<ul>
<li><a href="#" target="_blank">手機(jī) 電話卡<span><img src="images/jiao.png"/></span></a></li>
</ul>
<style>
ul li a span{
float: right;
}
ul li a span img{
vertical-align: baseline;
}
</style>
給ol下的li添加邊框憨奸，利用偽類元素添加
/*添加邊框，使用before與after偽類元素*/
/*給li設(shè)置相對定位*/
ol li{
position: relative;
}
/*before與after的公共樣式*/
ol li:before,ol li:after{
position: absolute;
content:"";
background-color: #665e57;
}
/*before與after的單獨(dú)樣式*/
/*給li設(shè)置一個(gè)left的類選擇器凿试，設(shè)置左部邊框*/
ol li.left:before{
width: 1px;
height: 70px;
top: 6px;
left: 0;
}
/*給li設(shè)置一個(gè)top的類選擇器排宰，設(shè)置頂部邊框*/
ol li.top:after{
width: 64px;
height: 1px;
top: -1px;
left: 6px;
}
給不同a便簽下的p元素設(shè)置不同的背景色，以及a的懸浮特性
<body>
<li><a class="tu1" href="#" target="_blank">
<p></p>
選購手機(jī)
</a>
</li>
</body>
<style>
ol li a.tu1 p{
background: url("../images/sp-b-l-01.png") no-repeat center top;
}
ol li a.tu1:hover p{
background: url("../images/sp-b-l-0101.png") no-repeat center top;
}
ol li a.tu1:hover{
color: #fff;
}
</style>
開發(fā)過程中如果出現(xiàn)文字在默認(rèn)情況下那婉，頂部超出容器一些板甘，可以通過行高值將其向下調(diào)節(jié)，只需將行高值大于字體值兩像素以上即可详炬；
通過設(shè)置字體的font-weight值來調(diào)節(jié)其加粗程度盐类，bold值一般為700左右，無單位呛谜，若去除h標(biāo)簽的默認(rèn)加粗設(shè)置在跳，可設(shè)置font-weight: normal;;
省略號(hào)的設(shè)置
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
在一個(gè)容器中，添加一段文字和一個(gè)內(nèi)聯(lián)元素（span,img）,出現(xiàn)文字與內(nèi)聯(lián)元素的位置不居中對齊隐岛，可使用vertical-align: middle;進(jìn)行設(shè)置猫妙，但是此設(shè)置有一個(gè)局限，就是當(dāng)文字或內(nèi)聯(lián)元素寬高過大聚凹，middle會(huì)存在位置偏移問題割坠，上面空隙會(huì)大于下面空隙齐帚，偏移會(huì)很嚴(yán)重，所以遇到此種情況彼哼，可以給vertical-align設(shè)置具體的數(shù)值对妄，進(jìn)行調(diào)節(jié)位置。
<body>
<div class="top">
<h4>小米手機(jī)</h4>
<a href="#">
查看全部
<span>></span>
</a>
</div>
</body>
<style>
.top a span{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #2196f3;
font-size: 20px;
line-height: 20px;
text-align: center;
vertical-align: 1px;
}
</style>
脫離文檔流后敢朱，內(nèi)聯(lián)元素會(huì)block化剪菱；
陰影: box-shadow: x y blur(陰影半徑) spread(擴(kuò)展半徑) color inset/outset(默認(rèn));
過渡復(fù)合屬性: transition
transition-property: 指定過渡元素的屬性名；如width,height拴签，all即變化的屬性琅豆；
transition-duration: 過渡時(shí)間，即變化過程的持續(xù)時(shí)間;
transition-timing-function: 緩沖的函數(shù)篓吁；如：ease(默認(rèn)),ease-in,ease-in-out,linear(恒速);
transition-delay: 推遲時(shí)間，即開始變化的延遲時(shí)間蚪拦；
簡寫: transition: width 1s linear 0.5s;注：簡寫中每個(gè)屬性用空格相隔杖剪，兩個(gè)變量之間用逗號(hào)相隔；
小米項(xiàng)目實(shí)戰(zhàn)中購物車實(shí)現(xiàn)div的動(dòng)畫效果驰贷，代碼如下：
<style>
.header .w .shopping .loader{
position: absolute;
top: 40px;
right: 0;
width: 316px;
height: 0;
line-height: 98px;
font-size: 12px;
color: #424242;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0,0,0,0.15);/*陰影的使用*/
overflow: hidden;/*在div高度為0時(shí)盛嘿，添加此項(xiàng)使內(nèi)容隱藏*/
transition: height 0.5s ease;/*添加在需要?jiǎng)赢嫷脑厣希磀iv上*/
}
.header .w .shopping:hover .loader{
height: 98px;
}
</style>
<body>
<div class="shopping">
<a href="#" target="_blank">
<ins></ins>
購物車( 0 )</a>
<div class="loader">購物車中還沒有商品括袒，趕緊選購吧次兆！</div>
</div>
</body>
小米項(xiàng)目中，導(dǎo)航欄用ul li a做的浮動(dòng)中锹锰，a為內(nèi)聯(lián)元素芥炭，則它的寬高與內(nèi)容寬高相等，若想擴(kuò)大其寬高尺寸或背景顏色范圍恃慧，可以給a標(biāo)簽添加padding,實(shí)際顯示上下左右均可設(shè)置padding;
最后編輯于 ：2018.07.20 10:36:34
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
