刚刚入门学习前端，自己感觉这些是一些经常要用到元素及属性，细节很重要，有时候可能就是一个标点符号忘写，最后导致没有出效果，找半天还没找出来，细节决定成败。

   下面的是我自己感觉前端基础班所需要额外注意的知识点：

1、标签按钮 button    <button>按钮</button>

2、  *{

        margin:0;

        padding:0;

}

以上代码表示清空所有的默认边距；

3、rgb（）如rgba（0,0,0,0.5）a为透明度       

R红色 g绿色 b蓝色  a透明度小数点前面的0可以不写；

5、text-indent:2em;  首行缩进2个字；text-indent:2em;  首行缩进2个字；

6、文本线条装饰 text-decoration  

text-decoration:none;没有线

text-decoration：underline；下划线

text-decoration:line-through; 中  划线/删除线

text-decoration:overline;   上划线

7、链接的伪类四种状态：

a:link        未访问的链接（访问前）

a:visited    已访问的链接（访问后）

a:hover      鼠标移动到连接上（鼠标经过）

a:active      选定的链接（按下鼠标的时候）

注意：以上的顺序不能颠倒；

8、将元素转化为块级元素：display:block;

将元素转化为行内元素：display:inline;

将元素转化为行内块元素：display:inline-block;

9、图片定位background-position：

background-position:X坐标（水平方向）  Y坐标（垂直方向）；

10、常用的线条样式：solid实线   dashed虚线    dotted点线

11、嵌套垂直外边距合并问题环境

如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；

解决方案：

1、为父级设置上边框（不用）

2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；（不推荐使用）；

3、直接给父级添加overflow:hidden;（常用方法）--- 利用了overflow:hidden;强制区分了父子级关系

12、css3圆角属性属性border-radius    一个值：四个角都是一样的弧度

两个值： border-radius: 左上右下  右上左下;

三个值： border-radius: 左上  右上左下 右下;

四个值： border-radius: 左上 右上 右下 左下;

正圆：如果想要得到正圆我们必须是一个正方形，然后设置border-radius: 50%;

胶囊形状：首先是一个长方形，然后设置border-radius的取值为长方形高度一半；

13、盒子阴影语法：

box-shadow: 水平阴影   垂直阴影   模糊距离   阴影大小   阴影颜色  内/ 外阴影；

文字阴影语法：

text-shadow: 水平阴影   垂直阴影   模糊距离   阴影大小   阴影颜色

14、关于图片插入底部留白

Html中插入图片的时候会出现2-4px的底部留白

解决方案：01、给所有的图片img设置一个vertical-align: middle;让图片的对齐方式为中心基线对齐；

15、清楚浮动的方法；（1）父级加overflow属性法

直接给父级添加overflow:hidden;，强制的撑开父级的高度；

（2）经常使用   After伪元素清除浮动法

/*声明清除浮动的样式*/

.clearfix:after {

        content: "";

        display: block;

        height: 0;

        visibility: hidden;

        clear: both;

  }

.clearfix {

     *zoom: 1;  /*ie6,7 专门清除浮动的样式*/

}

16、简单了解overflow

overflow:hidden; 溢出隐藏，将超出固定宽高的盒子的内容隐藏掉；

overflow:auto;  溢出滚动，将超出固定宽高的盒子的内容以滚动条的像是显示

17、定位属性：position 取值不同实现的效果不同，如下：

静态定位：position:static;

相对定位：position:relative;

绝对定位：position:absolute;

固定定位：position:fixed;

如果盒子的显示模式为块元素，而且有固定的宽度我们可以直接用margin：auto;让盒子水平居中；

如果盒子定位了margin:auto;不会生效，那我们如何让定位的盒子居中显示？

情况1：如果用了相对定位position: relative;盒子还是可以同margin: auto;居中；

情况2：那么如果用了绝对定位position: absolute;和固定定位position: fixed;盒子就不能使用margin:auto；居中显示：

18、定位的叠加书序z-index

• z-index是定位的z轴显示，只能用于相对定位、绝对定位和固定定位，数值越大越靠前，取值没有单位；

取值：0，正整数，负整数，默认值0

19、display显示与隐藏（重点）

• 隐藏：display:none;   === 属于不占位隐藏

• 显示：display:block; 将隐藏的元素显示出来

2、visibility显示与隐藏

• 占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；

20、用户界面-鼠标样式

• 鼠标样式：cursor

• 小白（默认） cursor:default;

• 小手： cursor:pointer;

• 移动： cursor:move;

• 文本： cursor:text;

• 禁止： cursor:not-allowed;

21、用户界面-鼠标样式

• 鼠标样式：cursor

• 小白（默认） cursor:default;

• 小手： cursor:pointer;

• 移动： cursor:move;

• 文本： cursor:text;

• 禁止： cursor:not-allowed;

这些东西还是多去练习去运用才会记得住，硬本领都是敲出来的。

    刚刚入门学习前端，自己感觉这些是一些经常要用到元素及属性，细节很重要，有时候可能就是一个标点符号忘写，最后导致没有出效果，找半天还没找出来，细节决定成败。

   下面的是我自己感觉前端基础班所需要额外注意的知识点：

1、标签按钮 button    <button>按钮</button>

2、  *{

        margin:0;

        padding:0;

}

以上代码表示清空所有的默认边距；

3、rgb（）如rgba（0,0,0,0.5）a为透明度       

R红色 g绿色 b蓝色  a透明度小数点前面的0可以不写；

5、text-indent:2em;  首行缩进2个字；text-indent:2em;  首行缩进2个字；

6、文本线条装饰 text-decoration  

text-decoration:none;没有线

text-decoration：underline；下划线

text-decoration:line-through; 中  划线/删除线

text-decoration:overline;   上划线

7、链接的伪类四种状态：

a:link        未访问的链接（访问前）

a:visited    已访问的链接（访问后）

a:hover      鼠标移动到连接上（鼠标经过）

a:active      选定的链接（按下鼠标的时候）

注意：以上的顺序不能颠倒；

8、将元素转化为块级元素：display:block;

将元素转化为行内元素：display:inline;

将元素转化为行内块元素：display:inline-block;

9、图片定位background-position：

background-position:X坐标（水平方向）  Y坐标（垂直方向）；

10、常用的线条样式：solid实线   dashed虚线    dotted点线

11、嵌套垂直外边距合并问题环境

如果两个盒子有嵌套包含的父子级关系，如果给子级盒子设置了margin-top，效果显示父级盒子也会跟着掉下来；

解决方案：

1、为父级设置上边框（不用）

2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；（不推荐使用）；

3、直接给父级添加overflow:hidden;（常用方法）--- 利用了overflow:hidden;强制区分了父子级关系

12、css3圆角属性属性border-radius    一个值：四个角都是一样的弧度

两个值： border-radius: 左上右下  右上左下;

三个值： border-radius: 左上  右上左下 右下;

四个值： border-radius: 左上 右上 右下 左下;

正圆：如果想要得到正圆我们必须是一个正方形，然后设置border-radius: 50%;

胶囊形状：首先是一个长方形，然后设置border-radius的取值为长方形高度一半；

13、盒子阴影语法：

box-shadow: 水平阴影   垂直阴影   模糊距离   阴影大小   阴影颜色  内/ 外阴影；

文字阴影语法：

text-shadow: 水平阴影   垂直阴影   模糊距离   阴影大小   阴影颜色

14、关于图片插入底部留白

Html中插入图片的时候会出现2-4px的底部留白

解决方案：01、给所有的图片img设置一个vertical-align: middle;让图片的对齐方式为中心基线对齐；

15、清楚浮动的方法；（1）父级加overflow属性法

直接给父级添加overflow:hidden;，强制的撑开父级的高度；

（2）经常使用   After伪元素清除浮动法

/*声明清除浮动的样式*/

.clearfix:after {

        content: "";

        display: block;

        height: 0;

        visibility: hidden;

        clear: both;

  }

.clearfix {

     *zoom: 1;  /*ie6,7 专门清除浮动的样式*/

}

16、简单了解overflow

overflow:hidden; 溢出隐藏，将超出固定宽高的盒子的内容隐藏掉；

overflow:auto;  溢出滚动，将超出固定宽高的盒子的内容以滚动条的像是显示

17、定位属性：position 取值不同实现的效果不同，如下：

静态定位：position:static;

相对定位：position:relative;

绝对定位：position:absolute;

固定定位：position:fixed;

如果盒子的显示模式为块元素，而且有固定的宽度我们可以直接用margin：auto;让盒子水平居中；

如果盒子定位了margin:auto;不会生效，那我们如何让定位的盒子居中显示？

情况1：如果用了相对定位position: relative;盒子还是可以同margin: auto;居中；

情况2：那么如果用了绝对定位position: absolute;和固定定位position: fixed;盒子就不能使用margin:auto；居中显示：

18、定位的叠加书序z-index

• z-index是定位的z轴显示，只能用于相对定位、绝对定位和固定定位，数值越大越靠前，取值没有单位；

取值：0，正整数，负整数，默认值0

19、display显示与隐藏（重点）

• 隐藏：display:none;   === 属于不占位隐藏

• 显示：display:block; 将隐藏的元素显示出来

2、visibility显示与隐藏

• 占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；

20、用户界面-鼠标样式

• 鼠标样式：cursor

• 小白（默认） cursor:default;

• 小手： cursor:pointer;

• 移动： cursor:move;

• 文本： cursor:text;

• 禁止： cursor:not-allowed;

21、用户界面-鼠标样式

• 鼠标样式：cursor

• 小白（默认） cursor:default;

• 小手： cursor:pointer;

• 移动： cursor:move;

• 文本： cursor:text;

• 禁止： cursor:not-allowed;

这些东西还是多去练习去运用才会记得住，硬本领都是敲出来的。