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
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
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" 属性，
呈现的内容就可以被改变的元素称为替换元素
什么是可置换元素？（能够设置宽高的原因）
他们属于行内元素img|input|select|textarea|button|label被称为可置换元素跟替换元素一样，
他们的性质同设置了display:inline-block
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" />
77
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
