前端学习和开发的一些总结

 

1.前端页面无疑是从设计稿来的，设计稿的样子如何用html和css呈现在电脑上，第一步就是分块。

2.如果自己一点一滴去调前端样式，那无疑是很累而且费时的事，因此许多前端CSS框架诞生了，例如bootstrap，总的来说他的使用包括了css和js两个类似于插件的东西，先去讨论css框架部分。

3.bootstrap规定了许多特殊的类名，以便实现特殊的效果需求，这些具体的在bootstrap的官网里的css部分都有描述，还是老道理，没必要去每个学习，去演示，不过每一次去看文档都会有新的知识get。

4.使用css框架还有一个很重要的原因--自适应，如果自己通过媒体查询去实现页面的自适应的话无疑是一个庞大的工程。

5.html和css的学习之路也就是根据需求多调整，不会的就百度，因为你解决不了的排版和样式问题90%网上都有人出现过，这种东西并没有会不会，就是知不知道的问题。

6.尽量从一开始就养成良好的代码规范。

7.设置右下外边距会改变其他元素的位置,设置左上边距会改变自身的位置。

 

几个CSS经典问题：

1.垂直外边距的重叠

在网页中,垂直方向的相邻外边距,会发生外边距重叠(取最大值而不是取和)

2.垂直居中：

https://juejin.im/post/5a5ca65a6fb9a01ca3254537#heading-6

（1）绝对定位+负外边距或者translate

注意点一：父元素要开启相对定位（绝对定位的参照物是离他最近的第一个开启定位的父元素）

css代码：

.box2{
position: absolute;
top: 50%;
transform: translate(0, -50%); //第一个参数为left，第二个为top
}

总结：用这个比用负外边距好，因为用负外边距还得知道元素的高度，然后负一半的高度。

（2）绝对定位+margin：auto （注意top和bottom相等即可）

.box2{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}//这只是垂直居中，如果还想水平居中的话，left:0 right:0

 

（3）父元素设置内边距

padding:100px 0;

注意点：此时父元素不能设置高度，是被撑起来的。

（4）使用flex布局(单独写一篇)

（5）单行文本的垂直居中：line-height=height

3.定位：

(1)默认行为是静态定位

（2）float和绝对定位才会脱离文档流

（3）fixed不会随滚动条滚动

　　不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置 **当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。

（4）绝对定位：

　　绝对定位与相对定位的一大不同之处就是，当我们把一个元素设置成绝对定位，那么这个元素将会脱离文档流，其他元素就会认为这个元素不存在于文档流中而填充它原来的位置。绝对定位元素根据它的参照物移动自己的位置，而参照物是离他最近的第一个开启定位的父元素（只要不是static都行）

4.高度塌陷问题（单独总结）

5.BFC问题（单独总结）

 

转载于:https://www.cnblogs.com/CszShuzi/p/9574089.html