前端基础特性和技巧

1、原则：

1）能用语义都使用语义，先写内容再写样式，对于本身就有样式的，应该先去掉默认样式。

2）盒子模型：宽／高=width／height+padding宽／padding高+border宽／border高

3）去除样式可以写个reset.css或者base.css把一下常用的默认格式一次性删除了

4）写html的顺序，从外到里，从上到下，从左到右

2、特性和技巧：

1）、margin默认左右不合并，上下合并，元素浮动可以去除这种特性

2）、margintop塌陷问题，解决1设置board，或者设置overflow：hidden；或者使用伪元素选择器设置.clearfix:before{content:””;display:”table”}

3）、子元素撑不开父元素：父元素是div，一般不舍固定高度，而是由子元素的高度撑开。但是当子元素脱离文档流之后，就撑不开父元素了，这是一个html的bug，解决方式是1设置固定的height。或者设置overflow为hidden，或者<div class=“last">.last{clear:both}。再或者(推荐方法).clearfix:after(content:””;display:”table”;clear:both; zoom:1),其中zoom是为了兼容ie浏览器低版本的渲染问题。

3）、div中默认字母和数子不会换行，

4）、内联元素连成一排时有间隙，可以在父类中把font-size设为0，子类自己重新设置font-size就可以解决。或者设置成浮动也可以解决间隙问题

5）、内联元素多宽高间距等等的问题，都可以用转变成内联块元素来解决

6）、关于属性继承问题，文本属性基本都能被子元素继承

7）、文字绕图特性，当一个div上飘着一个图片的时候，div会被图片覆盖，而文字不会，形成文字绕图。

8）、自元素是内联元素，可以在父元素中用text-align来设置左右居中

9）、左右居中用margin：0 auto。意思是左右auto

10）、文本上下居中用line-height = 文字+上下距离。或者用margin自己算距上下的距离

11）、元素居中，margin：50% - 元素本身宽／高的50%（任何情况）

12）、一次性设置文字相关的属性：font:bold italic 15px/23px “Microsoft Yahei”

3、Visual studio Code快捷键

!+tab,ul>(li>a)*6

tab = 缩进，shift+table = 反缩进；

alt+shirt+f = 格式化代码

alt+shirt+a = 注释

alt+shirt+command+上下键 = 多光标编辑

alt+鼠标 = 多光标编辑

alt+上下键 = 上下移动代码

command+方向键 = 最边上

command+shirt+方向键 = 选中从当前位置到最边上的距离

4、特殊标签和属性

1）、ol：start，list-style:none = 去掉默认前面的小黑点和数字

2）、input和label关联，使label的for属性等于input的id属性的值

3）、不常用的文本标签，有语义em,i,strong,b。去除它们特性使用normal，不是none。

4）、不常用的文本属性：text-indent:10px; = 缩进，text-align:center;/left/right = 文字水平对齐，text-decoration:none; = 去掉下划线，word-wrap:break-word; = 纯英文或数字，正常换行，word-break:break-all; = 让单词不单独占一行，font-style:italic; = 斜体, font-width:bold; = 粗体

5）、textarea：resize:none = 去掉自由拖拽改变size，cols：“30” = 列数，rows：“10” = 行数

5、特殊属性和值

1）、display:inline-block(a常用);/inline;/block;/none(隐藏) = 转换元素的属性

2）、clear:left/right/both = 使浮动的元素不碰到上一个元素，意思是折行。

3）、position:relative/absolute/fixed/static = 定位，定位后可以使用left，right，top，bottom，但是注意不要设置成矛盾的。使用绝对布局时，基于的父元素必须也有position属性。否则就是基于浏览器。固定布局永远都是基于浏览器的。绝对和固定都是脱离文档流的。

4）、z-index:1; 权重，权重越大浮的越高。

5）、border-redadius：10px;圆角，也可以用%来写。比如10%，

6）、outline:none = 去掉外边框高亮

7）、color：#000；／color：#000000；／color：red；／color：rgb(00,217,235); = color的各种设置方法

8）、overflow:hidden/auto/scroll; = 文本溢出的处理方式。

6、伪类和伪元素

:hover{常用的都可以继续使用，指的是鼠标悬停时的状态}

:before{content:””/display:”table”/clear:”both"}

7、概述：

1）、标签选择器，类选择器.，id选择器#，组选择器(用逗号隔开)，伪类选择器(:hover)，伪元素选择器(:before/:after)

2）、input的type属性常用值：text, password, redio, checkbox, file, submit, reset，button。input的name属性是提交时候的key值，value属性是提交的时候的value值，排；placeholder是占位文字。顺便一提：textarea标签是长文本的，注意是标签！

3）、三种列表相关：ul>li(无序列表), ol>li(有序列表), dl>dt>dd(定义列表)

4）、select>option从属关系

5）、label有for，填的是关联的input的id值，

6）、form有action:“http://www.itcast.com” = 提交地址，method：post／get = 数据提交的方式。