-
固定比例盒子
要创建具有固定比例的一个盒子，所有你需要做的就是给 div 设置一个 padding：
.container {
height: 0;
padding-bottom: 20%;
position: relative;
}
.container div {
border: 2px dashed #ddd;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
使用20％的padding-bottom使得框等于其宽度的20％的高度。与视口宽度无关，子元素的div将保持其宽高比（100％/ 20％= 5:1）。
-
给 “默认” 链接定义样式
//给 “默认” 链接定义样式：
a[href]:not([class]){
color: #008000;
text-decoration: underline;
}
通过 CMS 系统插入的链接，通常没有 class 属性，以上样式可以甄别它们，而且不会影响其它样式
-
使用 max-height 来建立纯 CSS 的滑块
max-height 与 overflow hidden 一起来建立纯 CSS 的滑块：
.slider {
max-height: 200px;
overflow-y: hidden;
width: 300px;
}
.slider:hover {
max-height: 600px;
overflow-y: scroll;
}
鼠标移入滑块元素时增大它的 max-height 值，便可以显示溢出部分
-
[解决子元素设置margin-top，效果到父元素上的问题]
有时当我们设置子元素的margin-top，但是却发现子元素没有出现上外边距的效果，反而是父元素出现了上外边距的效果。
这种问题的解决方法如下：
1.给父元素加边框。
2.给父元素设置padding-top来代替给子元素设置margin-top。
3.内容生成(推荐)。代码如下：
element(父元素):before{
content:'';
display:table;
}
-
::-Webkit-Input-Placeholder
input 的 H5 placeholder 属性，很好用，但不能直接改这个文字颜色，所以目前的解决方法就是用::input-placeholder属性来改。
小Tips: 配合 opacity 属性使用效果更佳哦！
image
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
:-moz-placeholder { /* Firefox 18- */
color: pink;
}
-
Outline 当点击Input元素时显示的当前状态线（外发光）
image
这个状态线是用来提示用户当前状态指示作用，但因为效果很美观，建议去掉，或自己改个样式
div {
outline: none; //移动浏览器默认的状态线
// outline: 5px dotted red; 也可以设置样式
}
-
Contenteditable 设置Element是否可编辑
<p contenteditable="true">可编辑</p>
-
Webkit-Playsinline
手机video 都可以在页面中播放，而不是全屏播放了。
<video id="myvideo" src="test.mp4" webkit-playsinline="true"></video>
-
Position: Absolute， 让Margin有效的
设置left:0, right:0 就可以。原因是2边都是0不存在边距，element就可以得出距离，并居中。
div {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
-
User-Select 禁止用户选中文本
div {
user-select: none; /* Standard syntax */
}
-
清除手机Tap事件后Element 时候出现的一个高亮
*{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
-
-Webkit-Appearance:none
移除浏览器默认的样式，比如chrome的input默认样式
input, button, textarea, select {
*font-size: 100%;
-webkit-appearance:none;
}
-
使用CSS Transforms 或者 Animations时可能会有页面闪烁的Bug
-webkit-backface-visibility: hidden;
-
-Webkit-Touch-Callout 禁止长按链接与图片弹出菜单
-webkit-touch-callout: none;
-
Calc() Function, 计算属性值
div {
width: calc(100% - 100px);
}
上面的例子就是让宽度为100%减去100px的值，项目中很适用，要IE9以上兼容。
网友评论