CSS inherit值
/*
css inherit屬性 該屬性用于繼承父盒子的一切屬性值
我們平時會使用width:100%;來讓子盒子的寬度等于父盒子的寬度
但是注意泡徙，在子盒子設置了position:absolute;屬性時
由于子盒子此時已經脫離了標準流幌羞，如果父盒子沒有設置position屬性
那么子盒子不會繼承父盒子的寬度，而是會繼承最近的設置有定位的盒子/body的寬度
而此時設置子盒子width屬性值為inherit,子盒子依然會繼承父盒子的寬度
*/
.parent {
width: 100px;
height:200px;
border: 1px solid #000;
/*position: absolute;*/
}
.child{
height:100%;
position: absolute;
width: inherit;
background-color: red;
}
<div class="parent">
<div class="child"></div>
</div>
設置div底部向上/右側向左彈出
/*
css默認情況下盒子的長度變化時由上向下的方向進行變化
寬度變化時有左向右
我們有時候需要實現盒子由底層彈出刮吧，或者盒子由右側向左彈出的效果
此時我們需要配合position屬性
如果設置absolute/fixed,bottom:0
那么盒子默認變化方向就會變?yōu)橛上孪蛏? 由右向左同理
*/
.test {
position: absolute;
bottom: 0;
width: 100px;
height: 10px;
background-color: red;
}
$(".test").animate({"height": "100px"}, 2000)
pointer-events
pointer-events是css3中的新屬性，可以在任意的元素上使用哨毁，該屬性的可選值非常多砸彬，但主要是在SVG上使用造垛，我們平時在web中使用的最多的是none屬性，使用pointer-events：none姻乓；
該屬性可以移除元素上的鼠標點擊事件
<style>
.first{
width: 100px;
height: 100px;
background-color: orangered;
pointer-events: none;
}
</style>
<body>
<div class="first"></div>
</body>
<script>
document.querySelector(".first").addEventListener("click",()=>{
alert("click觸發(fā)");
})
</script>
該屬性還有一個特性是可以使元素被穿透嵌溢，也就是說設置了該屬性的元素只負責展示該層的內容，但是我們可以直接透過該層點擊到它下方的元素糖权，設置了該屬性的元素本身會被虛化
在我們?yōu)轫撁嫣顚懳谋镜臅r候經常會出現由于編碼格式或者文字行間距不同而出現行與行之間的文字參差不齊堵腹，使用text-aline：justify
multiple是H5屬性，表示用戶可以選擇多個文件或選項星澳，例如：
<input type="file" multiple>
JD清除浮動clearfix寫法
.clearfix::after,clearfix::before{
content:"",
display:table
}
.clearfix::after{
clear:both
}
.clearfix{
*zoom:1;
}
在css樣式中聲明編碼格式疚顷，特別需要注意在使用偽元素時聲明，否則content內容會亂碼
@charset 'UTF-8'
background-origin
用來指定背景圖片的的起始位置
content-box
從盒模型的內容位置開始禁偎，也就是說是從圖片的起始位置是從盒模型的內容部分的左上角開始
padding-box
從盒模型的padding位置的左上角開始
boeder-box
從盒模型的邊框位置左上角開始腿堤，但是注意，盒子的邊框還是會覆蓋住圖片
<style>
#box {
width: 200px;
height: 200px;
border: 10px solid #000;
background: url("./timg.jpg") red no-repeat;
padding: 10px;
}
</style>
<div id="box" style="background-origin: border-box;">
</div>
background-clip
背景圖片的裁剪方式
content-box
從盒模型的內容部分開始裁剪圖片
padding-box
從盒模型的padding部分開始裁剪
border-box
從盒模型的邊框部分開始裁剪
background-atteachment
scroll
背景圖片將隨著滾動條的移動而移動如暖，背景圖和div是相對固定的
fixed
背景圖不隨著滾動條的移動而移動笆檀，背景圖是固定在初始位置的，這這會讓看起來背景圖在div發(fā)生滾動時背景圖在變化
HTML元素有默認的line-height盒至，所以忽悠一個現象酗洒，在p標簽中輸入文中默認會有上下間距士修，我們可以設置line-height=1,來去除標簽的上下間距
clear屬性是元素的抗浮動性，例如樱衷，現在在一個頁面內有一個div和p標簽棋嘲，如果我們給div設置了浮動，那么它下面的p標簽就會受到影響矩桂，表現為p標簽內的文字會環(huán)繞div進行排列沸移，但是如果我們?yōu)閜標簽設置了clear，那么p標簽會不受其它已經浮動的元素的影響侄榴，按照正常的布局來排列
clear
left:抗左側浮動 right:抗右側浮動 both:抗兩側浮動
word-break
break-all :文字自動換行
keep-all:文字在半角空格或連字符處換行
fieldset
用于對表單元素進行分組
<form id="info">
<fieldset disabled form="info">
<legend>基本信息</legend>
<label for="name">姓名:</label><input type="text" id="name">
</fieldset>
</form>
white-space
CSS3新屬性雹锣，用來控制文字是否換行，保留空格
normal：默認癞蚕，空白會被瀏覽器忽略
pre：空白會被瀏覽保留蕊爵，行為類似于<pre>標簽
nowrap：文本不會換行，文本會在同一行上繼續(xù)涣达，直到遇到
標簽
pre-wrap：保留空白符序列在辆，但是正常的進行換行
pre-line：合并空白符序列，但是保留換行符
優(yōu)化滑動
-webkit-overflow-scrolling: touch;
