文本
属性
color: red; /*颜色*/
font-size: 16px; /*字体大小*/
font-family: "微软雅黑"; /*字体*/
font-style: normal/italic/oblique; /*斜体字体*/
text-align: left/center/right; /*水平对齐方式*/
line-height: 1; /*行高*/
text-transform: none; /* 文本大小写 */
/*
lowercase 小写
uppercase 大写
capitalize 单词首字母大写
initial 默认值
inherit 继承
none 不改变(默认)
*/
// 文本平均分布，相当于flex
text-align: justify;
text-align-last: justify;
/* placeholder 样式 */
input::-webkit-input-placeholder {
color: #ffffff;
}
font-weight: lighter/bolder/bold/normal; /*粗体字体*/
/* 字重(字体粗细) */
font-weight: 100 - Thin
font-weight: 200 - Extra Light (Ultra Light)
font-weight: 300 - Light
font-weight: 400 - Regular (Normal、Book、Roman)
font-weight: 500 - Medium
font-weight: 600 - Semi Bold (Demi Bold)
font-weight: 700 - Bold
font-weight: 800 - Extra Bold (Ultra Bold)
font-weight: 900 - Black (Heavy)
文本两端对齐
text-align:justify;
text-justify:distribute-all-lines;/*ie6-8*/
text-align-last:justify;/* ie9*/
-moz-text-align-last:justify;/*ff*/
-webkit-text-align-last:justify;/*chrome 20+*/
复合属性
font: italic bold 16px/1 "微软雅黑";
单行文本居中
text-align: center;
line-height: 1;
文本格式
letter-spacing: 10px; /*字间距*/
text-indent: 2em; /*首行缩进*/
word-break: break-all; /*自动折行*/
break-word; /*换行不截断单词*/
text-decoration: none;
/*
none 无
underline 下划线
overline 上划线
line-through 删除线
blink 闪烁的文本
*/
word-spacing: 10px; /*词间距*/
white-space: nowrap; /* *文本* 换行 如何处理元素内的空白*/
/*
normal 默认，保留空白
pre 保留空白<pre>
nowrap 不换行
pre-wrap 保留空白符，换行
pre-line 合并空白符，保留换行符
*/
text-overflow: ellipsis; /*文本溢出隐藏*/
overflow: hidden; /*内容溢出隐藏*/
/*
visible 默认，不隐藏
hidden 隐藏，不可见
scroll 隐藏，显示滚动条
auto 内容溢出自动隐藏，显示滚动条
overlay 显示滚动条，但滚动条不占用容器空间
*/
/* 禁止选中文本 */
-moz-user-select:none;
-webkit-user-select:none;
user-select:none;
自定义字体
@font-face{
font-family: "平方"; /* 自定义名称 */
src: url("./src/assets/fonts/PINGFANG MEDIUM.TTF"); /* 字体文件 */
}
.box{
font-family: "平方";
}
列表
// 无序 // 有序 // 定义列表
<ul> <ol> <dl>
<li></li> <li></li> <dt></dt>
<li></li> <li></li> <dd></dd>
</ul> <ol> </dl>
列表编号
list-style: none;
list-style-type: circle; /*列表编号属性*/
/*
circle 空心圆
disc 实心圆
square 实心块
decimal 数字
decimal-leading-zero 0开头的数字
lower-roman 小写罗马数字
upper-roman 大写罗马数字
lower-greek 小写希腊字母
lower-latin 小写拉丁字母
upper-latin 大写拉丁字母
*/
列表位置
list-style-position: outside / inside;
图片编号
list-style-image: url();
表格
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
</tr>
</tfoot>
</table>
colspan: /*合并列 (横向合并)*/
rowspan: /*合并行 (纵向合并)*/
cellspacing: /*外边距*/
cellpadding: /*内边距*/
border-collapse: collapse; /*合并边框*/
语义化标签
块级标签
<header></header> <!--页眉-->
<main></main> <!--主体-->
<footer></footer> <!--页脚-->
<nav></nav> <!--导航(包括轮播图的点)-->
<acticle></acticle> <!--文章/博客-->
<section></section> <!--章节-->
<aside></aside> <!--侧边栏-->
<hgroup></hgroup> <!--标题组-->
<figure> <!--图表：图片 + 标题/注释-->
<img />
<figcaption></figcaption>
</figure>
行内标签
<marK></marK> <!--文本高亮/标记-->
<time datatime="2020-08-15">中秋节</time> <!--日期/时间-->
<del></del> <!--删除文本-->
<s></s> <!--无用文本-->
<ins></ins> <!--插入文本-->
<u></u> <!--下划线文本-->
<small></small> <!--小号文本-->
<code></code> <!--行内代码-->
<pre></pre> <!--代码块-->
<kbd> <!--用户输入-->
<kbd>ctrl</kbd>
<kbd>c</kbd>
</kbd>
<fieldset>
<fieldset>
<legend>What level ninja are you?</legend>
<input id="newbie" type="radio" name="levels" value="newbie">
<label for="newbie">Newbie Kitten</label><br>
<input id="intermediate" type="radio" name="levels" value="intermediate">
<label for="intermediate">Developing Student</label><br>
<input id="master" type="radio" name="levels" value="master">
<label for="master">Master</label>
</fieldset>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pW3MWZxW-1661838626343)(E:\01.笔记\upload\image-20211018103334009.png)]
<sup>
15<sup>th</sup>
15th
div 属性
width: 100px; /*宽*/
height: 100px; /*高*/
border: 1px solid black; /*边框*/
background: red; /*背景色*/
margin: 10px; /*外边距*/
padding: 10px; /*内边距*/
overflow: hidden; /*溢出隐藏*/
visibility: visble/hidden;/*显示隐藏(隐藏占位)*/
display: none / block / inline / inline-block;
/* 块级元素 定位居中 */
position: absolute;
top: 50%;
left: 50%;
transfrom: translate(-50%, -50%);
符号
< <!--小于-->
> <!--大于-->
<!--空格-->
& <!--&-->
® <!--已注册-->
© <!--版权符-->
™ <!--tm商标-->
超链接
<a href="javascript:;">链接</a>
a:link 访问前
a:visited 访问后
a:hover 鼠标悬停
a:actived 按下激活
<a href="javascript:;" target="_black">超链接</a>
_black 新标签页打开
_self 当前标签页
<a download="<url>">下载</a> <!--下载链接-->
表单
<input type="text">
text 文本输入
password 密码输入
button 普通按钮
submit 提交按钮
reset 重置按钮
radio 单选按钮
checkbox 多选框
image 图片按钮
file 文件域
html5:
color 颜色选择
date 日期选择
datetime 日期 + 时间
datetime-local 本地
month 年 + 月
week 年 + 第几周
time 时间 (时+分)
search 搜索框
range 滑块
number 数字输入
tel 电话号码
email 邮箱 (验证格式)
url url地址 (验证格式)
<!--文本域-->
<textarea></textarea>
<!--文本输入框默认选择列表-->
<input type="text" list="list" />
<datalist id="list">
<option value="html">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</datalist>
<!-- 去除默认样式，取消下拉箭头 -->
-webkit-appearance: none;
<!-- <input type="number">时的箭头 -->
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
属性
min 最小值
max 最大值
step 递增值
placeholder 提示文本
autofocus 获取焦点
autocomplate 自动补全
form 与表单关联
required 必填项
patter 正则匹配
multipls 多选(下拉框/文件选择)
list 输入框数据列表
formactive 按钮的提交地址
formmethod 按钮的提交方式
密码表单警告
[DOM] Input elements should have autocomplete attributes (suggested: “current-password”)
- 在外层套上
<form>标签 - 添加
autocomplete="off"属性
背景图片
背景属性
background-color: /*背景颜色*/
background-img: url(); /*背景图片*/
background-repeat: repeat; /*默认，背景重复*/
repeat-x /*水平方向重复*/
repeat-y /*垂直方向重复*/
no-repeat /*不重复*/
background-positon: /*背景位置*/
left / center /right
top / center / bottom
background-size: /*背景图片尺寸*/
px / %
cover /*背景拉伸，扩大至全部区域*/
contain /*背景图完整显示*/
background-origin: /*背景图定位 (开始位置)*/
padding-box /*默认，内边框开始显示*/
border-box /*在边框上开始显示*/
content-box /*在内容部分显示*/
background-clip: /*背景裁切 (结束位置)*/
padding-box /*内边距结束显示*/
border-box /*边框结束显示*/
content-box /*在内容区域结束显示*/
background-attachment: /*背景随页面滚动*/
scroll /*默认，跟随页面移动*/
fixed /*不跟随页面移动*/
背景渐变
/*线性渐变*/
linear-gradient: to top, red 0%, yellow 100%;
repeating-linear-gradient:; /*重复渐变*/
/*径向渐变*/
radial-gradient: x, y, width, height, color1, color2;
x,y /*中心点位置*/
width,height /*渐变的范围*/
color /*渐变的颜色*/
repeating-radial-gradient /*重复渐变*/
css 动画
perspective: 600px ~ 2000px; /* 视距：3D时使用 */
transform-style: preserve-3D; /* 保留变形元素子元素的效果(父元素变形，子元素不失效) */
变形：
transform: translate(10px, 10px) /* 元素位移 */
rotate(30deg) /* 旋转(角度) */
scale(2) /* 拉伸/缩小(倍) */
skew(30deg) /* 倾斜(角度) */
transform-origin: left top; /* 改变中心点的位置 */
3D变形
transform: scale3d(x, y, z); /* 3D缩放 */
transform: rotateX(30deg) /* X轴旋转 */
rotateY(30deg) /* Y轴旋转 */
rotateZ(30deg) /* Z轴旋转 */
rotate3d(-1, 0, 1, 30deg)/* 0:不旋转 -1:反向旋转 1:正向旋转 */
transform: translateX(100px); /* X轴位移 */
translateY(100px); /* Y轴位移 */
translateZ(100px); /* Z轴位移 */
translate3d(100px,100px,100px); /* 3D位移 */
帧动画：自动触发
/* 帧动画 */
@keyframes anim {
0% { width: 100px; }
100% { width: 400px; }
}
/* 使用帧动画 */
animation: anim 2s linear 400ms infinite alternate forwards;
/* 1：动画名 2：动画时长 3：匀速 4：头一次延迟 5：循环 6：效果反复 7：动画停在终点 */
animation-name /* 名称 */
animation-duration /* 动画时长 */
animation-timing-function /* 匀速 / 非匀速 */
animation-delay /* 头一次延迟 */
animation-iteration-count /* 循环 / 播放次数 */
animation-direction /* 效果反复 */
animation-fill-mode /* 动画停在终点 */
animation-play-state: paused/running; /* 指定动画是否正在运行或已暂停 */
过渡动画：hover手动触发
.box{
width: 100px;
height: 100px;
border: 1px solid black;
transition: all 1s linear 500ms; /* 使返回时也有效果 */
}
.box:hover{ /* hover时触发 */
width: 400px;
transition: all 1s linear 1s;
}
/*
1：变化的属性名
2：效果时长
3：时间曲线 (速度/匀速)
1.ease：默认(非匀速)
2.linear：匀速
3.ease-in：慢速开始
4.ease-out：慢速结束
5.ease-in-out
4：延迟
*/
css实现圆周运动
@keyframes rainbowx {
0% { transform: translate(0, 0) rotate(0turn) translate(30px, 30px) rotate(1turn) }
100% { transform: translate(0, 0) rotate(1turn) translate(30px, 30px) rotate(0turn) }
}
浮动和定位
/* 浮动：脱离文档流，不脱离文本流，不覆盖图片，文本，input */
float: left/right;
/* 定位 */
position: relative; /* 相对定位 */
absolute; /* 绝对定位 */
fixed; /* 固定定位 */
static; /* 取消定位 */
sticky;
top: 10px; /* 定位位置 */
bottom: 10px;
left: 10px;
right: 10px;
z-index: 1; /* 层级：默认0，值越大，层级越大 */
- 设置了
position:sticky的元素并不会脱离文档流。 - 当元素在区域内，元素不受定位的影响（
top、left等设置无效）
当发生滚动，元素就要移出区域时，定位又会变成fixed，根据设置的left、top的值进行定位，像是fixed效果
position: sticky;
top: 10px;
注意：
- 父级元素不能有任何overflow:visible以外的overflow设置。即使是scroll或者auto也不行。
- 父元素的高度不能低于sticky元素的高度
- 同一父容器中的sticky元素，如果定位置相等，则会发生重叠，
- sticky元素如果不属于相同父元素，但是他們的父元素正好紧密相连，则会挤开原来的元素，形成依次占位的效果。
- 必须制定top,left,bottom,right四个中的至少一个，否则其行为与相对定位相同，并且top和bottom同时设置时，top的优先级高；left和right同时设置时，left的优先级高。
理论
margin 塌陷
1. 子元素垂直方向上的 margin 作用在父元素上(会把父元素拉下来)，父子元素都有时选取较大值
2. 同级元素中相邻元素的上一个的 margin-bottom 和下一个的 margin-top 选取较大值
解决办法：
1. 父元素设置边框
2. 父元素触发BFC
浮动问题
1. 子元素浮动后，父元素在不设置固定高的情况下，父元素没有高度
2. 元素浮动后，会脱离文档流，无法撑开父元素高度，影响布局
解决办法：
1. 父元素设置固定高度
2. 父元素设置 overflow
3. 同级子元素的最后的添加一个块标签，设置 clear:both;
4. 清除浮动：.clearfix:after {
contnet: '';
clear: both;
display: block;
}
.clearfix { //设置兼容
*zoom: 1;
}
语义化
**定义：**用合理的html标记及特有属性格式化文档内容
**好处：**1. 在没有css的情况下也能有一个很好的结构
2. 使代码具有可读性，便于团队开发和维护
3. 有利于客户体验
4. 有利于SEO (搜索引擎优化)
BFC
形成条件：
1. 根标签 <html>
2. float 不是 none
3. overflow 不是 visible
4. diaplay 是 inline-block
5. position 是 absolute / fixed
特点：
1. 块级元素在垂直方向一个接一个的放置
2. 垂直距离由 margin 决定，同一BFC内的垂直相邻的两个标签 margin 会重叠
3. 子元素的 margin-left 与父元素的左边开始计算，浮动也是
4. BFC区域计算高度时，浮动子元素参与计算
5. BFC不与float元素重叠
6. BFC是独立容器，子元素不会影响外面的元素，反之亦然
鼠标光标
caret-color: #ffd476; 光标颜色
cursor: default; 默认
auto; 浏览器默认
crosshair; 十字线
pointer; 链接
hand; 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样
move; 移动
text; 文本
wait; 忙碌中
help; 帮助
url(); 图片光标
all-scroll; 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动
col-resize; 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸
no-drop; 禁用 用于标示被拖起的对象不允许在光标的当前位置被放下
not-allowed;禁用 用于标示请求的操作不允许被执行
progress; 等待 标示一个进程正在后台运行
wait; 等待 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状
圆角 阴影
border-radius: px / %;
box-shadow: 水平位置, 垂直位置, 模糊度, 阴影大小, 阴影扩展大, 颜色, inset(内阴影);
svg 图片优化
<SVG width="100%" height="100%" version="1.1">
<rect x="10" y="10" width="100" height="100"></rect>
</SVG>
<!-- 矩形 --> <!-- 圆形 --> <!-- 椭圆形 -->
<rect></rect> <circle></circle> <ellipse></ellipse>
x： 水平位置 cx： 圆心水平位置 cx： 水平位置
y： 垂直位置 cy： 圆心垂直位置 cy： 垂直位置
width： 宽 r： 半径 rx： 宽
height： 高 fill： 填充色 ry： 高
file： 填充色 fill： 填充色
rx： 圆角
ry： 圆角
<!-- 直线 --> <!-- 折线 --> <!-- 多边形 -->
<line></line> <polyline></polyline> <polygon></polygon>
x1, y1： 起点 points： 折点的位置 points： 折点的位置
x2, y2： 终点 stroke： 颜色 stroke： 颜色
stroke： 颜色(线) stroke-width： 线的粗细 stroke-width： 线的粗细
stroke-width： 线的粗细 fill： 填充色 fill： 填充色
多媒体标签
<!-- 音频 -->
<audio src="./file/audio.mp3" controls loop muted></audio>
<!-- 视频 -->
<video src="./file/video.mp4" controls loop muted width="600"></video>
<!-- 定义媒体资源 -->
<audio controls>
<source src="./file/audio.mp3" type="audio/mp3">
该浏览器版本不支持本格式音频
</audio>
<video controls width="600">
<source src="./file/video.mp4" type="video/mp4">
该浏览器版本不支持本格式视频
</video>
css 选择器
基本选择器
*{ } /* 通配符选择器 */
div{ } /* 标签选择器 */
.box{ } /* 类选择器 */
#app{ } /* id选择器 */
复合选择器
.box>a{ } /* 子代选择器 (直接子元素) */
.box p{ } /* 后代选择器 (所有子元素) */
群组选择器
.box,#app,div{ }
交集选择器
div.box{ } /* 所有类名为 box 的 div 标签 */
属性选择器
[name]{ } /* 带有name属性的 */
[name="val"]{ } /* name属性值为 "val" 的 */
[name~="val"]{ } /* name属性值是这个单词的 */
[name^="val"]{ } /* name属性的值以 "val" 开始的 */
[name$="val"]{ } /* name属性的值以 "val" 结束的 */
[name*="val"]{ } /* name属性的值含有 "val" 的 */
结构伪类选择器
:first-child{ } /* 所有子元素的第一个 (包含子元素的子元素) */
:last-child{ } /* 所有子元素的最后一个 */
:nth-child(n){ } /* 所有子元素的第 n 个 */
:nth-last-child(n){ } /* 所有子元素的倒数第 n 个 */
:first-of-type{ } /* 所有相同类型子元素的第一个 */
:last-of-type{ } /* 所有相同类型子元素的最后一个 */
:nth-of-type(n){ } /* 所有相同类型子元素的第 n 个 */
:nth-last-of-type(n){ } /* 所有相同类型子元素的倒数第 n 个 */
<div>
<h4>name1</h4>
<p>name2</p>
<p>name3</p>
</div>
p:first-child{} <!-- 匹配的是name2 -->
:first-child{} <!-- 匹配的是namg1 -->
状态伪类选择器
::checked{ } /* 选中状态的元素 */
::enabled{ } /* 可用状态的元素 */
::disabled{ } /* 禁用状态的元素 */
::selection{ } /* 选中的文字 */
::first-letter{ } /* 文本首字 */
::first-line{ } /* 文本首行 */
::not(.box){ } /* 类名不是 box 的所有元素 */
伪元素
button:active{ } /* 按下 */
button:focus{ } /* 获取焦点 */
button:focus:not(:focus-visible){ }
用户界面
resize: 用户手动调整尺寸(textarea) (除表单元素外，要和overflow一起使用)
none 不调整
both 调整
horizontal 调整宽
vertical 调整高
box-sizing: 盒模型
border-box 怪异盒模型
content-box 标准盒模型
flex 弹性布局
当宽/高度不确定，使用flex撑满时，
overflow失效，给元素添加width:0; / height:0;
display: flex/inline-flex;
容器：
flex-direction: /* 项目排列方式 */
row /* 左->右 */
row-reverse /* 右->左 */
column /* 上->下 */
column-reverse /* 下->上 */
justify-content: /* 主轴：容器里的项目对齐方式 */
flex-start /* 开始方向对齐 */
flex-end /* 结束方向对齐 */
center /* 居中对齐 */
space-between /* 两端对齐 */
space-around /* 边距是间距的一半 */
space-evenly /* 边距 间距均分 */
align-items: /* 交叉轴：容器里的项目对齐方式 */
flex-start /* 开始方向对齐 */
flex-end /* 结束方向对齐 */
center /* 居中对齐 */
baseline /* 基线对齐 */
stretch /* 默认，拉伸，占满高度 */
flex-wrap: /* 换行 */
nowrap /* 默认，不换行，占满时自动压缩 */
wrap /* 换行 */
wrap-reverse /* 向上换行 */
项目：
align-self: /* 项目对齐方式 */
flex-start /* 开始方向对齐 */
flex-end /* 结束方向对齐 */
center /* 居中对齐 */
baseline /* 基线对齐 */
stretch /* 默认，拉伸，占满高度 */
order: 1; /* 排序：默认为0，小->大 */
flex-grow: 1; /* 放大 */
flex-shrink: 1; /* 缩小 */
grid 网格布局
display: grid;
容器
grid-template-columns: 10px 10px 10px; /* 在网格中添加三列，每列宽度均是10px */
grid-template-rows: 50px 50px; /* 在网格中添加两行，每行均是50px */
grid-column-gap: 20px; /* 每列间距均是20px */
grid-row-gap: 5px; /* 每行间距均是5px */
grid-gap: 10px 20px; /* 行列间距简写，value1：行间距， value2：列间距 */
justify-items: center; /* 容器中所有项目 水平方向 对齐方式 */
start;
center;
end;
align-items: end; /* 容器中所有项目 垂直方向 对齐方式 */
start;
center;
end;
项
grid-column: 1 / 3; /* 网格的项在 列上 开始和结束位置，（从1开始，到3结束） */
grid-row: 2 / 4; /* 网格的项在 行上 开始和结束位置，（从2开始，到4结束） */
justify-self: center; /* 水平方向 上的对齐方式，失去宽度 */
start;
center;
end;
align-self: center; /* 垂直方向 上的对齐方式，失去宽度 */
start;
center;
end;
LESS 预处理器
1. 导入
@import "./style.css"
2. 变量
@bg: red;
.box{
background: @bg;
}
3. 混入
.boxSize(@w, @h:100px){
width: @w;
height: @h;
}
.box{
.boxSize(100px, 200px)
}
4. 嵌套
#app{
width: 100px;
height: 100px;
border: 1px solid #333;
.btn{
width: 120px;
height: 80px;
background: #ff9900;
color: #ffffff;
border: none;
}
}
5. 继承
&:extend(.box)
6. 运算
.box{
width: 200px/2;
height: 100px+20;
}
css属性计算
width: calc(100% - 10px);
移动端
1. viewport
<meta name="viewport" content="initial-scale=1.0">
content:
width="100 / width-device" <!-- 宽度 -->
initial-scale=1.0 <!-- 页面初始缩放值 -->
minimum-scale=1.0 <!-- 允许用户缩放的最小值 (1.0不允许缩放) -->
maximum-scale=1.0 <!-- 允许用户缩放的最大值 (1.0不允许缩放) -->
user-scalable=no / yes <!-- 允许用户缩放 -->
2. 移动端布局
-
固定布局：跟pc端一样
-
流式布局：使用 % 单位
-
响应式布局：使用媒体查询
.box{ width: 200px; height: 200px; } /* 当文档宽度小于1170px时 */ @media screen and (width:1170px) { .box{ width: 100px; height: 100px; } } -
rem 布局
<strle> .box{ width: 1.5rem; height: 2rem; } </strle> <!-- 单位转换 --> <script> var deviceWidth = document.documentElement.clientWidth; if (deviceWidth>720) { deviceWidth = 720 } var fs = (deviceWidth*100)/720; document.documentElement.style.fontSize = fs+"px"; </script>
文本溢出隐藏
1. 单行文本溢出隐藏
p{
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
2. 多行文本溢出隐藏
方法一
p{
width: 100px; /* 宽 */
overflow: hidden; /* 内容溢出隐藏 */
text-overflow: ellipsis; /* 文本溢出隐藏 */
display: -webkit-box; /* 设置为弹性盒 */
-webkit-line-clamp: 3; /* 指定行数 */
-webkit-box-orient: vertical; /* 垂直排列 */
}
方法二
p{
position: relative;
width: 100px;
height: 60px;
line-height: 20px;
overflow: hidden;
}
p::after{
position: absolute;
right: 0;
bottom: 0;
display: block;
content: "...";
padding-left: 20px;
background-image: linear-gradient(left, transparent, red 60%);
}
响应式布局
使用媒体查询
/* 小于等于 712px 的时候 */
@media screen and (max-width:712px) { }
/* 大于 1200px 的时候 */
@media screen and (min-width:1200px) { }
Bootstrap
情境文本颜色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
情境背景色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
关闭按钮
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
三角符号
<span class="caret"></span>
快速浮动
<div class="pull-left">...</div>
<div class="pull-right">...</div>
让内容块居中
<div class="center-block">...</div>
清除浮动
<div class="clearfix">...</div>
显示 隐藏内容
<div class="show">...</div>
<div class="hidden">...</div>
屏幕阅读器和键盘导航
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
将元素的文本内容替换为一张背景图
<h1 class="text-hide">Custom heading</h1>
·
样式
1. 按钮样式
width: 130px;
height: 36px;
line-height: 36px;
background: #4935fe;
border: none;
font-size: 16px;
color: #ffffff;
border-radius: 18px;
box-shadow: 0px 17px 29px 0px rgba(40,93,225,0.22);
padding: 0;
outline: 0;
2. 加号
使用为元素时写
content属性，否则宽高不生效
div{
position: relative;
width: 16px;
height: 16px;
box-sizing: border-box;
transform: translateY(2px);
&::after{
content: "";
position: absolute;
left: 0;
top: 7px;
width: 16px;
height: 2px;
background-color: #FFC53B;
}
&::before{
content: "";
position: absolute;
left: 7px;
top: 0;
width: 2px;
height: 16px;
background-color: #FFC53B;
}
}
父元素高度不确定时
1. 子元素自动占满父元素的高度
使用定位
2. 文本内容自动垂直居中
align-items: center;
display: -webkit-flex;
justify-content:center;
display: -webkit-flex;
chrome打开翻译后数据更新但不渲染
<meta name="google" content="notranslate" />
默认禁用google翻译
自定义滚动条样式
/* 滚动条整体 */
::-webkit-scrollbar{
background: transparent;
}
/* 滚动条轨道 */
::-webkit-scrollbar-track{
background: #006affa0;
}
/* 滚动条滚动滑块 */
::-webkit-scrollbar-thumb {
background: #0099ff;
border-radius: 10px;
}
/* 滚动条上下箭头 */
::-webkit-scrollbar-button{
position: relative;
background: #006aff;
border-radius: 50%;
}
/* 滚动条 上箭头 */
::-webkit-scrollbar-button:decrement{
background: red;
}
/* 滚动条 下箭头 */
::-webkit-scrollbar-button:increment{
background: yellow;
}
/* 水平滚动条（默认垂直） */
::-webkit-scrollbar:horizontal{}
拖动
const state = {
top: 100,
left: 100,
pageX: 100,
pageY: 100,
}
function mousemove(ev){
// 内容区 = 当前位置 + 移动距离(当前鼠标位置 - 上一次鼠标位置)
state.left = state.left + (ev.pageX - state.pageX);
state.top = state.top + (ev.pageY - state.pageY);
// 每次移动后记录鼠标位置
state.pageX = ev.pageX;
state.pageY = ev.pageY;
if(state.left <= 0){
state.left = 0;
}
if(state.top <= 0){
state.top = 0;
}
}
303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
