**注意：**文字默认左上角对齐
使用50px而不是48px是为了有缝隙，这样更美观，其实48px也行。
解决由于最右侧li添加margin-right，而导致li盒子掉到下一层的问题。 解决方法：增大子盒子一个margin-right的宽度即可。 当最右侧的li盒子因为超过.new-bd盒子导致掉到下一层： 1.将父盒子ul的宽度增大，可以保证四个li在ul中可以装下。 2.在.news-bd里面将超出部分使用overflow:hidden，讲ul超出.news-bd的部分隐藏掉。
按照 优先使用 宽度 （width） 高度（height）其次 使用内边距（padding） 再次 外边距（margin）。 width(height) > padding > margin
页面中大部分使用插入图片，一些不太重要的小图标和超大背景图使用背景图片。 但是在实际开发中，logo全部使用背景图片。
里面的文字内容、行内块、行内元素都可以居中对齐。
底部通栏盒子page不给宽度的原因：底部的盒子不能给宽度，因为里面序号盒子的显示个数不确定。 对其方法:保证.page里里面装的行内元素或行内块元素（千万不能使用div等块级元素，因为使用块级元素后，还需要浮动后设置margin的值，margin值不确定，所以不是最优解），再使用text-align:center即可。
<div class="page"> <span class="page_num"> <a href="#" class="pn_prev"><<上一页</a> <a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#" class="pn_next">>>下一页</a> </span> </div> .page { margin: 40px 0; text-align: center; } .page_num a { display: inline-block; width: 36px; height: 36px; line-height: 36px; border: 1px solid #cccccc; } .page_num .pn_prev, .page_num .pn_next { width: 83px; }一般需要左边小盒子使用inline-block和vertical-align
考虑将其放置一个盒子里面（li）
<ul> <li>品优购欢迎您！ </li> <li> <a href="#">请登录</a> <a href="#" class="style-red">免费注册</a> </li> </ul>拓展： 行高：
<div class="father"> <div class="son"> 123 </div> </div> .father { width: 100px; height: 100px; background-color: pink; line-height: 100px; } .son { width: 50px; background-color: skyblue; }注意注意： 1.当子盒子没给高度时，子盒子继承了父盒子的行高，而当一个盒子只有行高没有高的时候，高默认就该继承的行高。 2.某盒子未设置高，设置了行高，就相当于设置了高。 3.font-size是字体的大小，不是height。
.father { width: 100px; height: 100px; background-color: pink; line-height: 50px; } .son { width: 50px; background-color: skyblue; }PNG
1.最外面.search大盒子可以不用给大小，使用里面的input和button来撑开即可。 2.input取消轮廓线更好看。outline:none;
1.logo 里面 首先放一个 h1 标签 ，目的是为了提权，告诉搜索引擎，这个地方很重要 2.h1里面在放一个连接，可以返回首页的， 给连接一个 大小 和 logo 的背景图片 3.连接 里面要放文字（网站名称），为了搜索引擎收录我们。 但是文字不要显示出来 4.要用 text-indent 移到盒子外面 （text-indent: -9999px) 然后overflow:hidden 淘宝的做法 5.直接给font-size: 0; 就看不到文字了， 京东的做法。 6.最后给 连接一个 title 这样鼠标放到logo 上， 就可以看到提示文字了
<div class="logo"> <h1> <a href="index.html" title="品优购">品优购</a> </h1> </div> .header .logo a { /* a为行内元素没有大小 */ display: block; overflow: hidden; width: 178px; height: 57px; background: url(../img/logo.png); text-indent: -99px; }设置a为块级元素或者行内块（为了设置大小，因为背景图有大小），然后设置background为背景图。
<div class="logo"> <h1> <a href="index.html" title="品优购">品优购</a> </h1> </div> .header .logo a { /* a为行内元素没有大小 */ display: block; overflow: hidden; width: 178px; height: 57px; background: url(../img/logo.png); text-indent: -99px; }子随父相：
方向箭头叠加在其他图片上方，应该使用绝对定位，因为绝对定位完全脱标，完全不占位置。父级盒子应该使用相对定位，因为相对定位不脱标，后续盒子仍然以标准流的方式对待它。 如果父级盒子也使用绝对定位，会完全脱标，那么下方的广告盒子会上移，这显然不是我们想要的。结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。
.father { width: 350px; height: 350px; background-color: pink; margin: 100px; /*标准流的子盒子总是以父级为准移动位置*/ /*如果 父级 没有定位 绝对定位子盒子 以我们文档为准浏览器移动位置*/ /*如果 父级 有定位 绝对定位子盒子 以父级为准移动位置*/ /*position: relative;*/ }需要注意：就算父亲不是相对定位，也是以父级为准移动位置 如果 父级 没有定位 绝对定位子盒子 以我们文档为准浏览器移动位置 如果 父级 有定位 绝对定位子盒子 以父级为准移动位置
父盒子为块级元素，有宽高： 1. 子盒子为块级元素，未设置宽高： 1.1 若其中有文字，则宽为父盒子的宽，高度为文字的高 但是若 1.2 若没有文字，则子盒子设置高的话，就可以看到宽为父盒子的宽，若不子盒子设置高设置，则看不见子盒子 **注意：**子盒子块级元素是继承父级盒子的宽，不继承高 2. 子盒子为行内块元素，未设置宽高： 2.1 若其中有文字，则子盒子大小为文字的大小 2.2 若没有文字，则子盒子不存在 注意： 默认子盒子块级元素的宽是父盒子的宽，高是内部内容的高
元素模式元素排列设置样式默认宽度包含块级元素一行只能放一个块级元素可以设置宽度高度宽度是容器的100%（不包括高度）容器级可以包含任何标签行内元素一行可以放多个行内元素不可以直接设置宽度高度它本身内容的宽度容纳文本或则其他行内元素行内块元素一行放多个行内块元素可以设置宽度和高度它本身内容的宽度1…dd、.dt
<div class="dropdown"> <div class="dt"></div> <div class="dd"> <ul> <li></li> </ul> </div> </div>**注意：**是class="dt"和“dd”的div盒子,而不是dt和dd标签。 2.dd、dt 可以设计为大盒子划分6个的dl
<dl class=" mod_help_item"> <dt>购物指南</dt> <dd><a href="#">购物流程</a></dd> <dd><a href="#">会员介绍</a></dd> <dd><a href="#">生活旅行/团购</a></dd> <dd><a href="#">常见问题</a></dd> <dd><a href="#">大家电</a></dd> <dd><a href="#">联系客服</a></dd> </dl>注意处理精灵图前，锁定位图
简化CSS代码的方式
<li> <i class="mod-service-icon mod_service_zheng"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> <li> <i class="mod-service-icon mod_service_kuai"></i> <div class="mod_service_tit"> <h5>正品保障</h5> <p>正品保障，提供发票</p> </div> </li> .mod-service-icon { /*浮动的盒子 可以直接给大小的 不需要转换*/ float: left; width: 50px; height: 50px; margin-left: 35px; background: url(../img/icons.png) no-repeat; } .mod_service_zheng { background-position: -253px -3px; } .mod_service_kuai { background-position: -255px -54px; }
margin：0 auto;块级盒子居中对齐 text-algin：center;文本或者行内元素，行内块元素居中对齐
<div class="mod_copyright_links"> <a href="index.html">关于我们</a> <a href="index.html">联系我们 </a> <a href="index.html">联系客服 </a> <a href="index.html">商家入驻 </a> <a href="index.html">营销中心 </a> <a href="index.html">手机品优购 </a> <a href="index.html">友情链接</a> <a href="index.html">销售联盟</a> <a href="index.html">品优购社区 </a> <a href="index.html>品优购公益 </a> <a href="index.html">English Site</a> <a href="index.html>Contact U</a> </div>该情况推荐方法二：（更简单） 虽然父盒子是版心有宽度，但是使用margin居中对齐需要设置该盒子的宽度，因为是使得该盒子居中对齐 方法一：
.mod_copyright_links { width: 980px; height: 100px; margin: 0 auto; /* text-align: center; */ }方法二：
.mod_copyright_links { text-align: center; }无背景图标+h3
<div class="recom_hd fl"> <img src="img/clock.png" alt=""> <h3>今日推荐</h3> </div>使用top buttom left right处理。
方法一： 三个盒子使用浮动。 方法二（推荐）： 中间的盒子给宽度高度，然后使用margin,进行居中对齐，最后左右盒子使用定位即可，定位盒子的居中对齐见问题47。
三个大盒子里的格式类似，所以可以类似处理。 因为每个盒子的格式差不多，所以处理有技巧:
<div class="summary"> <dl class="summary_price"> <dt>价格</dt> <dd></dd> </dl> <dl class="summary_promotion"> <dt>促销</dt> <dd></dd> </dl> <dl class="summary_support"> <dt>支持</dt> <dd></dd> </dl> </div>1.避免重复处理每个dl盒子里面的dd和dt,可以使用直接设置summary的dd和dt,这样可以简化代码。
.summary dl { /*避免重复清除浮动*/ overflow: hidden; } .summary dt, .summary dd { /*避免重复设置浮动*/ float: left; } .summary dt { width: 60px; padding-left: 10px; line-height: 36px; }2.设置dt时候发现，上下左侧文字和右侧是对齐的，此时不能使用居中对齐。 处理方法： 设置如图的盒子（高度剩余法），然后设置padding-left挤开左侧即可。 3.因为5299价格值设置以后，会撑开盒子，而里面的文字”价格”，会跟随撑大的盒子左上角对齐，所以会出现这种情况。 处理方法： 使得dt的行高=高，实现垂直居中。 易错点（求dt的高）： 方法一： 如图此处的dl.sumarry_price的高是56，然后求dt的高，56px（带了绿色的高度）-padding(上下)=36px（蓝色区域） 方法二（推荐）: 选择computed进行查看 4. .remark盒子如果使用右浮动，会产生如图效果，因为其右浮动是相对于dd盒子的，所以无法到达.summary_price的右侧。 处理方法： 使用定位，然后相对定位给.summary_price即可。 5.选择数量的盒子的技巧：
.choose_amount盒子，不给边框，给一个背景色测试就行，这个背景色的大小包括了边框的大小，但是该边框实际最后由里面的input和a设置的。左侧的input盒子的右边框其实在右侧“+”盒子左边框得下边。 原因是：右侧“+”盒子使用了绝对定位，脱离标准流，这样也避免了边框重叠造成的问题。 <div class="choose_btns"> <div class="choose_amount"> <input type="text" value="1"> <a href="javascript:;" class="add">+</a> <a href="javascript:;" class="reduce">-</a> </div> <a href="#" class="addcar">加入购物车</a> </div> .choose_btns { margin-top: 20px; } .choose_amount { position: relative; float: left; width: 50px; height: 46px; background-color: pink; } .choose_amount input { width: 33px; height: 44px; border: 1px solid #ccc; text-align: center; } .add, .reduce { position: absolute; right: 0; width: 15px; height: 22px; border: 1px solid #ccc; background-color: #f1f1f1; text-align: center; line-height: 22px; } .add { top: 0; } .reduce { bottom: 0; /*禁止鼠标样式*/ cursor: not-allowed; /* pointer 小手 move 移动 */ }可以给每一个label盒子相同的宽度和高度（记得转化为行内块，否则盒子看不见），然后使得label内的文字右对齐。
<li> <label for="tel">手机号：</label> <input type="text" class="inp" id="tel"> <span class="error"><i class="error_icon"></i> 手机号码格式不正确，请重新输入</span> </li> .reg_form label { display: inline-block; width: 100px; height: 34px; text-align: right; }当点击hd里面的大家电时，bd里面的大家电显示，小家电隐藏 当点击hd里面的小家电时，bd里面的小家电显示，大家电隐藏
hd里面结构ul>li>a bd里面ul(不同class)*n hd里面的li和bd里面的ul一一对应
<div class="box-hd"> <h3>家用电器</h3> <div class="tab-list"> <ul> <li><a href="#" class="style-red">热门</a>|</li> <li><a href="#">大家电</a>|</li> <li><a href="#">生活电器</a>|</li> <li><a href="#">厨房电器</a>|</li> <li><a href="#">个护健康</a>|</li> <li><a href="#">应季电器</a>|</li> <li><a href="#">空气/净水</a>|</li> <li><a href="#">新奇特</a>|</li> <li><a href="#">高端电器</a></li> </ul> </div> </div> <div class="box-bd"> <ul class="tab-con"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <!-- <ul class="tab-con"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> --> </div>detail_tab_con里面五个div盒子依次对应detail_tab_list里面五个li
<div class="detail_tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>售后保障</li> <li>商品评价（50000）</li> <li>手机社区</li> </ul> </div> <div class="detail_tab_con"> <div class="item"> <ul class="item_info"> <li>分辨率：1920*1080(FHD)</li> <li>后置摄像头：1200万像素</li> <li>前置摄像头：500万像素</li> <li>核 数：其他</li> <li>频 率：以官网信息为准</li> <li>品牌： Apple ♥关注</li> <li>商品名称：APPLEiPhone 6s Plus</li> <li>商品编号：1861098</li> <li>商品毛重：0.51kg</li> <li>商品产地：中国大陆</li> <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li> <li>系统：苹果（IOS）</li> <li>像素：1000-1600万</li> <li>机身内存：64GB</li> </ul> <p> <a href="#" class="more">查看更多参数</a> </p> <img src="upload/detail_img1.jpg" alt=""> <img src="upload/detail_img2.jpg" alt=""> <img src="upload/detail_img3.jpg" alt=""> </div> <!-- <div class="item">规格与包装</div> <div class="item">售后保障</div> --> </div>1.tab-list 2.tab-con 3.tab-con-list 4.tab-con-item
可考虑 w329,w219,w220
2.1 使用固定定位,然后相对于屏幕的。 2.2 left:50%：侧边栏就一直在通栏中间了，然后返回margin-left:-(版心宽度/2 + 侧边栏宽度+合适间距调整)
.fixedtool { position: fixed; top: 100px; left: 50%; margin-left: -676px; width: 66px; background-color: #fff; }以为大盒子已经使用了padding，所以“立即抢购”的盒子使用定位是最优解。
方法一：1，2，3盒子均浮动 方法二：3盒子为块级盒子的居中对齐，使用margin:0 auto;然后左右盒子使用定位，其不受到标准流的限制，所以更合适。（推荐）
原理图
原始设置padding以及margin:
在a链接元素里面padding-left: 20px: 在a链接元素里面margin-left: 20px: 在li元素里面padding-left: 20px： 不要在li里面margin-left: 20px：
