学习
把一个vue项目拷贝到另一个地方启动不了的解决办法
把一个vue项目文件拷贝到另一个地方，然后 npm run dev 启动不了.造成这样的原因是当你在一台电脑上编译后npm会有cache缓存，到另外一个地方编译这个项目的缓存与原缓存不一致，导致编译报错。
解决办法：
- 删掉node_modules文件夹，
2.然后cnpm install 和npm run dev就可以在这台电脑运行你的项目
vue项目 vant组件css文件没有找到bug处理
之前写过一个vant的项目，近期重新拉下来修改代码，运行时抛出这个问题
重新下载了全部依赖不行，然后重新下载了vant组件库依然不行，
最后通过vant官网介绍，引入cdn线上css文件地址
引入之后文件照常运行；
由于自己百度没有看到更好的方法，故将此方法共享，如果哪位大佬有更好的解决办法，请指教
css
外边距折叠(collapsing margins)
毗邻的两个或多个 margin 会合并成一个margin，叫做外边距折叠。只会发生在垂直方向上，而水平方向上不会发生。规则如下：
- 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠
- 浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
- 创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
- 元素自身的margin-bottom和margin-top相邻时也会折
介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
- 有两种， IE 盒子模型、W3C 盒子模型；
- 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
- 区 别： IE的content部分把 border 和 padding计算了进去;
CSS选择符有哪些？哪些属性可以继承？
- id选择器（ # myid）
- 类选择器（.myclassname）
- 标签选择器（div, h1, p）
- 相邻选择器（h1 + p）
- 子选择器（ul > li）
- 后代选择器（li a）
- 通配符选择器（ * ）
- 属性选择器（a[rel = “external”]）
- 伪类选择器（a:hover, li:nth-child）
- 可继承的样式： font-size font-family color, UL LI DL DD DT
- 不可继承的样式：border padding margin width height
CSS优先级算法如何计算？
- 优先级就近原则，同权重情况下样式定义最近者为准
- 载入样式以最后载入的定位为准
- 优先级为: !important > id > class > tag important 比 内联优先级高
CSS3新增伪类有那些？
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
:after 在元素之前添加内容,也可以用来做清除浮动。
:before 在元素之后添加内容
:enabled
:disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中
如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
- 给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
- 居中一个浮动元素
//确定容器的宽高 宽500 高 300 的层
//设置层的外边距
.div {
width:500px ; height:300px;//高度可以不设
margin: -150px 0 0 -250px;
position:relative; //相对定位
background-color:pink; //方便看效果
left:50%;
top:50%;
}
- 让绝对定位的div居中
position: absolute;
width: 1200px;
background: none;
margin: 0 auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
display有哪些值？说明他们的作用
- block 象块类型元素一样显示。
- none 缺省值。象行内元素类型一样显示。
- inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
- list-item 象块类型元素一样显示，并添加样式列表标记。
- table 此元素会作为块级表格来显示
- inherit 规定应该从父元素继承 display 属性的值
position的值relative和absolute定位原点是？
- absolute
- 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
- fixed （老IE不支持）
- 生成绝对定位的元素，相对于浏览器窗口进行定位。
- relative
- 生成相对定位的元素，相对于其正常位置进行定位。
- static
- 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right - z-index 声明）。
- inherit
- 规定从父元素继承 position 属性的值
CSS3有哪些新特性？
- 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
- 圆角 （border-radius:8px）
- 多列布局 （multi-column layout）
- 阴影和反射 （Shadow\Reflect）
- 文字特效 （text-shadow、）
- 文字渲染 （Text-decoration）
- 线性渐变 （gradient）
- 旋转 （transform）
- 增加了旋转,缩放,定位,倾斜,动画，多背景
- transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:
用纯CSS创建一个三角形的原理是什么？
把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: transparent transparent red transparent;
}
一个满屏 品 字布局 如何设计?
- 简单的方式：
- 上面的div宽100%，
- 下面的两个div分别宽50%，
- 然后用float或者inline使其不换行即可
经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
- png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.
- 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一
- IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;
- Firefox下,只能使用getAttribute()获取自定义属性。
- 解决方法:统一通过getAttribute()获取自定义属性
- IE下,even对象有x,y属性,但是没有pageX,pageY属性
- Firefox下,event对象有pageX,pageY属性,但是没有x,y属性
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了
为什么要初始化CSS样式
- 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异
对BFC规范(块级格式化上下文：block formatting context)的理解？
- 一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型
- 不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响
css定义的权重
// 以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下/// 例子是演示各种定义的权重值：
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
// 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
display:inline-block 什么时候会显示间隙？
移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing
浮动和清除浮动
- 浮动的框可以向左或向右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流的块框表现得就像浮动框不存在一样。浮动的块框会漂浮在文档普通流的块框上
介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ - 盒子模型构成：内容(content)、内填充(padding)、 边框(border)、外边距(margin)
- IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型)
- 标准(W3C)盒模型：元素宽度 = width + padding + border + margin
- 怪异(IE)盒模型：元素宽度 = width + margin
- 标准浏览器通过设置 css3 的 box-sizing: border-box 属性，触发“怪异模式”解析计算宽高
扫一扫
3528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
