css 常用方法

1、移动端适配

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; minimum-scale=1; user-scalable=no;">

device-width：分辨率的宽。
initial-scale：初始缩放比例，1表示不缩放。
maximum-scale：最大缩放比例，取值[0,10]。
minimum-scale：最小缩放比例，取值[0,10]。
user-scalable：是否允许手动缩放页面，默认值为yes。

理想视口：一般来讲，这个视口其实不是真是存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。
其中user-scalable设置为no 可以解决移动端点击事件延迟问题。
方法一：media +rem+vw+vh

@media only screen and (max-width: 1600px) and (min-width: 1280px){
	html{
	    font-size: 14px;
    }
}
@media only screen and (max-width: 1280px) and (min-width: 960px){
    html{
    	font-size: 12px;
	}
}
@media only screen and (max-width: 960px){
    html{
	    font-size: 10px;
	}
}
.box{
    width:50vw;
    height: 20vh;
    line-height: 20vh;
    font-size: 1.5rem;/*1.5倍的html根字体大小*/
	margin:0 auto;
}

vw：相对于视窗的宽度，视窗宽度是100vw。vh：相对于视窗的高度，视窗高度是100vh。
vmin：vw和vh中的较小值。vmax：vw和vh中的较大值。

方法二：rem
rem相对于浏览器的根元素（HTML元素）的font-size。默认情况下，html元素的font-size为16px。

 html{ font-size: 625% }/*1rem=100px*/
.box{
      font-size: .12rem;
 }

2、超出部分隐藏
方法一：

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    word-break: break-all;//英文换行

方法二：

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;//英文换行

3、文字古诗排版

//文字垂直
writing-mode: vertical-rl;/*阅读顺序从右往左*/
writing-mode: vertical-lr;/*阅读顺序从左往右*/

4、文本两端对齐

text-align-last: justify;

5、选择指定元素
相对于父元素的第几个子元素：
first-child：第一个
last-child：最后一个
nth-child(n)：第n个。odd和even匹配下标是奇数或偶数的子元素（第一个子元素的下标是 1）。
nth-child(-n+n)：选择第 n 个之前的元素（此处的 n 是后面的那个）。eg：nth-child(-n+10)第10个之前（包含第10个）的元素
nth-child(n+n)：选择第 n 个之后的元素。eg：nth-child(n+6)第6个之后（包含第6个）的元素
nth-last-child(n)：选择倒数第 n 个元素
使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值：
nth-child(3n)：选择第 3、6、. . . 个元素，选择三的倍数。
nth-child(3n+1)：选择第 1、4、7 。。。个元素，从第一个开始每个递增三个。

 li:nth-child(odd) {
   background-color: #f66;
}
li:nth-child(even) {
   background-color: #66f;
}
 /*第6个到第10个*/
li:nth-child(n+6):nth-child(-n+10) {
   background-color: #3c9;
}

6、:not()排除指定元素不使用样式
样式：

 .cleared-attr li {
            height: 40px;
            line-height: 40px;
        }
        .cleared-attr span {
            display: inline-block;
        }
        .cleared-attr .first-line span:not(:last-child)::after {
            content: ",";
        }
        .cleared-attr .second-line span:not(:nth-child(-n+3)) {
            display: none;
        }

html：

 <ul class="cleared-attr">
        <li class="first-line">
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>D</span>
            <span>E</span>
        </li>
        <li class="second-line">
            <span>A</span>
            <span>B</span>
            <span>C</span>
            <span>D</span>
            <span>E</span>
        </li>
    </ul>

7、object-fit规定图像尺寸
object-fit: cover;大小保持其宽高比，填充元素的整个内容框。不匹配，则剪裁。图片不变形且整体排版不受影响。
object-fit: contain;缩放，以便填充时保持其宽高比。 在填充的同时保留其长宽比，如果宽高比与框不匹配，将添加“黑边”。
object-fit: fill;完全填充。不匹配，则拉伸。
object-fit: scale-down;内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。
object-fit:none；尺寸不会被改变。

样式：

 .image-size {
            display: flex;
            justify-content: space-between;
            width: 1000px;
            height: 300px;
        }
        .image-size li {
            width: 200px;
            list-style: none;
        }
        h3 {
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
        }
        .image-size img {
            width: 100%;
            height: 260px;
            background-color: #3c9;
        }
        .cover {
             object-fit: cover;
         }
        .contain {
             object-fit: contain;
         }
        .fill {
             object-fit: fill;
         }
        .scale-down {
             object-fit: scale-down;
         }

html：

<ul class="image-size">
        <li>
            <h3>Cover</h3>
            <img src="img/xclx.PNG" class="cover">
        </li>
        <li>
            <h3>Contain</h3>
            <img src="img/xclx.PNG" class="contain">
        </li>
        <li>
            <h3>Fill</h3>
            <img src="img/xclx.PNG" class="fill">
        </li>
        <li>
            <h3>ScaleDown</h3>
            <img src="img/xclx.PNG" class="scale-down">
        </li>
    </ul>

8、滚动条样式
::-webkit-scrollbar 滚动条整体样式，高宽分别对应横竖滚动条的尺寸。
::-webkit-scrollbar-thumb 滚动条里面小方块
::-webkit-scrollbar-track 滚动条里面轨道

样式：

 .test{
	width: 50px;
    height: 200px;
    overflow: auto;
    float: left;
    margin: 5px;
    border: none;
}
.scrollbar{
	width: 30px;
    height: 600px;
    margin: 0 auto;
}
.test-1::-webkit-scrollbar {
    width: 10px;  
	height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
	border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background-color: #F90;
    /*螺旋纹*/
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
}
.test-1::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
}

html：

<div class="test test-1">
    <div class="scrollbar">
        我住长江头，君住长江尾。日日思君不见君，共饮长江水。
        此水几时休，此恨何时已。只愿君心似我心，定不负相思意。
    </div>
</div>

不带前缀，全局使用：

::-webkit-scrollbar{
    width: 6px;
    height: 1px;
}
::-webkit-scrollbar-thumb{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(144,147,153,.3);
    transition: background-color .3s;
}
::-webkit-scrollbar-track{
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    transition: opacity .12s ease-out;
}

9、边框
点状：dotted
实线：solid
双线：double
虚线：dashed

10、一像素边框问题

div {
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

11、transform:scale3d()

//水平翻转
transform:scale3d(-1, 1, 1);

12、使用overflow-scrolling支持弹性滚动
iOS页面非body元素的滚动操作会非常卡(Android不会出现此情况)，通过overflow-scrolling:touch调用Safari原生滚动来支持弹性滚动，增加页面滚动的流畅度。

body {
    -webkit-overflow-scrolling: touch;
}
.elem {
    overflow: auto;
}

13、使用:valid和:invalid校验表单
:valid：在表单元素的值合乎条件验证时设置指定样式
:invalid：在表单元素中的值是非法时设置指定样式
css：

.form-validation {
    width: 500px;
}
.form-validation div {
    margin-top: 10px;
}
label {
   display: block;
   padding-bottom: 5px;
   font-weight: bold;
   font-size: 16px;
}
input,textarea {
   display: block;
   padding: 0 20px;
   outline: none;
   border: 1px solid #ccc;
   width: 100%;
   height: 40px;
   caret-color: #09f;
   transition: all 300ms;
}
textarea {
   height: 122px;
   resize: none;
   line-height: 30px;
   font-size: 16px;
}

input:valid,textarea:valid {/*在表单元素的值合乎条件验证时设置指定样式*/
   border-color: #3c9;/*绿*/
   box-shadow: inset 5px 0 0#3c9;
}
input:invalid,textarea:invalid {/*用于在表单元素中的值是非法时设置指定样式。*/
   border-color: #f66;/*红*/
   box-shadow: inset 5px 0 0 #f66;
}

html：

<form class="form-validation">
        <div>
            <label>名字</label>
            <input type="text" placeholder="请输入你的名字(1到10个中文)" pattern="^[\u4e00-\u9fa5]{1,10}$" required>
        </div>
        <div>
            <label>手机</label>
            <input type="text" placeholder="请输入你的手机" pattern="^1[3456789]\d{9}$" required>
        </div>
        <div>
            <label>简介</label>
            <textarea required></textarea>
        </div>
</form>

14、pointer-events:none禁用事件触发(默认事件、冒泡事件、鼠标事件、键盘事件等)
css：

 .disabled-trigger {
    padding: 0 20px;
    border-radius: 10px;
    height: 40px;
    background-color: #66f;
    pointer-events: none;
    line-height: 40px;
    color: #fff;
}

html：

<a class="disabled-trigger" href="https://www.baidu.com">点我</a>

15、< label>使用+或~配合for绑定radio或checkbox的选择行为
场景：选项框美化、选中项增加选中样式

background-clip规定背景的绘制区域：
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。

css：

.beauty-selection {
    display: flex;
}
li {
   display: flex;
   align-items: center;
   margin-left: 20px;
}
input:checked + label {
   background-color: #f90;
}
label {
   margin-right: 5px;
   padding: 2px;
   border: 1px solid #f90;
   border-radius: 100%;
   width: 18px;
   height: 18px;
   background-clip: content-box;//规定背景的绘制区域
   cursor: pointer;
   transition: all 300ms;//添加动画效果
}
label:hover {
   border-color: #09f;
   background-color: #09f;
   box-shadow: 0 0 7px #09f;
}
span {
   font-size: 16px;
}

html：

 <ul class="beauty-selection">
        <li>
            <input type="radio" name="radioName" id="fed-engineer" hidden/>
            <label for="fed-engineer"></label>
            <span>前端工程师</span>
        </li>
        <li>
            <input type="radio" name="radioName" id="bed-engineer" hidden/>
            <label for="bed-engineer"></label>
            <span>后端工程师</span>
        </li>
        <li>
            <input type="radio" name="radioName" id="fsd-engineer" hidden/>
            <label for="fsd-engineer"></label>
            <span>全栈工程师</span>
        </li>
    </ul>

16、使用:focus-within分发冒泡响应
:focus-within：一个元素获得焦点，或，该元素的后代元素获得焦点。
:placeholder-shown：在 input 或 textarea 元素显示 placeholder text 时生效。

css：

*{
	box-sizing: border-box;
}
.bubble-distribution {
    position: relative;
    margin-top: 50px;
    padding: 25px;
    border-radius: 2px;
    width: 320px;
    background-color: #FFF;
}
h3 {
    font-weight: bold;
    font-size: 16px;
    color: #333;
}
div {
   margin-top: 10px;
}
.bubble-distribution img {
   position: absolute;
   left: 50%;
   bottom: 100%;
   margin: 0 0 -20px -60px;
   width: 120px;
}

.accout img,.password img,.code img {
   display: none;
   margin-bottom: -27px;
}
.accout:focus-within img,.password:focus-within img,.code:focus-within img {
   display: block;
}
.accout:focus-within ~img,.password:focus-within ~img,.code:focus-within ~img {
   display: none;
}

.bubble-distribution ul {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 10px;
   padding:0;
   height: 30px;
   line-height: 30px;
}
.bubble-distribution li {
   position: relative;
   width: 45%;
   transition: all 300ms;
   list-style-type: none;
}
li:focus-within {/*一个元素获得焦点，或，该元素的后代元素获得焦点*/
   background: linear-gradient(90deg, #09f 50%, transparent 0) repeat-x,
               linear-gradient(90deg, #09f 50%, transparent 0) repeat-x,
               linear-gradient(0deg, #09f 50%, transparent 0) repeat-y,
               linear-gradient(0deg, #09f 50%, transparent 0) repeat-y;
   background-position: 0 0, 0 100%, 0 0, 100% 0;
   background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
   animation: move 500ms infinite linear;
}

input[type=text],input[type=password] {
   padding: 10px;
   outline: none;
   border: 1px solid #e9e9e9;
   border-radius: 2px;
   width: 100%;
   height: 40px;
   transition: all 300ms;
}
input[type=text]:focus:valid,input[type=password]:focus:valid {
   border-color: #09f;
}
input[type=text]:focus:invalid,input[type=password]:focus:invalid {
   border-color: #f66;
}
    
input[type=radio] {
   position: absolute;
   width: 0;
   height: 0;
}
input[type=radio]:checked + label {
   border: 3px solid transparent;
   background-color: #09f;
   color: #fff;
}
    
label {
   display: block;
   border-bottom: 1px solid #ccc;
   width: 100%;
   background-clip: padding-box;
   cursor: pointer;
   text-align: center;
   transition: all 300ms;
}
.bubble-distribution button {
   overflow: hidden;
   margin-top: 10px;
   outline: none;
   border: none;
   border-radius: 2px;
   width: 100%;
   height: 40px;
   background-color: #09f;
   cursor: pointer;
   color: #fff;
   transition: all 300ms;
}

.code {
    display: flex;
    justify-content: space-between;
}
.code button {
    margin-top: 0;
}
.code input:not(:placeholder-shown) {
    width: 70%;
}
.code input:not(:placeholder-shown) + button {
    width: 25%;
}
.code input:placeholder-shown + button {
   width: 0;
   opacity: 0;
	padding: 0;
}

html：

<form class="bubble-distribution">
        <h3>注册</h3>
        <div class="accout">
            <input type="text" placeholder="请输入手机或邮箱" pattern="^1[3456789]\d{9}$|^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$" required>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png">
        </div>
        <div class="password">
            <input type="password" placeholder="请输入密码(6到20位字符)" pattern="^[\dA-Za-z_]{6,20}$" required>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png">
        </div>
        <div class="code">
            <input type="text" placeholder="请输入邀请码(6位数字)" pattern="^[\d]{6}$" maxLength="6" required>
            <button type="button">查询</button>
            <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png">
        </div>
        <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png">
        <ul>
            <li>
                <input type="radio" name="sex" id="male">
                <label for="male">Boy</label>
            </li>
            <li>
                <input type="radio" name="sex" id="female">
                <label for="female">Girl</label>
            </li>
        </ul>
        <button type="button">注册</button>
    </form>

文章多数内容来自于：https://segmentfault.com/a/1190000020899202?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com&share_user=1030000000178452