css中命名用中杠線"-";JS中命名用下劃線"_"
針對textarea文本域中：
resize: none; 去除拉伸功能；
outline-style: none; 去掉選中時的聚焦藍框；
單元格中的邊框間距設置問題：
table內聯屬性設置:在table標簽中設置屬性，其中邊框顏色不能顯示，只能在style中設置邊框顏色;
<style>
table{
width: 500px;
text-align: center;
border: 6px dashed blue;
}
</style>
在body中的table標簽添加屬性值：其中border為屬性值，不能添加邊框樣式和顏色；（無論設置邊框尺寸為多少，都是1px）
<table border="1px" cellspacing="0" cellpadding="0">
...
</table>
table嵌入樣式的設置：在style樣式標簽中設置分別對thead下的th與tbody下的td設置邊框，給table設置border-collapse:collapse;實現邊框重合；
<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>
圖片的重置樣式設置：
img{
border: 0; /*去除img的默認1px的邊框*/
vertical-align: middle; /*去掉圖片底側默認的3像素空白縫隙，display:block也可以實現*/
}
刪除線標簽有s,del兩個，重置樣式去掉刪除線用text-decoration: none;;
斜體標簽有i,em兩個，重置樣式去掉斜體樣式，設置font-style: none;;
h標簽，重置樣式去掉粗體樣式，設置font-weight: normal;;
設置光標箭頭變成小手標：cursor: pointer;;
設置容器的width與height值，指的是除了padding與border以外，內容區域的寬高。若后添加padding與border值，則容器整體寬高會增大，若要保持容器的總寬高不變，必須相應減少設置的寬高值；
給input標簽添加placeholder后，設置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;
}
兩個內聯元素在html中，如果換行書寫，這樣兩個元素之間會有一個空格的間隙；不能緊密相連，解決方法是添加浮動；
在容器內添加圖片，可以用背景圖添加，如果圖片有點擊效果，可以添加一個空的a鏈接在背景圖上，或者是給a鏈接添加背景圖；
背景圖添加中，如果圖片的尺寸大于添加背景圖的容器尺寸，可以用background-size設置背景圖添加尺寸。
img在使用過程中添加浮動后，不能繼承父級容器的行高，設置行高也不能像單行文本一樣垂直居中，解決方法，在外面套一層標簽(p div span均可以)；
<ul>
<li><a href="#" target="_blank">手機 電話卡<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設置相對定位*/
ol li{
position: relative;
}
/*before與after的公共樣式*/
ol li:before,ol li:after{
position: absolute;
content:"";
background-color: #665e57;
}
/*before與after的單獨樣式*/
/*給li設置一個left的類選擇器，設置左部邊框*/
ol li.left:before{
width: 1px;
height: 70px;
top: 6px;
left: 0;
}
/*給li設置一個top的類選擇器，設置頂部邊框*/
ol li.top:after{
width: 64px;
height: 1px;
top: -1px;
left: 6px;
}
給不同a便簽下的p元素設置不同的背景色，以及a的懸浮特性
<body>
<li><a class="tu1" href="#" target="_blank">
<p></p>
選購手機
</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>
開發過程中如果出現文字在默認情況下，頂部超出容器一些，可以通過行高值將其向下調節，只需將行高值大于字體值兩像素以上即可；
通過設置字體的font-weight值來調節其加粗程度，bold值一般為700左右，無單位，若去除h標簽的默認加粗設置，可設置font-weight: normal;;
省略號的設置
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
在一個容器中，添加一段文字和一個內聯元素（span,img）,出現文字與內聯元素的位置不居中對齊，可使用vertical-align: middle;進行設置，但是此設置有一個局限，就是當文字或內聯元素寬高過大，middle會存在位置偏移問題，上面空隙會大于下面空隙，偏移會很嚴重，所以遇到此種情況，可以給vertical-align設置具體的數值，進行調節位置。
<body>
<div class="top">
<h4>小米手機</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>
脫離文檔流后，內聯元素會block化；
陰影: box-shadow: x y blur(陰影半徑) spread(擴展半徑) color inset/outset(默認);
過渡復合屬性: transition
transition-property: 指定過渡元素的屬性名；如width,height，all即變化的屬性；
transition-duration: 過渡時間，即變化過程的持續時間;
transition-timing-function: 緩沖的函數；如：ease(默認),ease-in,ease-in-out,linear(恒速);
transition-delay: 推遲時間，即開始變化的延遲時間；
簡寫: transition: width 1s linear 0.5s;注：簡寫中每個屬性用空格相隔，兩個變量之間用逗號相隔；
小米項目實戰中購物車實現div的動畫效果，代碼如下：
<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時，添加此項使內容隱藏*/
transition: height 0.5s ease;/*添加在需要動畫的元素上，即div上*/
}
.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>
小米項目中，導航欄用ul li a做的浮動中，a為內聯元素，則它的寬高與內容寬高相等，若想擴大其寬高尺寸或背景顏色范圍，可以給a標簽添加padding,實際顯示上下左右均可設置padding;
最后編輯于 ：2018.07.20 10:36:34
?著作權歸作者所有,轉載或內容合作請聯系作者
