CSS常见技巧汇总

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>