zoukankan      html  css  js  c++  java

  • 浮动与定位实例中的问题

    一、在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>
     

     
  • 相关阅读:
    10分钟搞懂树状数组
    POJ3278 爆搜，不要像我一样作死就好
    POJ3278 爆搜，不要像我一样作死就好
    UVA 12174 播放器，滑动窗口
    UVA 12174 播放器，滑动窗口
    UVA 12627 气球胀啊胀
    UVA 12627 气球胀啊胀
    UVALive 4487 异或 并查集
    UVALive 4487 异或 并查集
    paste指令的使用
  • 原文地址：https://www.cnblogs.com/CafeMing/p/6259819.html
Copyright © 2011-2022 走看看