Div + CSS常用布局不明白的一个例子

xflltw 2017-11-04 09:15:42
我的问题是:1. 在下列代码中,div.content中的“margin-left:200px;”是相对left div, 还是相对Cotainer?但是如果是相对left,content显示的离left div的右边距离远远少于200px;即便是针对Cotainer,content div离container的右边距离远远少于200px,为什么? 2. content div是否能用left: 2px;position:relative,而不是margin-left:200px;
代码如下:
<html>
<head>
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
border: 1px solid yellow;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
border: 1px solid red;
}
div.content
{
margin-left:200px;
border:1px solid blue;
padding:1em;
}
</style>
</head>
<body>

<div class="container">

<div class="header"><h1 class="header">W3School.com.cn</h1></div>

<div class="left"><p>William of Ockham (1285-1349)</p></div>

<div class="content">
<p>Content: At W3School.com.cn you will find
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
</div>

<div class="footer">Copyright 2008 by YingKe Investment.</div>
</div>

</body>
</html>
...全文
326 6 点赞 打赏 收藏 举报
写回复
6 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
xflltw 2017-11-05
引用 5 楼 qq_39893923 的回复:
每种布局都有优缺点,用自己喜欢,熟悉的布局就行。
谢谢
  • 打赏
  • 举报
回复
一念_天涯 2017-11-04
每种布局都有优缺点,用自己喜欢,熟悉的布局就行。
  • 打赏
  • 举报
回复
xflltw 2017-11-04
引用 3 楼 qq_39893923 的回复:
[quote=引用 2 楼 xflltw 的回复:] [quote=引用 1 楼 qq_39893923 的回复:] margin表示两个元素之间的间距,可以是兄弟级别的,也可以是父子级别的. 在你这里,由于left div 浮动了(脱离文档流),所以 margin-left 是相对于container 的. 你margin-right 没有设置,肯定没有. 2.用相对定位。是相对于自己进行定位。由于前一个元素浮动,所以content 的默认位置为左边界处,left:2px 往右移了2px.但是由于文本是能够识别浮动的。所以文本 会在浮动元素之外显示。但content 的位置是在左边界2px处
非常感谢回复。问题是left div是width:160px;,而content div的margin-left:200px;,也就是说left div的右border和content div的左border应该是40px,看显示效果,很明显不到40px的啊[/quote] 你 left 盒子有padding 啊,padding:1em ,默认的话 ,可视大小就为160 + 16*2 = 194 所以只差了 6px[/quote] 非常感谢回复。顺便问一下像这样的布局,最佳实践是否应该是使用float:left;,然后margin-left?加你QQ好友方便吗?
  • 打赏
  • 举报
回复
一念_天涯 2017-11-04
引用 2 楼 xflltw 的回复:
[quote=引用 1 楼 qq_39893923 的回复:] margin表示两个元素之间的间距,可以是兄弟级别的,也可以是父子级别的. 在你这里,由于left div 浮动了(脱离文档流),所以 margin-left 是相对于container 的. 你margin-right 没有设置,肯定没有. 2.用相对定位。是相对于自己进行定位。由于前一个元素浮动,所以content 的默认位置为左边界处,left:2px 往右移了2px.但是由于文本是能够识别浮动的。所以文本 会在浮动元素之外显示。但content 的位置是在左边界2px处
非常感谢回复。问题是left div是width:160px;,而content div的margin-left:200px;,也就是说left div的右border和content div的左border应该是40px,看显示效果,很明显不到40px的啊[/quote] 你 left 盒子有padding 啊,padding:1em ,默认的话 ,可视大小就为160 + 16*2 = 194 所以只差了 6px
  • 打赏
  • 举报
回复
xflltw 2017-11-04
引用 1 楼 qq_39893923 的回复:
margin表示两个元素之间的间距,可以是兄弟级别的,也可以是父子级别的. 在你这里,由于left div 浮动了(脱离文档流),所以 margin-left 是相对于container 的. 你margin-right 没有设置,肯定没有. 2.用相对定位。是相对于自己进行定位。由于前一个元素浮动,所以content 的默认位置为左边界处,left:2px 往右移了2px.但是由于文本是能够识别浮动的。所以文本 会在浮动元素之外显示。但content 的位置是在左边界2px处
非常感谢回复。问题是left div是width:160px;,而content div的margin-left:200px;,也就是说left div的右border和content div的左border应该是40px,看显示效果,很明显不到40px的啊
  • 打赏
  • 举报
回复
一念_天涯 2017-11-04
margin表示两个元素之间的间距,可以是兄弟级别的,也可以是父子级别的. 在你这里,由于left div 浮动了(脱离文档流),所以 margin-left 是相对于container 的. 你margin-right 没有设置,肯定没有. 2.用相对定位。是相对于自己进行定位。由于前一个元素浮动,所以content 的默认位置为左边界处,left:2px 往右移了2px.但是由于文本是能够识别浮动的。所以文本 会在浮动元素之外显示。但content 的位置是在左边界2px处
  • 打赏
  • 举报
回复
相关推荐
发帖
CSS
加入

6.0w+

社区成员

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
申请成为版主
帖子事件
创建了帖子
2017-11-04 09:15
社区公告
暂无公告