浮动与定位实例中的问题

Posted CafeMing

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浮动与定位实例中的问题相关的知识，希望对你有一定的参考价值。

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

  1. div{
  2. border:1px solid red;
  3. padding:1px;
  4. float:left;
  5. }
  7. <div>
  8. <a><imgsrc="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><imgsrc="img/pic.jpg"/></a>
  13. </div>
           未解决                                                已解决
 

二、使用浮动问题

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

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

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

 

 

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

 

 

三、使用定位问题

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

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

    

      使用绝对定位的时候，都是要给父级一个相对定位，这个父级只需要是最高级的父级（position:relative），作为移动依据，

      而其他的子父级（position-absolute），会依据最高级父级去移动，

     子父级内的元素（position-absolute）,会依据子父级去移动，而并不会依据最高父级。

     （即父级永远是子级的相对定位）

      

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <metacharset="UTF-8">
  5. <title></title>
  6. <style>
  7. #wrap,#listest,#img,{
  8. margin:0;
  9. }
  10. #wrap{
  11. width:1936px;
  12. height:1927px;
  13. background:#1d2088;
  14. position:relative;
  15. span{
  16. margin:0;
  17. padding:0;
  18. }
  19. }
  20. span{
  21. font:bold 47px/47px"宋体";
  22. }
  24. }*/
  25. /*左边*/
  26. #listest{
  27. width:528px;
  28. height:1764px;
  29. background:#920783;
  30. position:absolute;
  31. /* position:relative;*//*这里的元素是上级的子元素，是下级的父元素，它的绝对定位是从它的父级开始，但是它子级的绝对定位是从它开始。所以不用给它设置relative*/
  32. top:100px;/*意思就是，如果父级永远是子级的相对定位。*/
  33. left:36px;
  34. }
  35. #listest span{
  36. /*margin-left:7px;*/
  37. }
  38. #img{
  39. width:428px;
  40. height:1492px;
  41. background:#89c997;
  42. position:absolute;
  43. top:221px;
  44. left:48px;
  46. }
  47. #img span{
  48. position:absolute;
  49. top:239px;
  50. left:176px;
  51. }
  52. /*中间*/
  53. #box{
  54. width:750px;
  55. height:1756px;
  56. background:#00561f;
  57. position:absolute;
  58. top:116px;
  59. left:660px;
  60. }
  61. #box span{
  62. position:absolute;
  63. left:42px;
  64. top:12px;
  65. }
  66. #header{
  67. position:absolute;
  68. width:620px;
  69. height:284px;
  70. background:#00a0e9;
  71. left:88px;
  72. top:68px;
  73. }
  74. #header span{
  75. position:absolute;
  76. top:44px;
  77. left:78px;
  78. }
  79. #nav{
  80. width:660px;
  81. height:612px;
  82. background:#00a0e9;
  83. position:absolute;
  84. top:420px;
  85. left:60px;
  86. }
  87. #nav span{
  88. position:absolute;
  89. top:125px;
  90. left:82px;
  91. }
  92. #footer{
  93. width:680px;
  94. height:668px;
  95. background:#00a0e9;
  96. position:absolute;
  97. top:1076px;
  98. left:48px;
  99. }
  100. #footer span{
  101. position:absolute;
  102. left:37px;
  103. }
  104. #li{
  105. width:560px;
  106. height:193px;
  107. background:#b28850;
  108. position: absolute;
  109. top:60px;
  110. left:72px;
  111. }
  112. #li span{
  113. position:absolute;
  114. top:37px;
  115. left:144;
  116. }
  117. #img1{
  118. width:173px;
  119. height:209px;
  120. background:#b28850;
  121. position:absolute;
  122. top:380px;
  123. left:48px;
  124. }
  125. #img1 span{
  126. position:absolute;
  127. top:50px;
  128. left:69px;
  129. }
  130. #img2{
  131. width:181px;
  132. height:204px;
  133. background:#b28850;
  134. position:absolute;
  135. top:405px;
  136. left:294px;
  137. }
  138. #img2 span{
  139. position:absolute;
  140. top:66px;
  141. left:71px;
  142. }
  143. #img3{
  144. width:131px;
  145. height:184px;
  146. background:#b28850;
  147. position:absolute;
  148. right:0px;
  149. top:425px;
  150. }
  151. #img3 span{
  152. position: absolute;
  153. top:55px;
  154. left:20px;
  155. }
  156. /*右边*/
  157. #lastest{
  158. width:433px;
  159. height:1833px;
  160. background:#fff100;
  161. position:absolute;
  162. top:76px;
  163. right:28px;
  164. }
  165. #lastest span{
  166. position:absolute;
  167. top:-8px;
  168. left:84px;
  169. }
  170. #h2{
  171. width:348px;
  172. height:117px;
  173. background:#a84200;
  174. position:absolute;
  175. top:44px;
  176. right:24px;
  177. }
  178. #h2 span{
  179. position:absolute;
  180. top:29px;
  181. left:53px;
  182. }
  183. #h3{
  184. width:304px;
  185. height:280px;
  186. background:#8c97cb;
  187. position:absolute;
  188. right:51px;
  189. top:278px;
  190. }
  191. #h3-1{
  192. width:192px;
  193. height:88px;
  194. background:red;
  195. position:absolute;
  196. top:28px;
  197. right:52px;
  198. }
  199. #h3-1 span{
  200. position: absolute;
  201. top:22px;
  202. right:43px;
  203. }
  204. #h3-2{
  205. width:208px;
  206. height:96px;
  207. background:red;
  208. position:absolute;
  209. bottom:12px;
  210. right:28px;
  211. }
  212. #h3-2 span{
  213. position:absolute;
  214. top:34px;
  215. left:86px;
  216. }
  217. #h4{
  218. width:325px;
  219. height:300px;
  220. background:#8c97cb;
  221. position:absolute;
  222. top:633px;
  223. right:23px;
  224. }
  225. #h4-1{
  226. width:188px;
  227. height:104px;
  228. background:red;
  229. position: absolute;
  230. top:36px;
  231. right:48px;
  232. }
  233. #h4-1 span{
  234. position: absolute;
  235. top:16px;
  236. right:45px;
  237. }
  238. #h4-2{
  239. width:244px;
  240. height:84px;
  241. background:red;
  242. position:absolute;
  243. bottom:24px;
  244. right:24px;
  245. }
  246. #h4-2 span{
  247. position:absolute;
  248. top:34px;
  249. left:98px;
  250. }
  251. #h5{
  252. width:336px;
  253. height:324px;
  254. background:#8c97cb;
  255. position: absolute;
  256. bottom:493px;
  257. right:20px;
  258. }
  259. #h5-1{
  260. width:204px;
  261. height:96px;
  262. background:red;
  263. position: absolute;
  264. top:36px;
  265. right:56px;
  266. }
  267. #h5-1 span{
  268. position: absolute;
  269. top:12px;
  270. left:82px;
  271. }
  272. #h5-2{
  273. width:236px;
  274. height:112px;
  275. background:red;
  276. position: absolute;
  277. right:40px;
  278. bottom:16px;
  279. }
  280. #h5-2 span{
  281. position: absolute;
  282. top:41px;
  283. left:98px;
  284. }
  285. #end{
  286. width:340px;
  287. height:344px;
  288. background:#a6937c;
  289. position:absolute;
  290. bottom:48px;
  291. right:32px;
  292. }
  293. #end span{
  294. position: absolute;
  295. left:38px;
  296. top:84px;
  297. }
  298. </style>
  299. </head>
  300. <body>
  301. <divid="wrap">wrap
  302. <!--左边-->
  303. <divid="listest"><span>listest</span>
  305. <divid="img"><span>img</span></div>
  306. </div>
  307. <!--中间-->
  308. <divid="box"><span>box</span>
  309. <divid="header"><span>header</span></div>
  310. <divid="nav"><span>nav</span></div>
  311. <divid="footer"><span>footer</span>
  312. <divid="li"><span>li</span></div>
  313. <divid="img1"><span>img</span></div>
  314. <divid="img2"><span>img</span></div>
  315. <divid="img3"><span>img<span></div>
  316. </div>
  317. </div>
  318. <!--右边-->
  319. <divid="lastest"><span>lastest</span>
  320. <divid="h2"><span>h2</span></div>
  321. <divid="h3">
  322. <divid="h3-1"><span>h3</span></div>
  323. <divid="h3-2"><span>p</span></div>
  324. </div>
  325. <divid="h4">
  326. <divid="h4-1"><span>h3</span></div>
  327. <divid="h4-2"><span>p</span></div>
  328. </div>
  329. <divid="h5">
  330. <divid="h5-1"><span>h3</span></div>
  331. <divid="h5-2"><span>p</span></div>
  333. </div>
  334. <divid="end"><span>end</span></div>
  335. </div>
  336. </div>
  337. </body>
  338. </html>
 

 

 

 

以上是关于浮动与定位实例中的问题的主要内容，如果未能解决你的问题，请参考以下文章

浮动布局与定位布局

如何在单个活动中使用片段中的主要活动浮动操作按钮？

H5浮动与定位

浮动与定位，浮动定位(html5技术)

网页排版中的浮动和定位（学习笔记）

4浮动与定位