前端注意点

border:10px solid black;    border中的三个属性顺序随意

顺时针写   上右下左*/
/*padding: 20px 80px 100px 40px;*/

/*如果写三个  中间的80是左右    上  左右  下*/
/*padding: 20px 80px  40px;*/

/*如果写两个 是  上下  左右*/
/*padding: 20px 80px;*/

/*四个边的*/
padding: 20px;


/*margin:盒子与盒子之间的距离---盒子外的距离  用法同padding*/
margin:100px;
----------------------------------------------------------------------------------------

overflow：visible---显示  跟不设置此属性同作用
        ：hidden---内容会被修剪  并且其与内容不可见 此外还有清除浮动、清除margin-top塌陷功能
        ：scroll---内容会被修剪  内容会以滚动条形式显示
        ：auto---如果 内容被修剪  内容会以滚动条形式显示    内容不多的话没有滚动条
        ：inherit---规定从父元素集成overflow属性的值
-----------------------------------------------------------------------------------------

display属性-用来设置元素的类型及隐藏：
        none:元素隐藏且不占位置
       block：元素以块元素显示
      inline：元素以内敛元素显示
inline-block： 元素以内联块元素显示
-----------------------------------------------------------------------------------------

浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块间隙问题
使用浮动做就会省去转化为内联块和fontsize的设置    

----------------------------------------------------------------------------------------

父元素如果没有设置尺寸，一般是高度不设置的情况，父元素内整体浮动的
元素无法撑开父元素，父元素需要清除浮动

/*清除浮动---让浮动的子元素可以撑开父级元素*/
/*第一种清除浮动的方法   overflow*/ 在父级元素中添加overflow
/*overflow: hidden;*/

<!--第二种清除浮动的方法   在最后一个子元素的后面加一个div 加上style="clear: both"-->
<!--<div style="clear: both"></div>-->

/*!*第三种清除浮动的方法   较国际   *!*/clearfix是加在父级元素中的样式
/*.clearfix:after{*/
    /*content: "";*/
    /*display: table;*/
    /*clear: both;*/
/*}*/
---------------------------------------------------------------------------------

以下三个为套装  国际常用*/before用来解决margin-top塌陷的问题  after用来清除浮动
.clearfix:before,.clearfix:after{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
/*以下的zoom为解决IE浏览器*/
.clearfix{
    zoom: 1;
}