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
那么盒子默认变化方向就会变为由下向上
由右向左同理
*/
.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触发");
})
</script>
该属性还有一个特性是可以使元素被穿透，也就是说设置了该属性的元素只负责展示该层的内容，但是我们可以直接透过该层点击到它下方的元素，设置了该属性的元素本身会被虚化
在我们为页面填写文本的时候经常会出现由于编码格式或者文字行间距不同而出现行与行之间的文字参差不齐，使用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发生滚动时背景图在变化
HTML元素有默认的line-height，所以忽悠一个现象，在p标签中输入文中默认会有上下间距，我们可以设置line-height=1,来去除标签的上下间距
clear属性是元素的抗浮动性，例如，现在在一个页面内有一个div和p标签，如果我们给div设置了浮动，那么它下面的p标签就会受到影响，表现为p标签内的文字会环绕div进行排列，但是如果我们为p标签设置了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：文本不会换行，文本会在同一行上继续，直到遇到
标签
pre-wrap：保留空白符序列，但是正常的进行换行
pre-line：合并空白符序列，但是保留换行符
优化滑动
-webkit-overflow-scrolling: touch;
网友评论