浮动与定位实例中的问题

最新推荐文章于 2022-10-06 15:16:17 发布

天为我蓝

最新推荐文章于 2022-10-06 15:16:17 发布

阅读量199

点赞数

原文链接：http://www.cnblogs.com/CafeMing/p/6259819.html

版权

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

div{
border:1px solid red;
padding:1px;
float:left;
}
<div>
<a><imgsrc="img/pic.jpg"/></a>
</div>

解决办法

一、可以选择给父级的div添加一个font-size:0;

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

div{
border:1px solid red;
padding:1px;
float:left;
/* font-size:0;*/
}
img{
vertical-align: middle;
}
<div>
<a><imgsrc="img/pic.jpg"/></a>
</div>

未解决已解决

二、使用浮动问题

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

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

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

这个div没有给宽，所以它的宽会依照上一级，就是body的宽。

当div使用了浮动元素后，如果它有子元素它的宽就会由子元素的内容撑开

三、使用定位问题

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>
#wrap,#listest,#img,{
margin:0;
}
#wrap{
width:1936px;
height:1927px;
background:#1d2088;
position:relative;
span{
margin:0;
padding:0;
}
}
span{
font:bold 47px/47px"宋体";
}
}*/
/*左边*/
#listest{
width:528px;
height:1764px;
background:#920783;
position:absolute;
/* position:relative;*//*这里的元素是上级的子元素，是下级的父元素，它的绝对定位是从它的父级开始，但是它子级的绝对定位是从它开始。所以不用给它设置relative*/
top:100px;/*意思就是，如果父级永远是子级的相对定位。*/
left:36px;
}
#listest span{
/*margin-left:7px;*/
}
#img{
width:428px;
height:1492px;
background:#89c997;
position:absolute;
top:221px;
left:48px;
}
#img span{
position:absolute;
top:239px;
left:176px;
}
/*中间*/
#box{
width:750px;
height:1756px;
background:#00561f;
position:absolute;
top:116px;
left:660px;
}
#box span{
position:absolute;
left:42px;
top:12px;
}
#header{
position:absolute;
width:620px;
height:284px;
background:#00a0e9;
left:88px;
top:68px;
}
#header span{
position:absolute;
top:44px;
left:78px;
}
#nav{
width:660px;
height:612px;
background:#00a0e9;
position:absolute;
top:420px;
left:60px;
}
#nav span{
position:absolute;
top:125px;
left:82px;
}
#footer{
width:680px;
height:668px;
background:#00a0e9;
position:absolute;
top:1076px;
left:48px;
}
#footer span{
position:absolute;
left:37px;
}
#li{
width:560px;
height:193px;
background:#b28850;
position: absolute;
top:60px;
left:72px;
}
#li span{
position:absolute;
top:37px;
left:144;
}
#img1{
width:173px;
height:209px;
background:#b28850;
position:absolute;
top:380px;
left:48px;
}
#img1 span{
position:absolute;
top:50px;
left:69px;
}
#img2{
width:181px;
height:204px;
background:#b28850;
position:absolute;
top:405px;
left:294px;
}
#img2 span{
position:absolute;
top:66px;
left:71px;
}
#img3{
width:131px;
height:184px;
background:#b28850;
position:absolute;
right:0px;
top:425px;
}
#img3 span{
position: absolute;
top:55px;
left:20px;
}
/*右边*/
#lastest{
width:433px;
height:1833px;
background:#fff100;
position:absolute;
top:76px;
right:28px;
}
#lastest span{
position:absolute;
top:-8px;
left:84px;
}
#h2{
width:348px;
height:117px;
background:#a84200;
position:absolute;
top:44px;
right:24px;
}
#h2 span{
position:absolute;
top:29px;
left:53px;
}
#h3{
width:304px;
height:280px;
background:#8c97cb;
position:absolute;
right:51px;
top:278px;
}
#h3-1{
width:192px;
height:88px;
background:red;
position:absolute;
top:28px;
right:52px;
}
#h3-1 span{
position: absolute;
top:22px;
right:43px;
}
#h3-2{
width:208px;
height:96px;
background:red;
position:absolute;
bottom:12px;
right:28px;
}
#h3-2 span{
position:absolute;
top:34px;
left:86px;
}
#h4{
width:325px;
height:300px;
background:#8c97cb;
position:absolute;
top:633px;
right:23px;
}
#h4-1{
width:188px;
height:104px;
background:red;
position: absolute;
top:36px;
right:48px;
}
#h4-1 span{
position: absolute;
top:16px;
right:45px;
}
#h4-2{
width:244px;
height:84px;
background:red;
position:absolute;
bottom:24px;
right:24px;
}
#h4-2 span{
position:absolute;
top:34px;
left:98px;
}
#h5{
width:336px;
height:324px;
background:#8c97cb;
position: absolute;
bottom:493px;
right:20px;
}
#h5-1{
width:204px;
height:96px;
background:red;
position: absolute;
top:36px;
right:56px;
}
#h5-1 span{
position: absolute;
top:12px;
left:82px;
}
#h5-2{
width:236px;
height:112px;
background:red;
position: absolute;
right:40px;
bottom:16px;
}
#h5-2 span{
position: absolute;
top:41px;
left:98px;
}
#end{
width:340px;
height:344px;
background:#a6937c;
position:absolute;
bottom:48px;
right:32px;
}
#end span{
position: absolute;
left:38px;
top:84px;
}
</style>
</head>
<body>
<divid="wrap">wrap

<divid="listest"><span>listest</span>
<divid="img"><span>img</span></div>
</div>

<divid="box"><span>box</span>
<divid="header"><span>header</span></div>
<divid="nav"><span>nav</span></div>
<divid="footer"><span>footer</span>
<divid="li"><span>li</span></div>
<divid="img1"><span>img</span></div>
<divid="img2"><span>img</span></div>
<divid="img3"><span>img<span></div>
</div>
</div>

<divid="lastest"><span>lastest</span>
<divid="h2"><span>h2</span></div>
<divid="h3">
<divid="h3-1"><span>h3</span></div>
<divid="h3-2"><span>p</span></div>
</div>
<divid="h4">
<divid="h4-1"><span>h3</span></div>
<divid="h4-2"><span>p</span></div>
</div>
<divid="h5">
<divid="h5-1"><span>h3</span></div>
<divid="h5-2"><span>p</span></div>
</div>
<divid="end"><span>end</span></div>
</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/CafeMing/p/6259819.html

天为我蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动与定位实例中的问题

一、在A标签内添加图片，解析的时候出现了莫名的距离。 div{ border:1px solid red; padding:1px; float:left; }<div><a><imgsrc="img/pic.jpg"/></a></div> 解决办法 ...
复制链接

扫一扫