<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用overflow来hidden隐藏多余margin或元素</title> <style type="text/css"> .pic_list_con{ width: 958px; border: 1px solid #666; margin: 50px auto 0; } .pic_list_title{ width: 918px; height: 50px; /*background: gold;*/ margin: 0 auto; /*此处设置了之后图片应该在父集边框紧贴边缘,不过出现问题,没有能够紧贴. 这个时候首先要查找问题在哪个元素. 主要看自己子元素内是否有自带式样的元素. 此处经过排查, 发现是h3自带式样,引起了top塌陷,所以导致title的div无法紧贴上方父元素. 所以第一时间应该更改h3的默认margin! */ } .pic_list_title h3{ margin:0; /*设置margin之后,父元素也能够紧贴上级元素了!*/ font: 18px/50px "Microsoft Yahei"; border-bottom: 2px solid red ; /*此处设置了下border之后,发现h3的元素是一个块元素,border覆盖整行 那么需要转元素:使用display或者是float; 在此处,displayd的inlineblock 和 float所形成的效果是一样的 不过在行内有多个行内块元素的时候,inlineblock则会有块间间隙,需要通过margin负值来消除.float则不会. 所以通常来讲使用float会比较方便一点. */ /*display: inline-block;*/ float: left; /* 且此处文字与元素块并不是同一位置,所以要设置, 让文字在元素块偏后 可以通过indent设置或者padding-left. 所能达到的效果在此处一模一样. */ text-indent: 10px; /*padding-left: 20px;*/ /*background: gold;*/ } .pic_wrap{ width: 918px; margin: 20px auto 13px; /*background: cyan;*/ overflow: hidden; } .pic_list{ list-style: none; width: 950px; padding: 0; margin: 0px; /*background-color: gold;*/ /*overflow: hidden;*/ } .pic_list li{ width: 160px; height:68px; margin: 0; float: left; /*此时设置块元素的时候会导致,底栏塌陷,清除浮动*/ /*clearfix可以使用. 但在此处,使用overflow更为方便.因为overflow的hidden缺陷在于会隐藏定位元素, 而此时没有定位元素. 所以在父集设置overflow */ margin: 0 29px 25px 0px; /*到此处,发现图片无法单行存在5个,因为有margin存在,于是在父集上又添加一个div元素,wrap. 解决图片margin排版问题思路: 1.在父集外面创建一个上级元素 2.放大父集,使其能够容纳下足够的图片单位,不至于因为每行最后一个图片的右边margin值影响排列. 3.在父集的上级设置overflow,hidden.隐藏多余元素. */ } </style> </head> <body> <div class="pic_list_con"> <div class="pic_list_title"> <h3>图片列表</h3> </div> <!-- sublime --> <!-- div.pic_wrap>ul.pic_list>(li>a[href="#"]>img[src="images/goods.jpg" alt="商品图片"])*10 --> <!-- sublime中, 创建元素的时候可以通过 {} 大括号添加元素内容 [] 中括号添加属性内容, 例如 src, alt 等等 () 用来框住批量创建时候的语法. $ 美元符号可以让其自动生成顺序常数. --> <div class="pic_wrap"> <ul class="pic_list"> <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li> <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li> <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li> <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li> <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li> <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li> <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li> <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li> <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li> <li><a href="#"><img src="images/goods.jpg" alt="商品图"></a></li> </ul> </div> </div> </body> </html>