div+css布局之padding和margin的使用，及自适应100%的宽度_html/css_WEB-ITnose

整体效果图：

立即学习“前端免费学习笔记（深入）”；

科大讯飞-AI虚拟主播

科大讯飞推出的移动互联网智能交互平台，为开发者免费提供：涵盖语音能力增强型SDK，一站式人机智能语音交互解决方案，专业全面的移动应用分析；

下载

话不多说，大家自己看，相信会有帮助

   黑色背景部分宽度为1002px;加上两边红色的1px边框宽度，整个宽度是1004px div >
div >

  
    
       div >
      
         div >
         安娜的小窝 div >
       div >
       div >
     div >
     div >
    
       div >
       安娜的小窝 div >
     div >
   div >
div >

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

下面是css样式部分

立即学习“前端免费学习笔记（深入）”；

body  { margin : 0 ; padding : 0 ; background : #fff ; }
div { color : #333 ; font-family : "verdana","arial", "sans-serif","宋体" ; font-size : 12px ; }

.cBody { width : 100% ; text-align : center ; margin-top : 5px ; }
.Top_Bg { width : 1002px ; border : solid 1px red ;  background-color : #000000 ; color : #FFFFFF ; text-align : center ; margin : 0 auto ; }
.BabyContent { width : 1004px ; margin : 0 auto ; }
/* 左边部分 */
.Babyleft { width : 202px ; float : left ; }
.lefttop { width : 202px ; height : 2px ; background : url(http://www.imythu.cn/images/BLeftTop.jpg) no-repeat ; overflow : hidden ; }
.leftbg { width : 196px ; background : url(http://www.imythu.cn/images/BLeftBg.jpg) repeat-y ; padding : 1px 4px 2px 2px ; }
.LbgTop { width : 100% ; background : url(http://www.imythu.cn/images/warror.gif) no-repeat 3px 5px ;  background-color : #FF6600 ; height : 20px ; }
.bName { margin-top : 10px ; margin-left : 5px ; margin-bottom : 5px ; margin-right : 5px ; border-bottom : solid 1px #ccc ; text-align : left ; padding-left : 10px ; padding-bottom : 5px ; color : #FF3300 ; font-size : 16px ;  position : static ; float : inherit ; }
.leftbuttom { width : 202px ; height : 2px ; background : url(http://www.imythu.cn/images/BLeftButtom.jpg) no-repeat ; overflow : hidden ; }
/* 左边部分 */
.Babycenter { width : 328px ; float : left ; margin-left : 2px ; height : 200px ; border : solid 1px #ccc ; }
.Babyright { width : 466px ; float : left ; margin-left : 2px ; border : solid 1px #ccc ; }