1 设置placeholder的字体颜色
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
2 变小手
cursor: pointer;
3 字间距
letter-spacing: 10px;
4 button 的边框设置点击无
outline:none;
border:0;
5 段落单词折行显示
word-wrap: break-word;
6 上下左右居中
display: flex;
align-items: center;
7 开头空2字
text-indent: 22px;
8 图片底部的空隙可能是 2px,而有时可能是 4px 或更多。
给图片定义vertical-align也可以解决这个问题,将图片的垂直对齐方式设置为 top 或 bottom,这个空隙会消失。vertical-align:top;
解决办法给img定义vertical-align或者定义为块状display:block,最优的解决办是定义vertical-align,但是定义vertical-align为middle时在IE6中大概还有一像素的上边距,最好为top或bottom。还有种方法是把父容器的字体大小为零font-size:0
9 让一个div在另一个div水平居中,例如顶部tab的那个标题怎么自适应居中。
可以给当前div设置position:absolute;
,给body设置position:reletive;
10 padding-right 失效
100% 的宽度 + padding 已经超出了屏幕的宽度
解决:父元素加一个 box-sizing: border-box;
11 每行三个的布局
最外层父元素
padding: 5px 5px 5px 7px;
box-sizing:border-box;
每一个a标签
padding: 5px;
width: 30%;
float: left;
padding-top: 5px;
12 flex每行三个的布局
<ul class="tem-flex">
<li class="tem-list"></li>
<li class="tem-list"></li>
<li class="tem-list"></li>
</ul>
.tem-flex{
display: flex;
flex-wrap: wrap;
justify-content:space-between;
text-align: justify;
}
.tem-list{
width:49%;
border:1px solid #ff6600;
margin-bottom: 10px;
}
拖动视窗的话,中间的宽度会稍微变大
原文:https://blog.csdn.net/lucky___star/article/details/87876830
13 div内显示一行,超出部分用省略号显示
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
14、div内显示两行或三行,超出部分用省略号显示
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;(行数)
-webkit-box-orient: vertical;
原文:https://blog.csdn.net/NN_nan/article/details/55045562
15 清除浮动
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}