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