css:
1、div两个盒子移动中间那个盒子导致两个一起移动解决方案:可以为父元素定义上边框，可以为父元素定义上内边距，可给父元素添加overflow:hidden
2、块级元素使其水平居中 margin:0 auto； 行内块和行元素水平居中直接给父元素添加text-algin:center
3、图片超过div盒子解决方案：img{width:100%}
4、圆角边框：border-radius:50% border-top-right-radius 右上角 border-buttom-right-radius:右下角
5、盒子（文字）添加阴影：（text）box-shahow:h-shahow（水平阴影）v-shahow（垂直阴影） blur（模糊距离）spread（阴影的尺寸）box-shadow:10px 10px 10px 10px rgba(0,0,0,.3)
6、所有元素添加浮动元素以后都会有行内块的一些特性，块级元素没有设置宽度和父级元素一样宽，添加浮动元素以后大小是由里面的内容决定的
7、有宽度，margin才会居中
8、.box>div {} 只选择一个div
9、不方便给父级盒子高度便清除高度
10、清除浮动：clear：left right both
11、Cursor:pointer 让鼠标变成小手
12、p标签里面不放H
13、h标签不会继承父级元素的大小，a标签不会继承父级的颜色 div不会继承父级的背景颜色
14、导航栏是通过li+a的做法
15、导航栏里面的文字不一样多，不给宽度，用padding撑开左右边距 给padding一个左右的值（不给元素宽度，添加一个pandding便不会使元素的盒子变大）（a里面的文字，使用padding使其左右有距离）
16、文本框里面的文字距离边框有距离，可以使用padding
17、行内块有空白缝隙·
18、减掉盒子的内外边距使盒子加边距不会变大 新增css3:box-sizing: border-box;就不用减掉
18.内边距:给容器加,控制内部的元素. 外边距:给自己加,控制的是自身于别的元素的距离
19.外边距合并水平方向不会合并只有垂直的时候,解决办法:将其中的一个盒子使用margin-botton/将上面的盒子转换为行内块模式
20.定位分为static静态定位 (了解) relative 相对定位 (相对之前的位置移动,移动以后之前的位置保留) absolute 绝对定位(不占据原来位置) fixed 固定定位:跟随版心移动:
固定定位 left:50% margin-left : 版心的一半 盒子如果要放在左边 那么值就给相反的right值
粘性定位:sticky :保留位置 当拉到可视距离就可以移动 设置top值
z-index数值越大越往上
21.
div::after div::before day6 伪元素
display:none 隐藏 display:block 显示 占有原来的位置 配合js使用
visibility:visible 可视元素 visibility:hidden 隐藏 不再占有原来位置
22.精灵图 往上走和往左走数值是负的(一般情况下)
23.三角形的做法 箭头朝就给下边框, 箭头朝哪边就给相反方向的边框 其余边框为零
24.cirsor:pointer 鼠标变小手 default 默认 move 移动 text 文本 not-allowd 禁止
25.outline:none 去掉表单的轮廓框 文本域防止拖拽: resize:none (文本域尽的标签尽量放在同一排)
26.vertical-align:midden 图片和文垂直居中 只能使用在行内元素或者行内块元素 图片加上div会显示有空白缝隙 加上vertical其中任何一个值都可以去掉
27.单行文本溢出显示省略号的三个条件:white-space:nowrap(强制一行内显示文本) overflow:hidden(超出部分隐藏) text-overflow:ellipsis (文字超出部分使用省略号进行替代) 哪里需要放哪里
多行文本溢出显示省略号
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* 让所有文字都正常自动换行 */ word-break: break-all;
28.margin:-1 可以去掉重合的盒子的边框重复问题但是鼠标经过的效果会导致一边的边框显示不出来 解决方案:1.添加相对定位即可.2若果有相对定位即给父元素添加定位 给当前的元素添加 z-index层级
文字环绕图片
29.等腰三角形的做法
30.清除浮动
元素加浮动,绝对定位以后都可以设置元素的大小
31.不透明度 opacity:0.5 取值在0-1之间 0完全透明 1完全不透明 容器会全部变化 opacity 可以搭配hover搭配过渡效果使用
32.细线边框：border-collapse:collapse
33.在线psPhotopea | Online Photo Editor 精灵图选择 Sprite Cow - Generate CSS for sprite sheets
34.图片模糊:filter:blur(5px) 数值越大 图片越模糊
伪元素是行内元素 必须写connet
padding 给文字 margin给容器
min-width设置最小的缩放距离
35.object-fit:cover 让当前元素自动填充,删减两边内容进行填充
36.transform：translate 移动 不会影响其他盒子
实现盒子垂直居中 配合定位
rotate 旋转 后面跟单位deg
Scale缩放
37.动画
@keyframes 动画时间 {
/* 开始状态 *.
0% (from) {
transfrom:translateX( 0px);
}
100%(to) {
transfrom:translate X(1000px);
}
}
类名 {
/* 里面必须包含 *
/* 调用动画 *
/* 动画名称*
animation-name:动画名称;
-
- /*持续时间*
animation-duration:2s;
}
38.透视
透视写到被观察盒子的父级元素 perspective:像素; 透视越小盒子越大 透视越小越立体 通常距离是800-1200
39.3d旋转 rotade
40.3d呈现 transform-style：preserve-3d写在父级 影响的子元素
web移动端
1.
弹性定位
flex-direction:colum设置主轴Y (默认主轴为row即x轴)
2.flex-warp：warp 让子元素换行
3.align-content：center 多行设置居中 单行没有效果
4.flex-flow：row warp 复合写法
5.order：-1； 默认是0 比0小所以排列在前
display: flex; /* 默认从终点依次对齐 */ justify-content: flex-end; /* 默认从起点依次排列 */ justify-content: start; /* 让内部元素居中排列 */ justify-content: center; /* 空白间距均分在子元素的两侧 视觉效果：起点和终点窄 中间宽 */ justify-content: space-around; /* 元素1在起始位置，最后一个元素在终点位置，剩下的空间均分 */ justify-content: space-between; /* 弹性盒子与容器之间的间距相等 */ justify-content: space-evenly;
移动适配：网页内容（盒子、文本、图片）自适应屏幕尺寸，在不同的移动设备下，让网页达到一个合理的展示
2.字号为14px的大小 行高设置成1.5最好
3.媒体查询 @mediatype screen and (max-width:800px;) {
body {
banckground-color:pink;
}
}
当屏幕最大的宽度不超过800px时 背景颜色为粉色
less
1.定义一个粉色的变量
@color:pink;
引用变量
body {
background-color:@color;
}
2. .box{
width:100px;
height:100px;
background-color:pink;
a {
font-size:14px;
如果有伪类元素、交集选择器、伪元素选择器则在前面加上&
&：：after {
font-size:20px;
}
}
} 定义大盒子以及盒子里面的子元素
3. Less可加减乘除 除需要用./或者（）包起来 中间的加减乘除符号必须和数字用空格隔开否则不生效
.box { margin: 100px auto; background-color: aquamarine; // width: 100px - 50px; height: 200px - 100px; width: (800px / 2px); height: (1000px * 2px); width: 500px - 200px; }
(function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px' } else { document.addEventListener('DOMContentLoaded', setBodyFontSize) } } setBodyFontSize(); // set 1rem = viewWidth / 10 function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px' } setRemUnit() // reset rem unit on page resize window.addEventListener('resize', setRemUnit) window.addEventListener('pageshow', function (e) { if (e.persisted) { setRemUnit() } }) // detect 0.5px supports if (dpr >= 2) { var fakeBody = document.createElement('body') var testElement = document.createElement('div') testElement.style.border = '.5px solid transparent' fakeBody.appendChild(testElement) docEl.appendChild(fakeBody) if (testElement.offsetHeight === 1) { docEl.classList.add('hairlines') } docEl.removeChild(fakeBody) } }(window, document))
保证px-rem的基准值为设计稿的375px一样 加入js文件 实现web适配 自适应变大变小文字和盒子都会改变
vw
// 百分比和vw的区别 // 百分比相对于父级元素的宽度 // 1vw指的是永远对视口的百分之一，和父容器的宽度无关 // vw方案与rem对比 // rem的适配原理较为复杂 // vw适配较简单 // rem需要js引用 // vw不需要引用js 自动获取 // vw相对单位 相对视口（当前设备的屏幕尺寸） // 1vw相对于视口屏幕的百分之一
响应式
<!-- 响应式基本要素 --> <!-- 1.页面随屏幕尺寸变化而变化 2.网址没有变化，代表同一个页面 3.网页内容没有变化，容器结构的样式变化--> <!-- 总结 --> <!-- 网站只有一套代码，根据不同的设备尺寸，不同的特性对页面的内容样式进行相应的调整 --> <!-- 优缺点 --> <!-- 灵活性强,能较为快捷的解决多尺寸屏幕的适配问题 --> <!-- 缺点：工作量大 难以维护 无用代码过多 加载时间长 各个设备兼容 也代表没有一个设备尺寸是完美的 属于折中方案 -->
框架
ps
当文字和图片不在同一层时使用Ctrl+e合并图层再导出
2、透明文件导出要用png
px em rem的区别
P x: 表示固定的像素单位
E m: 相对单位, 相对于当前容器的字体大小而定,常用于首行缩进2个字符等
rem: 相对单位, 相对于当前根标签html的字体大小,1rem = 1html的字体大小
V W: 相对单位, 1vw等于视口宽度的百分之一
V H: 相对单位, 1vh等于视口高度的百分之一
flex
块级元素和行内元素变成弹性盒子后,宽度和高度默认不写时,分别会发生什么变化?
答:
块级元素变成弹性盒子后,宽度由父级百分比变为由内容撑开,高度不设置时,默认拉伸铺满父容器的高度.
行内元素变成弹性盒子后,可直接设置宽高,内容由内容撑开,高度不设置时,默认拉伸铺满父容器的高度.
部分UI库
vant
element
Element - The world's most popular Vue UI framework
uivew
Text 文本 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架
ivew
174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
