用css实现自定义虚线边框
div {
padding: 1em;
border: 1px dashed transparent;
background: linear-gradient(white,white) padding-box,
repeating-linear-gradient(-45deg,#ccc 0, #ccc 0.25em,white 0,white 0.75em);
}
超出显示省略号
- 单行文本
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
- 多行文本
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
隐藏移动端横向滚动条
最外层盒子高度和每个子项目的元素一样，父元素的高度比在外层高，最外层设置overflow:hidden属性
<div class="main">
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
.main{
width: 90%;
height: 50px; /* 和子元素的高度一样*/
border: 1px solid #cdc;
overflow: hidden;
}
.parent{
width: 100%;
height: 110%;
white-space: nowrap;
overflow-x: auto;
/* 不加该属性，在ios手机上滑动时会出现卡顿，加了以后滚动条又出现， ::-webkit-scrollbar 失效 */
-webkit-overflow-scrolling: touch;
}
// 可有可无
.parent::-webkit-scrollbar {
display: none;
}
.child{
display: inline-block;
width: 50px;
height: 50px;
margin: 0 10px;
background-color: pink;
}
flex布局中input没有自适应长度的解决方法
- 因为input标签有一个默认最小长度，在flex布局中 flex-auto如果宽度小于input长度时input会显示最小的长度，所以给这个input自定义一个最小长度；例如min-width: 100px;就可以了
- 或者给这个input外面包一层div，给div设置flex: 1;input的长度width: 100%;
取消inline-block产生的间隙
- 使用margin-left的负值
/* firefox */
margin-left: -4px;
/* chrome */
margin-left:-6px;
/* IE */
margin-left:-2px;
- 在父元素的css中设置word-spacing负值
/* firefox */
word-spacing：-8px;
/* chrome */
word-spacing: -6px;
/* IE: */
word-spcing: -4px;
取消滚动条
element ::-webkit-scrollbar {
display: none;
}
鲜为人知的CSS3属性
- -webkit-tap-highlight-color
这个属性只用于iOS (iPhone和iPad)。当点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个样式，可以设置其值为任何颜色。如果要取消，设置成transparent即可。
- -webkit-text-size-adjust
Chrome浏览器默认情况下的字体最小为12px，如果要设置某字体小于12px的话，发现在Chrome还是12px。如果要使此生效的话，就需要修改Chrome的默认配置了，一般应用下面的代码就能在全局生效了：
html {
-webkit-text-size-adjust: none;
}
注意：-webkit-text-size-adjust放在body中会导致页面缩放失效,不要把-webkit-text-size-adjust设置为全局或者可继承的。
-webkit-text-size-adjust 的本职是用于mobile的，一般用处是防止iPhone在坚屏转向横屏时放大文字（注意，就算viewport设置了maximum-scale=1.0 文字还是会放大的）。而且iPhone和iPad的默认设定是不一样的，iPhone默认设定 -webkit-text-size-adjust: auto; iPad默认设定 -webkit-text-size-adjust: none;所以iPad默认是不调节的。
此属性还支持百分比，这在当前的桌面版的webkit浏览器是不支持的，所以如果不想让iPhone横坚屏切换的时候调节文字，用 -webkit-text-size-adjust: 100%; 绝对不能用 -webkit-text-size-adjust: none; 这会导致仍然支持 -webkit-text-size-adjust: none;的桌面版的webkit浏览器无法人为放大文字大小，严重影响可用性。
- -webkit-appearance: none
消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式 。 注意：不同type的input使用这个属性之后表现不一。text、button无样式，radio、checkbox直接消失
- -webkit-user-select
-webkit-user-select: none;
/*禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整*/
- -webkit-touch-callout
-webkit-touch-callout:none;
/*禁用长按页面时的弹出菜单(iOS下有效) ,img会弹出保存图片的之类的弹层，a标签会弹出浏览器打开的链接
伪类选择器 focus:within
表示一个元素获得焦点，或该元素的后代获得焦点。
eg:
<div class="box">
<div class="content">
<input type="text" placeholder="please input">
</div>
</div>
.box {
width: 400px;
height: 400px;
border: 1px solid #ccc;
margin: 100px auto;
}
.content {
width: 300px;
height: 300px;
border: 1px solid #ccc;
margin: 50px auto;
}
input {
border: 1px solid #ccc;
outline: none;
margin: 100px 50px;
transition: all .5s;
}
input:focus {
margin: 95px 50px;
box-shadow: 0 3px 5px gray;
border-color: red;
}
.box:focus-within {
border: 1px solid yellow;
}
.content:focus-within {
border-color: blue;
}
当input获得焦点的时候，便会触发其父级元素的focus-within。
更多栗子移步这里。
让一个层在body中全部占满有下面的方式
1、left:0;top:0;width:100%;height:100%；position:fixed
2、left:0;top:0;right：0；bottom：0；posioton:fixed;
