web前端初学者总结

#web前端初学
重要知识点总结：
**1、块元素特性：**独占一行，默认竖着排列

2、内嵌元素特性：宽度为内容的宽度，横着排列，不独占一行

3、浮动
子元素浮动，父元素塌陷，就必须解决父元素的塌陷。解决方法：
1）给塌陷的父容器的最后添加一个没有意义的子容器，然后给该容器清除塌陷，一般清除所有。
2）给塌陷的父元素设置overflow:hidden;(溢出隐藏)。
3）给塌陷的父元素清除浮动（常用的方法）
.clear::after {
content: “”;//content内容为空
display: block;//将这个内容content转化成块元素
clear: both;//清除浮动
}

什么时候需要浮动呢？当想把块元素横着排列的时候，就应该给块元素设置浮动

4、margin计算规则
1）上下兄弟元素之间margin去最大值
2）左右兄弟元素之间margin相加

**5、在父元素位浮动的情况下，子元素设置margin-top/margin-bottom会将父元素拉下来（margin-top/margin-bottom会作用于父元素），**解决办法：
1）给父元素加边框border
2)给父元素设置overflow
3）不设置子元素的上下外边距，设父元素的上下内边距

6、百分比问题
width和padding/margin/position/border的百分比单位都相对于父元素的宽度的百分数。如果有定位的话，需要关注相对于谁定位，百分比就相对于谁。

7、box-sizing
box-sizing将改变width属性的计算方式，传统的width的属性是内容宽度，当设置了box-sizing后，width将是border+padding+内容。

8、position
1）绝对定位：相对于有定位属性的祖先元素；如果没有则相对于body,会脱离文档流和文本流
2）相对定位：相对于自己本身，不脱离文档流
3）固定定位：相对于浏览器进行定位，会脱离文档流和文本流
绝对定位和相对定位设置上下左右，会改变width,height的基准点

总结：
在编写页面的时候，拿到一个页面的时候，不能着急直接就开始写代码。首先要做的就是先大致浏览一下需要编写的页面，然后画线框图，先画前面一部分，2个左右就可以了，如果全部画完，再来编写代码，可能在编写的时候就会出现自己当时为什么要这样画的问题，画好线框图，在写页面的时候给了我们很大的方便。
线框图画完之后，编写该部分的代码。先将画的线框图用盒子搭建出来，再将内容填写上，这部分完成后先不要着急写css设计样式，先将盒子的border写出来，这样会很方便我们看到页面的布局及变化（这部分代码编写完后删除即可），然后通过浮动（一定要记得清除父元素的塌陷）或定位（一定要注意是相对于谁定位）将盒子调整到大致的位置上，最后再开始写样式，调整细微的变化，这样一个模块的内容就差不多完成了。
在编写整个代码的过程中，思路要清晰，并且一定要耐心细心，不能急躁。当发现有问题的时候，一定要学会利用“检查”，审查元素，学会独立解决问题。
作为初学者，大部分问题可能都是出现在子元素浮动，父元素未清除塌陷，宽度计算错误导致的一系列问题。当遇到难点时，要学会自己解决问题，例如通过百度进行搜索，然后需要不断尝试网上给出的办法，直到解决问题，在给个过程中一定要细心耐心。
最后，学习的过程中，需要不断的保持学习，不断的去尝试，即使错了也没关系，因为这个过程也是不断学习总结的过程，这也将成为自己的宝贵的经验。只有不断的学习，才不会被这个行业所淘汰。