《Web前端开发技术》课件-1-3 项目CSS修饰-盒子属性

江西卧龙公司静态首页CSS修饰——盒子属性

引入横向布局纵向布局解决办法：要么不用P标签，改变元素类型；要么浮动起来P标签是块元素，独占一整行

目录盒子属性解读练习项目训练1：江西卧龙项目堆色块2项目训练2：江西卧龙项目头部的制作项目训练3：江西卧龙项目导航条的制作练习一、盒子属性1、盒子属性任务说明：任务实施1、DIV内容：高宽300px；边框为1px；背景灰色1、盒子属性任务说明：任务实施2、padding内容：Padding上下左右各50px50问题：控制台上内容区域的高宽各撑大了100px？？高宽300px高宽402px解决：若要保留盒子的宽高300px，要各减100px1、padding属性任务说明：任务实施2、margin内容：margin上下左右各50px50高宽300px*{margin:0px;padding:0;}取消默认边距2、padding属性任务实施Padding:1个参数代表上下左右Padding:2个参数代表上下左右Padding:3个参数代表上左右下Padding:4个参数代表上右下左padding:50px复合写法，代表上下左右填充值； padding-top:50px; padding-right:50px; padding-bottom:50px; padding-left:50px;Margin:20pxauto;2、margin属性注意事项Margin叠加

当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题Margin传递margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其他三个方向是没有传递问题的解决方法：只给一个盒子加margin边距，另一个不加！左右是不会叠加解决方法：1、用padding-top（加给谁？）2、父级加overflow:hidden;3、父级display:inline-block;（内联块）4、父级浮动float:left;练习——布局1、大盒子wrap（背景色为红色）

里面装了个小的盒子main（背景色为白色）2、白色的盒子里，有文字：1个标题h2,1个段落p标签形成代码（html部分）：练习——测量练习——加基础CSS（宽高背景）父级盒子 width:551px; /*height:137px;*//*高度自适应*/ 背景色：红色 子级盒子 width:528px; height:66px; 背景色：白色练习——加CSS边距、填充子级盒子

padding:23px10px3px0; margin:8px9px37px4px;练习——CSS文字属性标题h2：字号14px，行高，字体颜色：段落P：字号12px，行高，字体颜色：，首行缩进2个字符练习<h3class="t"><ahref="#"target="_blank">HTML<em><ins></em>标签,<em>ins</em>的英文全称是??_百度知道</a></h3>Span节点标签项目CSS修饰——堆色块2堆色块训练2100px59px463px254px292px250px82px堆色块训练2——头部制作分析：1、大盒子id=header（高100，宽1000）

里面装了2个小的盒子class=logoclass=search2、logo盒子里放了个h1,h1里放了个超链接；search里放表单，表单放文本输入框与提交按钮形成代码（html部分）：堆色块训练2——头部制作分析：1、大盒子id=header（高100，宽1000）

里面装了2个小的盒子class=logoclass=search2、logo盒子里放了个h1,h1里放了个超链接；search里放表单，表单放文本输入框与提交按钮形成代码（CSS部分）：/*页面开始*/#wrapper{width:1000px;margin:0pxauto;}#header{width:1000px;height:100px;/*background:#999;*/overflow:hidden;}#header.logo{height:21px;width:243px;float:left;margin-top:37px;margin-left:23px;}#headerh1{height:21px;width:243px;background:url("../images/logo.jpg")no-repeat;}#headerh1a{display:block;height:21px;width:243px;text-indent:-999px;}

#header.search{height:26px;width:225px;float:right;border:1pxsolid#e5e5e5;margin-top:37px;margin-right:23px;/*background:url("../images/search.jpg")no-repeat;*/}#header.search.search_text{width:187px;/*201px-14px*/height:26px;border:none;outline:none;background:#f0f0f0;float:left;/*S与左边距离*/padding-left:14px;font-size:10px;color:#858585;}#header.search.search_sub{width:24px;height:26px;float:right;border:none;outline:none;background:url("../images/search-sub.jpg")no-repeat;}堆色块训练2——内容新闻区制作分析：1、大盒子id=main里面装了2个小的盒子class=newsclass=img-list2、news盒子里放了3个div形成代码（html部分）：堆色块训练2——内容新闻区制作——测量分析：1、news-left：堆色块训练2——内容新闻区制作——测量分析：1、news-center：堆色块训练2——内容新闻区制作