vue其他之“vue常用方法2”

1.相对路径和绝对路径？
相对路径：
“. ./ 代表当前文件的上一级目录
“./” 代表当前文件所在目录
绝对路径：带有网址的就是绝对路径

2.webstorm常用的快捷键？
ctrl+b搜索类在哪里
按f4可以找到相关的类

3.表格2条线变一格？
border-collapse:collapse;

4.table标签里的summary属性是什么意思？
summary="摘要不显示与浏览器，方便阅读器搜索"

5.title属性的作用？
a.title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示
b.title属性可以提高用户体验

6.alt属性的作用？
a.alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=""
b.alt属性值得长度必须少于100个英文字符
c.alt属性是搜索引擎判断图片与文字是否相关，为了SEO(搜索引擎优化)

7.典型的 HTML5 页面?
最后您可以删除 <head> 标签,HTML5中不再需要它们

8.HTML5的新特性有哪些？
新的语义元素，比如 <header>, <footer>, <article>, and <section>。
新的表单控件，比如数字、日期、时间、日历和滑块。
强大的图像支持（借由 <canvas> 和 <svg>）
强大的多媒体支持（借由 <video> 和 <audio>）
强大的新 API，比如用本地存储取代 cookie。

9.HTML5在老式浏览器中要进行处理？
header, section, footer, aside, nav, main, article, figure {
display: block;
}

10.怎么解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式？
添加 shiv

11.z-index层级生效的条件？
a.必须在定位元素-相对定位和绝对定位（position:relative/absolute/fixed/sticky）
b.不同父元素的子元素之间进行显示时，会根据父级元素的z-index进行渲染
c.父亲设置了z-index
*子级无法放在父级下方(无论子级的z-index为何值)；

12.z-index层级不起效果的问题？
a.元素本身有浮动
b.没加定位
c.用li标签进行浮动，利用padding可使li标签文字居中
d.a标签用

13.最大宽度、和最小宽度生效的条件？
max-width当浏览器窗口小于元素的宽度时，能够进行宽度的自适应（对元素的宽度设置一个最高限制）

14.伪类，鼠标的几种状态生效的条件？
a.为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！
b.为了使定义生效，a:active 必须位于 a:hover 之后！

15.清除浮动的方法？
a.clear:both
b.clear属性只有块级元素才有效的，而：after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响是需要设置display属性值的原因！
.clearfix:after{
   content:"";
   display: block;
   clear:both;
   height:0;
   line-height:0;
visibility: hidden;
}
.clearfix{
zoom:1; /* 为了兼容IE浏览器 */
}
c.父级设置overflow: hidden/auto/scroll
d.为父级设置display:table-cell、table-caption和inline-block中任何一个
e.为父级设置绝对定位
f.为父级设置float: left

16.行内块元素的巧妙运用？
a.可以把块元素设置为行内块元素这样具有行内元素的特性，对div使用display: inline-block;后，可以使用text-align: center进行居中
b.a标签,设置行内块，可以设置宽高
c.做导航布局的时候把li设置为行内元素，可以让li从左往右排列，不需要浮动

17.行内元素的特点？
a.设置宽度width 无效
b.设置高度height 无效，可以通过line-height来设置。
c.设置margin 只有左右margin有效，上下无效。
d.设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的

18.行内元素怎么设置宽高呢？
a.设置display：block
b.display：inline-block时
c.添加float或设置position定位时
d.一些内联元素为替换元素如img input textarea select 等… 他们默认可设置宽高

19.什么是替换元素和非替换元素,什么是可置换元素？
根据 "外在盒子" 是内联还是块级
我们可以把元素分为内联元素和块级元素，
而根据是否具有可替换内容，我们也可以把元素分为替换元素和非替换元素。
这种通过修改某个属性值，例如 <img> 的 "src" 属性，<input> 的 "type" 属性，
呈现的内容就可以被改变的元素称为替换元素

20.块级元素的特点！
a.总是在新一行开始
b.高度，行高以及外边距和内边距都可改变
c.若宽度没有设置，则默认宽度为容器的100%，除非设定一个宽度
d.块级元素可以容纳行内元素和其他块级元素

21.什么是盒子模型？
把所有的网页元素都看成一个盒子，它具有：content，padding，border，margin四个属性，这就是盒子模型.

22.盒子模型的两种形式：标准盒子模型，怪异盒子模型,盒子模型box-sizing属性的了解？
假如宽度为400 padding为50

怪异模式：box-sizing:border-box; 宽度 = （298+padding）+border = 400
标准模式：box-sizing:content-box;宽度 = 400+padding+border = 502

23.盒子模型的两种模式的区别：　
标准模式会被设置的padding撑开
而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。

24.伪元素的使用条件？
a.伪元素只能应用于块级元素

25.属性介绍
outline: 0;去掉表单发光
resize:none去掉留言的底角
placeholder可以在input里面显示
border-top-left-radius: 5px;对上左设置一个圆角
transition-duration 属性可以确定悬停效果的速度
transition: all .5s ease;中的 .5s是0.5秒啊！
vertical-align 属性设置元素的垂直对齐方式对块元素不起作用
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); 有质感的盒子阴影
resize: none;使用 resize 属性可防止对 textareas 调整大小!
padding: 0 12px 20px 12px; （上，右，下，左）
padding: 12px 20px 12px; （上，左右，下）

26.文本溢出变成小点的生效条件？
a.设置text-overflow: ellipsis;
b.设置white-space: nowrap;/*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
c.设置overflow: hidden;/*内容会被修剪，并且其余内容是不可见的。*/

27.background-origin属性？
background-origin:border-box; 背景图像边界框的相对位置
background-origin:content-box; 背景图像的相对位置的内容框
注意如果背景图像background-attachment是"固定"，这个属性没有任何效果。

28.background-attachment设置背景图像是否固定或者随着页面的其余部分滚动？
scroll   背景图片随着页面的滚动而滚动，这是默认的。
fixed   背景图片不会随着页面的滚动而滚动。
local   背景图片会随着元素内容的滚动而滚动。

29.text-justify 属性只在 IE5.5 中有效？
改变字与字之间的间距使得每行对齐：

30.工具提示箭头的使用？鼠标悬停在元素上时如何显示溢出的内容？

31.块元素怎么水平居中？
a.可以通过margin 0 auto;
b.通过定位居中（这个方法有一定风险）
c.使用弹性盒模型居中元素（display:flex; justify-content:center;）
d.使用弹性盒模型居中元素（display:-webkit-box; -webkit-box-pack: center;）
子元素的float、clear和vertical-align属性将失效
e.通过子元素的top值设置为父元素的25%

31.块元素怎么水平垂直居中？
a.方法1-一般对(文字定位)居中
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

b.方法2-一般对盒子进行居中定位（常用）
注意必须要有宽高
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
height: 50%;
width: 50%;
margin: auto;

c.方法3---通过弹性盒子居中(子元素的float、clear和vertical-align属性将失效)
display: -webkit-box;
-webkit-box-align: center; /*子元素居中*/
-webkit-box-pack: center; /*伸缩盒对象的子元素两端对齐*/

d.方法4.---通过子元素的top值设置为父元素的25%，就能实现子元素的居中？
top: 25%;
left: 25%;

32.响应式图像的使用？
a.方法 1.要先设置一个容器max-width: 255px给定一个宽
2.给图片添加max-width: 100%;
b.方法2 直接在img标签上面设置width具体值，再写入max-width: 100%;

33.隐藏元素的几种属性？
a.display
b.visibility: hidden;虽然隐藏了，但是空间存在
c.opacity: 0;
d.overflow: hidden;

34.否定伪类的使用？
很方便的去掉边框，做表格用的多
:not(:last-child)选择器为最后一个元素去除边框
.pagination a:hover:not(.active){}不对.active这个类写入样式

35.伪类的高度塌陷？
当父元素的高没有设置或者设置为auto的时候，如果他的子元素浮动了，那么它的父元素就塌陷了
给行内元素添加伪类after后，使用定位效果后出现，伪类添加的内容不居中，注意看看行内元素不要设置为display: block;！

36.如何清除a标签之间的默认留白间距？
a.多个a标签内容写在一行
b.父元素设置font-size:0;
c.给a标签float浮动
d.给a标签letter-spacing: 0;父级加入letter-spacing: -999px;

37.命名规则
骆驼式命名法在许多新的函数库和Microsoft　Windows这样的环境中使用得相当多。
另一方面，下划线法是c出现后开始流行起来的，在许多旧的程序和UNIX这样的环境中，它的使用非常普遍。

驼峰式命名法：由一个或多个单词连结在一起，而构成的唯一识别字时
大驼峰法：常用于类名，函数名，属性，命名空间譬如：DataBaseUser;
小驼峰法：第一个单词之外，其他单词首字母大写譬如：myStudentCount;

print employeePaychecks()；小驼峰法
print_employee_paychecks()；下划线法命名

js中统一用驼峰法命名，html中统一用中划线命名【自定义事件除外，两个要统一命名】
比如：
print employeePaychecks()；小驼峰法
print-employee-paychecks()；中划线法命名

38.三个集合起来(不是用于html的类的命名)
使用匈牙利命名法(前缀字母用变量类型的缩写int i)
下划线命名法(要求单词与单词之间通过下划线连接即可my_age)
一、变量
1、局部变量
1）定义循环：i,j,z,x,y;
2）单个词时小写,多个词时，使用小驼峰命令;
2、模块变量
1）定义成static，使用匈牙利命名法+大驼峰命名法：s_DataLength;
3、全局变量
1）使用匈牙利命名法+大驼峰命名法（帕斯卡命名法）：g_DataLength;
4、指针变量
1）使用匈牙利命名法+大驼峰命名法：*p_DataLength;
二、函数
1）小驼峰命名法：fGetData(void);
三、宏定义
1）全部大写+下划线命名法

39.前端html中类的命名规范？
命名方法要求采用统一的命名方法。常用命名方法有：
1）连写式命名法，如：helloworld
2）中线命名法，如：hello-world（目前采用此方法的较多，建议采用）
3）下划线命名法，如：hello_world
4）骆驼命名法，如：helloWorld
5）帕斯卡命名法，如：HelloWorld
6）其他方法。

40.样式文件命名规范如：
全局的：global.css；
主要的：master.css；
布局、版面：layout.css；
专栏：columns.css；
文字：font.css；
打印样式：print.css；
主题：themes.css；
补丁：pacth.css；
格式化浏览器：base.css等。
4、ID及Class命名常用名称
页头：header
登录条：login-bar
标志：logo
侧栏：side-bar
广告：banner
导航：nav
子导航：sub-nav
菜单：menu
子菜单：sub-menu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendlink
版权：copyright
外套：wrap
页脚：footer
标题：title
顶导航：top-nav（mini-nav）

41.CSS中什么时候用id什么时候用class？
id与class的最主要不同就在于id不能重复，只能使用一次，一个id只能用于一个标签。而class可以重复使用
例如：导航条，每个页面中，只存在一个顶部导航条的话，可以使用id来定义
例如：商品列表多个li，具有相同的样式，可以使用class来定义

42.display:flex和display:box有什么区别？
同样是弹性盒模型
1.前者是flex2012年的语法，也将是以后的标准语法，大部分浏览器已经实现了无前缀版本。
后者是2009年的语法，已经过时，是需要加上对应前缀的。
2.flex是最新的，但是在实际的浏览器测试中，display: flex 不能完全替代display: -webkit-box

43.img-coll>figure>img{}和.img-coll figure img{}的区别，>是一级往一级的去找，不写>是可以直接在里面找到这个标签

44.固定定位、绝对定位和相对定位padding和margin始终生效

45.适配移动端必写？
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

vue其他之“vue常用方法2”相关推荐

html用vue传递数据,Vue组件及数据传递详解
本文我们就和大家详细介绍一下Vue系列(三):组件及数据传递.路由.单文件组件.vue-cli脚手架,希望能帮助到大家. 一. 组件component 1. 什么是组件?组件(Component)是 ...
Vue：利用Vue生成的网页，在浏览器中的标签页中的图标与标题怎么修改为自己的？
Vue:利用Vue生成的网页,在浏览器中的标签页中的图标与标题怎么修改为自己的? 在解决这个问题的时候,在网上搜到了许多答案,可以说是众说纷纭,作者结合了多个答案,最后解决了这个问题,下面把用到的资源 ...
vue filter对象_学习vue源码（3）手写Vue.directive、Vue.filter、Vue.component方法
一.Vue.directive Vue.directive(id,[definition]); 1)参数 { string } id{ Function | Object } [ definition ...
vue教程2-03 vue计算属性的使用 computed
vue教程2-03 vue计算属性的使用 computed computed:{b:function(){ //默认调用getreturn 值}}--------------------------c ...
go html vue,用Go+Vue.js快速搭建一个Web应用(初级demo)
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开 ...
Vue.js(一) Vue.js + element-ui 扫盲
Vue.js(一) Vue.js + element-ui 扫盲 2018年12月09日 20:32:59 vbirdbest 阅读数 7043更多分类专栏: Vue.js + ElementUI ...
Vue.js 从 Vue 1.x 迁移
从 Vue 1.x 迁移 FAQ 哇,非常长的一页!是否意味着 Vue 2.0 已经完全不同了呢,是否需要从头学起呢,Vue 1.0 的项目是不是没法迁移了? 非常开心地告诉你,并不是!几乎 90% ...
在Centos 7 上跑 vue 项目以及 Vue 热更新失效
安装npm yum install npm 安装vue npm install vue 安装vue-cli sudo npm install --global vue-cli 注意: 因为全局安装,会 ...
vue脚手架搭建配置试调地址和端口号_全栈的自我修养: 002使用@vue/cli进行vue环境搭建 (使用Vue,SpringBoot,Flask完成前后端分离)...
全栈的自我修养: 使用@vue/cli进行vue.js环境搭建 Success, real success, is being willing to do the things that other ...
解决vue: 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称...
我是用yarn安装的vue脚手架(yarn global add @vue/cli),yarn提示安装成功后,运行了下vue --version,结果报错. vue : 无法将"vue&qu ...

vue其他之“vue常用方法2”

vue其他之“vue常用方法2”相关推荐

最新文章

热门文章