CSS inherit值
/*
css inherit屬性 該屬性用于繼承父盒子的一切屬性值
我們平時(shí)會使用width:100%;來讓子盒子的寬度等于父盒子的寬度
但是注意，在子盒子設(shè)置了position:absolute;屬性時(shí)
由于子盒子此時(shí)已經(jīng)脫離了標(biāo)準(zhǔn)流，如果父盒子沒有設(shè)置position屬性
那么子盒子不會繼承父盒子的寬度，而是會繼承最近的設(shè)置有定位的盒子/body的寬度
而此時(shí)設(shè)置子盒子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>
設(shè)置div底部向上/右側(cè)向左彈出
/*
css默認(rèn)情況下盒子的長度變化時(shí)由上向下的方向進(jìn)行變化
寬度變化時(shí)有左向右
我們有時(shí)候需要實(shí)現(xiàn)盒子由底層彈出，或者盒子由右側(cè)向左彈出的效果
此時(shí)我們需要配合position屬性
如果設(shè)置absolute/fixed,bottom:0
那么盒子默認(rèn)變化方向就會變?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上使用，我們平時(shí)在web中使用的最多的是none屬性，使用pointer-events：none；
該屬性可以移除元素上的鼠標(biāo)點(diǎn)擊事件
<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>
該屬性還有一個(gè)特性是可以使元素被穿透，也就是說設(shè)置了該屬性的元素只負(fù)責(zé)展示該層的內(nèi)容，但是我們可以直接透過該層點(diǎn)擊到它下方的元素，設(shè)置了該屬性的元素本身會被虛化
在我們?yōu)轫撁嫣顚懳谋镜臅r(shí)候經(jīng)常會出現(xiàn)由于編碼格式或者文字行間距不同而出現(xiàn)行與行之間的文字參差不齊，使用text-aline：justify
multiple是H5屬性，表示用戶可以選擇多個(gè)文件或選項(xiàng)，例如：
<input type="file" multiple>
JD清除浮動clearfix寫法
.clearfix::after,clearfix::before{
content:"",
display:table
}
.clearfix::after{
clear:both
}
.clearfix{
*zoom:1;
}
在css樣式中聲明編碼格式，特別需要注意在使用偽元素時(shí)聲明，否則content內(nèi)容會亂碼
@charset 'UTF-8'
background-origin
用來指定背景圖片的的起始位置
content-box
從盒模型的內(nèi)容位置開始，也就是說是從圖片的起始位置是從盒模型的內(nèi)容部分的左上角開始
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
從盒模型的內(nèi)容部分開始裁剪圖片
padding-box
從盒模型的padding部分開始裁剪
border-box
從盒模型的邊框部分開始裁剪
background-atteachment
scroll
背景圖片將隨著滾動條的移動而移動，背景圖和div是相對固定的
fixed
背景圖不隨著滾動條的移動而移動，背景圖是固定在初始位置的，這這會讓看起來背景圖在div發(fā)生滾動時(shí)背景圖在變化
HTML元素有默認(rèn)的line-height，所以忽悠一個(gè)現(xiàn)象，在p標(biāo)簽中輸入文中默認(rèn)會有上下間距，我們可以設(shè)置line-height=1,來去除標(biāo)簽的上下間距
clear屬性是元素的抗浮動性，例如，現(xiàn)在在一個(gè)頁面內(nèi)有一個(gè)div和p標(biāo)簽，如果我們給div設(shè)置了浮動，那么它下面的p標(biāo)簽就會受到影響，表現(xiàn)為p標(biāo)簽內(nèi)的文字會環(huán)繞div進(jìn)行排列，但是如果我們?yōu)閜標(biāo)簽設(shè)置了clear，那么p標(biāo)簽會不受其它已經(jīng)浮動的元素的影響，按照正常的布局來排列
clear
left:抗左側(cè)浮動 right:抗右側(cè)浮動 both:抗兩側(cè)浮動
word-break
break-all :文字自動換行
keep-all:文字在半角空格或連字符處換行
fieldset
用于對表單元素進(jìn)行分組
<form id="info">
<fieldset disabled form="info">
<legend>基本信息</legend>
<label for="name">姓名:</label><input type="text" id="name">
</fieldset>
</form>
white-space
CSS3新屬性，用來控制文字是否換行，保留空格
normal：默認(rèn)，空白會被瀏覽器忽略
pre：空白會被瀏覽保留，行為類似于<pre>標(biāo)簽
nowrap：文本不會換行，文本會在同一行上繼續(xù)，直到遇到
標(biāo)簽
pre-wrap：保留空白符序列，但是正常的進(jìn)行換行
pre-line：合并空白符序列，但是保留換行符
優(yōu)化滑動
-webkit-overflow-scrolling: touch;
