css布局中的一些注意事项

最近在用css布局设置一个页面，现在分享在设计过程中遇到一些问题的解决方法：

1、有的时候，只要外层的元素设为display:block，里面嵌套的inline元素可以不用设置display:block，就可以设置高度和宽度例如:

 <div style="display:block">
        <input style="height:50px;width:50px">
</div>
这样就可以了，要是input在设置一个display:block反而达不到设置宽度的目的。

2、有时候，在调试时发现，有部分元素在当窗口缩小到一定大小的时候有跳动，此时一般会和设置的margin和bottom有关。一般当窗口缩小到一定大小的时候，margin和      padding的大小会变化。

3、有的时候代码感觉没错，比如
<form class="form1">
    <input type="text" placeholder="hello" class="input1">
</form>
在页面调试的时候，发现类form一直没有加进来，但是类input1却加进来，这时候可能是<form>元素以上代码的书写不规范，比如多了符号{、}、；等等

4、在引用bootstrap定义好的一些属性的时候，我们经常要写一些自己想要的属性，但是发现写好的属性在调试器中虽然看起来起作用，但是实际上并没有起作用。这时候可能就是css的优先级问题了，也就是说自己定义的属性
没有覆盖原先.less中的属性。此时可以将.less影响的属性给重写，例如下面的例子：<button>
.btn-primary {
    background-color: #59B3C9;
}
本来要重新改成上面这种颜色，结果还是默认为.less中设置的颜色
问题所在：.btn-primary {
    background-image: -webkit-linear-gradient(top,#337ab7 0,#265a88 100%);
    background-image: -o-linear-gradient(top,#265a88 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#265a88));
    /* background-image: linear-gradient(to bottom,#265a88 100%); */
这是.less文件中定义的。一般background-image设置的属性会在background-color的上面，所以此时，可以
将background-image属性重写为我们想要的属性，如改成下面代码：
  .btn-primary{  
    background-color: #59B3C9;
    background-image: -webkit-gradient(linear,from(#59b3c9),to(#59b3c9));
   }

5、最近在做一个动画效果：就是让按钮竖直向上移动，最后停在最后运行到的地方
问题：用css3做动画效果，发现效果执行完之后，他又变成刚开始的属性。如下代码所示
.create_activity{
  position:relative;
  z-index:1000;
  animation: myfirst 3s;
  -moz-animation:myfirst 3s; /* Firefox */
    /*-webkit-animation:myfirst 3s; /* Safari and Chrome */*/
    -o-animation:myfirst 3s; /* Opera */
}
@keyframes myfirst{
0%   { top: 20px; left:-13px; opacity:0;}
100% { top: -250px; left:-13px; opacity:1;}
}


 /* Safari and Chrome */
@-webkit-keyframes myfirst{
0%   { top: 20px; left:-13px; opacity:0;}
100% { top: -250px; left:-13px; opacity:1;}
}
以上是部分css代码

<a href="#" target="_parent" class="create_activity"><button class="btn btn-primary btn1 ">创建活动</button></a>
这是要实现效果的对象。
显示的效果是："创建活动"这个按钮执行完动作后，又回到原来的位置，没有达到自己想要的功能
解决方法：用js实现动画效果。用js实现的动画，对象完成动作后，对象的属性就是最后的属性。

结论：用css设置的动画，在动画执行完之后，又变回刚开始的属性；而用js编写，则可以保留最后的动画效果。

6、如需对位置进行操作比如改变他的top、left、right、bottom的值：要记得首先把元素的 CSS position 
属性设置为 relative、fixed 或 absolute！
relative:是相对于这个对象最近的父元素，不管这个父元素有没有设置position;保留原先所占的位置；意思
就是原先定义好的结构不会随着有动画的对象的位置改变而变化
absolute:是针对与对象最近的父元素，并且该父元素设置了Position为absolute 或者relative.不保留原先位置
fixed:是针对浏览器窗口进行定位
注意：static是默认值，没有定位，元素出现在正常位置进行定位

7、当自己写的动画样式没有达到自己的目的的时候，要重新看教程。没显示的时候再回去看看教程，教程可以教你怎么用规则。
8、用的最多的伪类就是超链接a的伪类，有:link，:visited，:hover，:active，而且需要按照这个顺序设置

9、在设置导航条的时候，我们希望给导航条一个固定宽度值，然后达到导航元素格式不会随着窗口大小的变化而变化.设备不同，导航条的固定宽度值也不同。此时解决办法用@media来判断设备的宽度值。

@media (min-width: 1371px){
.navbar {
  width: 1950px;
}
}

即当窗口的大小大于1370px时，让导航条的宽度为1371px；

原文地址：https://blog.csdn.net/tangxiujiang