做东西遇到的一些基础知识

1.CSS中设置margin:0 auto; 水平居中使用条件：
margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应，其实就是水平居中的意思，
块级元素：给定要居中的块级元素的宽度。

行内元素：①设置display:block；②给定要居中的行内元素的宽度。（行内元素设置成块级元素后可以对其宽高进行设置）

行内块元素：设置display:block。（如input、button、img等元素，自带宽度可以不用设置其宽度）

注：
①可以通过对块级元素设置 text-align：center；的方式来实现内联元素（如文本、图片）居中
②margin:0 auto;可以使盒子居中，text-align:center;可以使此盒子内的内联元素居中，故有时需要两者结合使用才能使得盒子及其中文本一起居中。

2.list-style-position
规定列表中列表项目标记的位置：
inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit 规定应该从父元素继承 list-style-position 属性的值。

eg：
.left_ul li{
list-style-image: url(…/images/icon02.gif);
list-style-position: inside;
}
加上list-style-position: inside;的效果

不加的效果：

3. text-indent
将段落的第一行缩进2em：
text-indent：2em；
这里em是单位，如px（像素）一样HTML长度单位，em叫相对长度单位。
em与px换算
1em等于16px
这里2em=32px，相等于设置CSS 缩进32px。

4.Meta标签用法：

元数据（metadata）是关于数据的信息。

标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

标签始终位于 head 元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

友情学习meta标签链接：
https://www.cnblogs.com/qiumohanyu/p/5431859.html
https://blog.csdn.net/yangxiaoyanger/article/details/79788109

5.导航条的制作
（1）首先看看分成几部分，用几个div
（2）一般都用到浮动，而且每一整个div都需要浮动
（3）一般用到li
（4）用了浮动一般都在最外层的父元素上增加overflow:hidden;
（5）导航条居中：
行高=高；
margin: 0 auto;
height: 80px;
line-height: 80px;
margin: 0 auto;

6.实现图片在div中水平垂直居中
http://www.mamicode.com/info-detail-2370426.html
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute;
意思：简单点说，高宽和可视区域，一般做遮盖层的时候用。如果position是absolute的时候，就和父元素大小一样。另外如果再加上margin：auto；并指定width和height可以达到垂直和水平都居中。

7.闭包
http://www.cnblogs.com/LIUYANZUO/p/5074194.html

8.原型链
https://blog.csdn.net/u010365819/article/details/81326349

9.一个非常好的博客里面有css规范的链接
https://www.cnblogs.com/LIUYANZUO/p/5679753.html

10.立即执行函数
https://www.cnblogs.com/mafeifan/p/5881408.html

11.z-index不起作用的原因：
其实原理也很简单，就是利用了z-index的覆盖问题，在写的过程中我发现无论怎么改变，insert的z-index总是无效的，于是百度了一下z-index无效的情况，一共有三种：
1、父标签 position属性为relative；

2、问题标签无position属性（不包括static）；

3、问题标签含有浮动(float)属性。

这样也很好理解为什么parent设置了position和z-index之后insert的z-index就会失效的问题了，他的解决办法有是三个：

1、position:relative改为position:absolute；

2、浮动元素添加position属性（如relative，absolute等）；

3.去除浮动

12.px,em,rem
rem（font size of the root element）是指相对于根元素的字体大小的单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。二者都是相对单位

rem能等比例适配所有屏幕

上面说过rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

13.margin-right不起作用
浏览器默认从左向右渲染，所以元素是从左向右排列的，margin-right其实有效果的，只是在默认即标准流的情况的下显示不出来效果
解决方案：
1、在CSS里设置：float：right，这时margin-right有用
2、它的右面有其他盒子
3.给父元素加上overflow: hidden;
14.清除浮动主流做法
在父级元素上加以下代码：

 .clearfix：after{
 				content:"";<----内容为“.”就是一个英文的句号而已。也可以不写。
 				clear:both; <----清除左右两边浮动。
 				display:block; <----加入的这个元素转换为块级元素。
 				visibility:hidden;    <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间，只是看不到而已； 
 				}

15.div嵌套引起的margin-top不起作用
嵌套div中margin-top出现转移，在部分浏览器中，两个嵌套的div，如果外层父元素div的padding值为0，那么内层div的margin-top，margin-bottom值都会转移到父元素也就是外层div身上。
解决方法：
给子元素div2加：
float: left/right
给父层div1加：position: absolute;
.
16.伪元素的应用
在某个固定的地方添加相同的元素。

例如：上图的倒三角和图片

17.阿里字体图标iconfont在伪元素里面使用方法
首先我们知道iconfont字体图标代码如


代码分解: 字体图标由 &# 和 x 以及 四个数字\字母 组成;

工作原理: 其中&#表示这是字符实体，x表示这是十六进制，刚好伪元素的content接受的也是十六进制的Unicode编码，

解决办法: 所以 &#xe601 写成 \e601;

.down::after {
content: “\e604”;
}

18.绝对定位与margin
margin,外边距，用于处理元素间的边距。

绝对定位下，元素脱离文档流，同辈子元素间margin不再起限制位置的作用。

同时，起效果的margin值与定位方向有关。

19.css中背景图片不显示的原因
、css没有被调用；请检查css调用是否成功，
2、div设置错误容易导致背景图片高度太大则无法显示，
3、可以查看url路劲是否写对,background-image:url("…/img/background.gif");
4、设置background-size,
5、div盒子没有内容，需要设置width、height，
6、元素一定要是块级元素；
7、打开控制台（按F12键）查看下CSS样式background-image；

20.CSS中nav ul li ul 与 nav>ul>li 这两种写法的区别是什么
nav>ul只选择nav下一级里面的ul元素，例如上面dom结构里id为a的ul。
nav ul选择nav内所包含的所有ul元素，例如上面dom结构里面id为a、b、c的全部ul。

nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

20.web浏览器的兼容问题
首先，为什么会出现浏览器兼容性问题呢？因为不同浏览器使用内核及所支持的HTML（标准通用标记语言下的一个应用）等网页语言标准不同；以及用户客户端的环境不同（如分辨率不同）造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱，错位。不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

使用Trident内核的浏览器：IE、Maxthon、TT； 使用Gecko内核的浏览器：Netcape6及以上版本、FireFox； 使用Presto内核的浏览器：Opera7及以上版本； 使用Webkit内核的浏览器：Safari、Chrome。 而我现在所说的兼容性问题，主要是说IE与几个主流浏览器如firefox，google等。而对IE浏览器来说，IE7又是个跨度，因为之前的版本更新甚慢，bug甚多。从IE8开始，IE浏览器渐渐遵循标准，到IE9后由于大家都一致认为标准很重要，可以说在兼容性上比较好了，但是在中国来说，由于xp的占有率问题，使用IE7以下的用户仍然很多，所以我们不得不考虑低版本浏览器的兼容。

首先大家可以看一下主流浏览器CSS 3和HTML 5兼容清单

http://developer.51cto.com/art/201004/192415_all.htm
https://www.cnblogs.com/aizhuli12/p/7080004.html
https://www.cnblogs.com/gluncle/p/9145037.html