css小細節總結

1、用max-width來防止圖片撐破容器

img{

　　display: inline-block;

　　max-width: 100%;

}

2、用pointer-event 來禁用事件

該屬性可以做：

　　阻止任何點擊動作的執行；

　　使鏈接顯示為默認光標（cursor: default);

　　阻止觸發hover和active狀態

　　阻止javascript點擊事件的觸發

.disabled{pointer-event}

3、用user-select來禁用文本選中

IE6-9不支持該屬性，可以通過給body添加onselectstart = "return false"的內聯javascript語句搞定

body{user-select = none;}//頁面中的文本不能被選中

4、用caret-color 來自定義光標的樣式

input,textarea,[contenteditable]{ caret-color: red;}

5、用table-layout來控制表格單元格的寬度

由於表格單元的寬度根據其內容進行調整，也許你設置了表格的寬度，但是不起作用，刨根究底是因為表格有個叫做table-layout 的屬性，其瀏覽器認知為auto在作怪，當我們把這個值設置為fixed的時候，給th、td標簽設置的寬度就可以起到作用了

table{

　　table-laout: fixed;

　　width: 100%;

}

6、用 :valid :invalid 來做表單及時驗證

:required 偽類指定具有required屬性的表單元素

:valid 偽類指定一個通過匹配正確的所要求的表單元素

:invalid 偽類指定一個不匹配指定要求的表單元素

<div class="container">
<div class="row" style="margin-top: 2rem;">
<form>
<div class="form-group">
<label>name</label>
<input type="text" required placeholder="請輸入名稱">
</div>
<div class="form-group">
<label>email</label>
<input type="email" required placeholder="請輸入郵箱">
</div>
<div class="form-group">
<label>homepage</label>
<input type="url" placeholder="請輸入博客url">
</div>
<div class="form-group">
<label>Comments</label>
<textarea required></textarea>
</div>
</form>
</div>
</div>

.form-group {
width: 32rem;
padding: 1rem;
border: 1px solid transparent;
}
.form-group：hover{
border-color: #eee;
transition: border .2s;
}

.form-group label {
display: block;
font-weight: normal;
}

.form-group input,.form-group textarea {
display: block;
width: 100%;
line-height: 2rem;
padding: .5rem .5rem .5rem 1rem;
border: 1px solid #ccc;
outline: none;
}
.form-group input:valid ,.form-group textarea:valid {
border-color: #429032;
box-shadow: inset 5px 0 0 #429032;
}
.form-group input:invalid ,.form-group textarea:invalid {
border-color: #D61D1D;
box-shadow: inset 5px 0 0 #D61D1D;
}

7、用:target來實現折疊面板

<div class="container">
<div class="row" style="margin-top: 2rem;">
<div class="t-collapse"><a class="collapse-target" href="#modal1">target 1</a>
<div class="collapse-body" id="modal1">
<a class="collapse-close" href="#">target 1</a>
<p>
css3 明確規定了偽類用一個冒號:來表示，而偽元素則用兩個冒號::來表示。
偽類更多的定義的是狀態，如:hover，或者說是一個可以使用CSS進行修飾的特定的特殊元素，如:first-child
常見偽類：:hover :active :focus :visited :link :lang :first-child :last-child :not
</p>
</div>
</div>
<div class="t-collapse"><a class="collapse-target" href="#modal2">target 2</a>
<div class="collapse-body" id="modal2">
<a class="collapse-close" href="#">target 2</a>
<p>
偽元素簡單來說就是不存在於DOM文檔樹中的虛擬的元素，它們和HTML元素一樣，但是你又無法使用JavaScript去獲取，如:before
常見偽元素：::before ::after ::first-letter ::first-line
</p>
</div>
</div>
</div>
</div>

.t-collapse {
border: 1px solid #ccc;
margin-top: -1px;
&:first-child {
margin-top: 0;
}
.collapse-target,.collapse-close {
cursor: pointer;
height: 3rem;
line-height: 2rem;
padding: .5rem 2rem;
text-decoration: none;
user-select: none;
background: #eee;
}
>.collapse-target {
display: block;
}
>.collapse-body {
position: relative;
display: none;
padding: 2rem;
.collapse-close {
display: none;
position: absolute;
top: -3rem;
width: 100%;
left: 0;
}
&:target {
display: block;
.collapse-close {
display: block;
border-bottom: 1px solid #ddd;
}
}
}
}

8、用:not來排除其他選擇器

用以設置表單元素在readonly和disabled狀態之外的hover等狀態，以便於當元素在readonly和disabled時，元素不具有hover狀態

@mixin buttonStyle ($border, $background, $color, $hoverBorder, $hoverBackground, $hoverColor) {
color: $color;
border-color: $border;
background-color: $background;
&:not(.readonly):not([readonly]):not(.disabled):not([disabled]) {
&:hover,
&:active {
color: $hoverColor;
border-color: $hoverBorder;
background-color: $hoverBackground;
}
}
}

9、用:nth-child(even/odd)來實現隔行變色

ul {
&.odd {
>li:nth-child(odd) {
background: red;
}
}
&.even {
>li:nth-child(even) {
background: green;
}
}
}

10、用::selection來美化選中文本

::selection{
color: #fff;
background-color: #6bc30d;
}

11、用::paaceholder來美化占位符

input::-webkit-input-placeholder{
color: #f00;
}
input::-moz-placeholder{
color: #f00;
}
input:-ms-input-placeholder{
color: #f00;
}

12、用::first-letter來實現段落首字下沈

p::first-letter{
font-size: 6em;
line-height: 1;
float: left;
}

13、用 ::first-line 來特殊標記段落第一行

p::first-line{
color: red
}

14、用 font-size:0 來清除間距

<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

*{
box-sizing: border-box;
}
.items {
font-size: 0;
> .item {
display: inline-block;
width: 25%;
height: 50px;
border: 1px solid #ccc;
text-align: center;
line-height: 50px;
background-color: #eee;
font-size: 16px; //不要忘了給子元素設置字號
}
}

css小細節總結