css小知识
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css小知识，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8100字，纯文字阅读大概需要12分钟。
内容图文
CSS3盒子模型：
{box-sizing：border-box}
加上这句话，盒子的宽度不需要再考虑border还有padding，你给盒子定下多少尺寸就是多大尺寸
传统盒子模型：width+border+padding
2D转换（transform）：
2D指的是二维坐标系在这里插入代码片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U7jHhoaM-1617332678345)(D:\项目笔记\css\css3\1.PNG)]
（1）移动：translate
m----------沿着x轴移动的距离
n----------沿着y轴移动的距离
语法：
translate(m,n)
div {
width: 200px;
height: 200px;
background-color: pink;
transform: translate(100px,100px);
}
（2）旋转：rotate
语法：
rotate（度数）
rotate里面跟度数，单位是deg，比如想要旋转45度，就写成45deg
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点
transform-origin：设置元素的中心点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-avjIIUzP-1617332678350)(D:\项目笔记\css\css3\捕获.PNG)]
注意后面的参数用x和y用空格隔开
x,y默认转换的中心点是元素的中心点（50%，50%）【意思是中心点在分别处于高和宽50%的位置上】
还可以给xy设置像素或者方位名词（top bottom left right center）
（3）缩放：scale
只要给元素添加上这个属性就能控制它放大或者缩小
语法
transform：scale(x,y)
注意其中的x和y用逗号分隔
transform：scale(1,1) 宽和高都放大一倍，相当于没有放大
transform：scale(2,2) 宽和高都放大二倍
transform：scale(2) 只写一个参数，第二个参数和第一个参数一样，相当于transform：scale(2,2)
transform：scale(0.5，0.5) 缩小
可以设置转换中心点缩放，默认以中心点缩放，而不影响其他盒子
3D转换：
主要知识点：
（1）3D位移：translate3d（x，y，z）
transform：translateX（100px）：仅仅是在x轴上移动
transform：translateY（100px）：仅仅是在Y轴上移动
transform：translateZ（100px）：仅仅是在Z轴上移动（注意：translateZ一般用px单位），z值是靠近我们眼睛的距离，z越大，物体越大
transform：translate3d（x，y，z）：其中x，y，z分别指要移动的轴的方向的距离
（2）透视perspective
在2D平面产生近大远小视觉立体，但是效果只是二维的，透视的单位是像素
（3）3D旋转：
transform:rotateX(45deg):沿着X轴方向旋转45度
transform:rotateY(45deg):沿着Y轴方向旋转45度
transform:rotateZ(45deg):沿着Z轴方向旋转45度
transform:rotate3d(x,y,z,deg):deg为角度
（4）3D呈现transform-style
控制子元素是否开启三维立体环境
transform-style:flat子元素不开启3D立体空间，默认的
transform-style:preserve-3d，子元素开启3D立体空间
代码写给父盒子，但影响的是子盒子
这个属性很重要，后面必用
动画：
使用keyframes定义动画（类似定义类选择器）
@keyframes 动画名称 {
0% {
width：100px；
}
100% {
width：200px；
}
}
（1）0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
（2）在@keyframes中规定某项css样式，就能创建由当前样式逐渐改为新样式的动画效果
（3）动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数
（4）请用百分比来规定变化发生的时间，或用关键词from和to，等同于0%和100%
演示代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes move {
/* 开始状态 */
0% {
transform: translate(0px);
}
/* 结束状态 */
100% {
transform: translate(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
多个状态的变化：
@keyframes move {
/* 开始状态 */
0% {
transform: translate(0px,0px);
}
/* 结束状态 */
25% {
transform: translate(1000px,0px);
}
50% {
transform: translate(1000px,800px);
}
75% {
transform: translate(0px,800px);
}
100% {
transform: translate(0px,0px);
}
}
动画的多种属性：
（1）@keyframes：规定动画
（2）animation-name：规定动画的名称
（3）animation-duration：规定动画完成一个周期所花费的秒或毫秒
（4）animation-timing-function：规定动画的速度曲线，默认是ease
（5）animation-delay：规定动画何时开始，默认是0
（6）animation-iteration-count：规定动画播放的次数，默认是1，还有infinite（无限的意思）
（7）animation-direction：规定动画是否在下一周期逆向播放，默认是normal，alternate逆播放
（8）animation-play-state：规定动画是否正在运行或暂停，默认是running还有pause
（9）animation-fill-mode：规定动画结束后状态，保持forwards，回到起始backwards
三角形如何生成：
思路：定义一个盒子，盒子的高度和宽度都是0，给盒子加边框，都是透明的，最后想让它在那个方向出现，就改变哪个方向的颜色
<style>
.box1 {
width: 0;
height: 0;
border-top: 10px solid pink;
border-bottom: 10px solid red;
border-left: 10px solid green;
border-right: 10px solid blue;
}
.box2 {
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
固定盒子挡住页面怎么办：
（1）给页面整体加一个内边距
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-holXVkIT-1617332897645)(D:\微信小程序笔记\81d4715e1869c749db36b01d5d7da56.png)]
（2）添加占位符
这里的组件是自带了插槽，所以再添加一个插槽就可以了
<van-tabs v-model="active" class="vantabs" sticky>
<van-tab v-for="(channel, index) in channels" :title="channel.name" :key="index">
<article-list :channel="channel" />
</van-tab>
<div slot="nav-right" class="channel_btn_right"></div>
<div slot="nav-right" class="channel_btn" @click="show=true">
<van-icon name="wap-nav" />
</div>
</van-tabs>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yb92nkun-1617332897647)(D:\项目笔记\css\880ed1e07afe35ef37c0b60a7058612.png)]
但是这个组件的空间都已经被分完了，再添加一个插槽就没有位置了，此时该如何解决：
使用flex-shrink: 0;就是告诉父元素我不占你的空间，不分你的份数
.channel_btn_right {
width: 30px;
flex-shrink: 0;
}
禁用长按页面时弹出菜单：
-webkit-touch-callout：none`
点击高亮清楚，设置为transparent完成透明：
-webkit-tap-highlight-color：transparent
设置图片或者表单（行内块元素）和文字居中对齐vertical-align：
块级元素是没有这个属性的
属性名：vertical-align
属性值：
baseline----------元素放在父元素的基线上
top----------把元素的顶端与行中最高元素的顶端对齐
middle----------把此元素放置在父元素的中部
bottom----------把元素的顶端与行中最低的元素的顶端对齐
<style>
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="box1">
<img src="https://i03piccdn.sogoucdn.com/d592b731fba4bb5b">
<span>123</span>
</div>
</body>
伪类选择器hover的作用：
用于选择鼠标指针浮动在上面的元素，比如这个元素本来是红色，那么鼠标指针悬停在那个内容上面，可以事先通过设定：hover更改背景色
举例代码：
div {
width: 200px;
height: 200px;
background-color: pink;
}
div:hover {
transform: rotate(180deg);
background-color: red;
}
溢出的文字省略号显示：
（1）单行文本溢出省略号显示，必须满足三个条件
1.先强制一行内显示文本
white-space：nowrap；
2.超出的部分隐藏
overflow：hidden；
3.文字用省略号替代超出的部分
text-overflow：ellipsis；
综合代码：
<style>
.box1 {
width: 100px;
height: 50px;
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="box1">
1234567890vfdgeehehhererheherhrree
</div>
</body>
（2）多行显示
width: 150px;
height: 80px;
margin: 100px auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
文本域防止拖曳：
属性名：textarea
属性值：resize
鼠标样式：
属性名cursor
属性值：
default----------小白
pointer----------小手
move----------移动
text----------文本
not-allowed----------禁止
<style>
.box1 {
cursor: default;
}
</style>
</head>
<body>
<li class="box1">12345678910</li>
</body>
</html>
css重置：
浏览器对html标签有着自己的默认样式，不同的浏览器有着不同的默认样式，为了解决这些差别，所以需要引入css重置文件
如何使用（举例）：
（1）在github搜索框中输入reset
（2）找到jgthms/minireset.css
（3）点开minireset.css，将其中的代码全选复制
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: normal;
}
ul {
list-style: none;
}
button,
input,
select {
margin: 0;
}
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
img,
video {
height: auto;
max-width: 100%;
}
iframe {
border: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td,
th {
padding: 0;
}
（4）在public—css—reset.css创建文件夹和文件，将上述代码粘贴进去
（5）在react项目中的index.html中进行引入
<!-- 这种相对路径的写法虽然简单，但是后边容易出问题 -->
<link rel="stylesheet" href="./css/reset.css">
内容总结
以上是互联网集市为您收集整理的css小知识全部内容，希望文章能够帮你解决css小知识所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】