1.设置input的placeholder的字体样式
<input type="text" placeholder="请设置用户名">
设置input占位符的样式
input::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: red;
}
input::-moz-placeholder {
/* Firefox 19+ */
color: red;
}
input:-ms-input-placeholder {
/* IE 10+ */
color: red;
}
input:-moz-placeholder {
/* Firefox 18- */
color: red;
}
设置input聚焦时的样式
input:focus {
background-color: red;
}
取消input边框
input {
border: none;
outline: none;
}
2.单行和多行文本超出省略号
<div class="container">
<p class="single">
<span class="c-red">单行溢出:</span>《ECMAScript 6 入门教程》是一本开源的JavaScript语言教程,全面介绍ECMAScript6新引入的语法特性。
</p>
<p class="mutiple">
<span class="c-red">多行溢出:</span>《ECMAScript 6 入门教程》是一本开源的JavaScript语言教程,全面介绍ECMAScript6新引入的语法特性。本书覆盖ES6与上一个版本ES5的所有不同之处,对涉及的语法知识给予详细的介绍,并给出大量简介移动的示例代码。
</p>
</div>
单行文本出现省略号
.single {
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-break: break-all;
}
多行文本出现省略号
.mutiple {
display: -webkit-box; /* 重点:不能用block等其他,将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式) */
-webkit-line-clamp: 3; /* 行数,超出三行隐藏且多余的用省略号表示... */
line-clamp: 3;
word-break: break-all;
overflow: hidden;
max-width: 100%;
}
3.负边距使用技巧
规律:左为负时,是左移,右为负时,是左拉,上下与左右相似
<div class="wrap">
<div class="item" style="background-color: red;"></div>
<div class="item" style="background-color: green;"></div>
<div class="item" style="background-color: yellow;"></div>
<div class="item" style="background-color: pink;"></div>
<div class="item" style="background-color: green;"></div>
</div>
* {
margin: 0;
padding: 0;
}
.wrap {
/* 利用负值技巧进行整体移动 */
margin-left: -6px;
}
.item {
float: left;
width: 20%;
height: 300px;
border-left: 6px solid #fff;
box-sizing: border-box;
}
4.定位同时设置方位情况
规律:绝对定位和固定定位时,同时设置left和right等同于隐式的设置宽度
span {
border: 1px solid red;
position: absolute;
left: 0;
right: 0;
/* 等同于设置 width: 100%; display: block; */
}
<span>1</span>
5.相邻兄弟选择器之常用场景
ul {
width: 500px;
margin: auto;
list-style: none;
padding: 0;
border: 1px solid red;
text-align: center;
}
li + li {
border-top: 1px solid red;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
6.outline属性的妙用技巧
区别:outline不计算大小 border计算大小
ul {
list-style: none;
width: 600px;
margin: auto;
}
li {
padding: 10px;
border: 10px solid pink;
outline-offset: -10px; /* 用于设置 outline 与一个元素边缘或边框之间的间隙。 */
}
li + li {
margin-top: -10px;
}
li:hover {
/* border: 10px solid gold; */
outline: 10px solid gold;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>