首页 > 代码库 > 浮动与定位实例中的问题

浮动与定位实例中的问题

2024-08-31 03:04:06   220人阅读

一、在A标签内添加图片，解析的时候出现了莫名的距离。

  1. 		    div{
  2. 		    	border:1px solid red;
  3. 				padding:1px;
  4. 				float:left;
  5. 		    }
  7. 		   <div>
  8. 		   <a><img src="img/pic.jpg"/></a>
  9. 		   </div>

     解决办法   
     一、可以选择给父级的div添加一个font-size:0;
     二、给图片的样式添加一个vertical-align:middle;（

因为图片排列的依据是按照文字的， 可以给图片的属性添加一个 vertical-align:middle; ）


  1. 		    div{
  2. 		    	border:1px solid red;
  3. 				padding:1px;
  4. 				float:left;
  5. 			/*	font-size:0;*/
  6. 		    }
  7.              img{
  8.               	vertical-align: middle;
  9.               }
  11. 		   <div>
  12. 		   <a><img src="img/pic.jpg"/></a>
  13. 		   </div>
技术分享技术分享
           未解决                                                已解决

二、使用浮动问题

    想让元素在同一行显示，就可以用浮动。（当没有给宽的时候，浮动的会把元素宽由上一级父级的宽变成内容的宽）

    浮动给了，一定要给父级清除浮动，因为会有很多意想不到的影响。(除了塌陷)

    用了浮动之后，想调元素之间的距离就用margin

技术分享技术分享

 

 这个div没有给宽，所以它的宽会依照上一级，就是body的宽。
当div使用了浮动元素后，如果它有子元素它的宽就会由子元素的内容撑开



三、使用定位问题

      因为定位是脱离文档流的，所以当子级元素使用了定位，父级的高都不再由子级内容所撑开，因此，需要给父级明确的高度。

      对于父级宽度的问题，如果没有给宽度，元素一般都会继承上一级的宽度。







浮动与定位实例中的问题


联系
我们