前端知识点梳理（一）

一、HTML

1. meta标签

记住2个属性：name和http-equiv

• name：描述网页

<meta name="参数" content="具体的描述">

1. http-equiv：文件头
   HTML中的meta标签及其使用方法
   

二、CSS

1. css实现水平居中的几种方式

css实现水平居中的几种方式
一、 行内

1. text-align：center;

二、已知宽高块级元素（三的特例）

1. margin-左+右:auto;
2. 子绝父相，left50%,margin左（宽度/2）
3. 子绝父相，top四相0，margin:auto;

三、未知宽高块级元素

1. display:table或者用<table>; + margin:auto;
2. 转为行内/行内块 + text-align：center;
3. 父元素：display:flex;flex-direction；+子元素：align-self:center;/或者margin:auto;
4. 父元素转行内/行内块或者浮动，父相；left:50%;+子元素相对，right:50%;
5. 子绝父相，left:50%;transform:translateX(50%);

top、left、right、bottom设置为0，用于实现居中，填满父容器
未知宽高：是不知道宽高而不是没有。实例
css3：父元素display：flex；子元素：margin：auto；好用，有兼容问题
flex布局，兼容写法

带有box放后写：

.box{
    display: -webkit-flex;  /* 新版本语法: Chrome 21+ */
    display: flex;          /* 新版本语法: Opera 12.1, Firefox 22+ */
    display: -webkit-box;   /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;      /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;   /* 混合版本语法: IE 10 */   
 
 }
 
.flex1 {            
    -webkit-flex: 1;        /* Chrome */  
    -ms-flex: 1             /* IE 10 */  
    flex: 1;                /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-flex: 1     /* OLD - iOS 6-, Safari 3.1-6 */  
    -moz-box-flex: 1;       /* OLD - Firefox 19- */       
 }

2. css伪类

css伪类（:before和:after）
在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素

*1. 自适应两栏布局的4种方式

先决条件：

* {
    margin: 0;
    padding: 0;
}
html,
body {
    height: 100%;
}
.left {
    height: 100%;
}
.right {
    height: 100%;
}

一类：左浮动，右三变体

1. 左：宽固定100px，float: left;
2. 右：
   ①margin-left：左宽100px
   ②右浮动float: right计算右宽width：calc(100% - 100px); 注意：运算符号左右必须有空格
   ③右边创建BFC

二类：左定位，右三变体

• 左：<