Re: [问题] css positioning
楼主: sean72 (.) 2014-07-08 14:18:53
※ 引述《fire231 (Bloodmors)》之铭言：
: ※ 引述《sean72 (.)》之铭言：
: : 我想多了解positioning
: : 做了下面的小实验
: : http://jsbin.com/cevukote/1/edit?html,css,console,output
: : body里面包了一个d1方块
: : <body id="bdy">
: : <div id="d1"> 100px x 100px
: : position defaul static
: : 用outline描边
: : 最初状态
: : bdy height = d1.height
: : bdy width = screen width
: : 1.
: : 为何最初状态
: : d1 (d1.left, d1.top) = (8,8)?
: 因为你的 bdy 不知道为什么自带有 margin 8px
: 所以位置就不会是 0 0
: 你可以设定 margin 0px就知道了
: : 2.
: : d1加入
: : margin-left: 20px;
: : margin-top: 20px;
: : d1 (d1.left, d1.top) = (28,20)?
: : bdy (bdy.left, bdy.top) = (8,20)?
: : a.(28,20)这两个数字怎么出现的?
: : b.为何bdy也跟着下移了20px?
: : c.此处margin改变应该是相对于父元素(bdy)
: : 为何只有d1.left相对于bdy移动了20px
: : d1.top却没有改变?
: : 感谢
: 我不知道你怎么加入的
: 总之我加入是没这个问题
: http://jsbin.com/cevukote/4/edit
因为我用 outline描边
![]()
outline不占任何px，我以为是一个比border更简单的css property
所以我用outline描边
其实这也是我本来接着想问的问题 (但我想先将影响问题的因子缩到最少)
为什么border / outline会造成如此差异?
我用outline描边和border描边，最后的结果应该只有差在border的px才对吧?
这边将问题简化成:只有一个<div>和body
将border , outline 从d1 和 bdy中都去除
http://jsbin.com/cevukote/8/edit?html,css,js,console,output
只看Javascript回传的offset.top offset.left
如同版友所言
#bdy {margin:0;}之后 d1初始时候，就不会有8px的问题
但是
1.
加入margin-top / margin-left
#d1{
width: 100px;
height: 100px;
background: blue;
margin-top: 20px;
margin-left: 20px;
}
d1 (offset.left , offset.top) = (20 , 20) ....(good)
bdy(offset.left , offset.top) = (0 , 20) ....(WHY?)
body从头到尾没有移动过
为何会从(0,0)变成(0,20)?
为什么只有top往下移动了20px，left却没有改变呢?
2.
例如bootstrap也在css中设定body margin:0;
所以这个观念应是该暗示说: <body> element本身也是一个大方块
像是桌巾一样盖著整张桌子一样
body涵盖的面积是整个页面
而其他所有<div> <p> <h>等element则像是桌巾上的餐盘餐具
我这样的想法对吗?
感谢
: ※ 引述《sean72 (.)》之铭言：
: : 我想多了解positioning
: : 做了下面的小实验
: : http://jsbin.com/cevukote/1/edit?html,css,console,output
: : body里面包了一个d1方块
: : <body id="bdy">
: : <div id="d1"> 100px x 100px
: : position defaul static
: : 用outline描边
: : 最初状态
: : bdy height = d1.height
: : bdy width = screen width
: : 1.
: : 为何最初状态
: : d1 (d1.left, d1.top) = (8,8)?
: 因为你的 bdy 不知道为什么自带有 margin 8px
: 所以位置就不会是 0 0
: 你可以设定 margin 0px就知道了
: : 2.
: : d1加入
: : margin-left: 20px;
: : margin-top: 20px;
: : d1 (d1.left, d1.top) = (28,20)?
: : bdy (bdy.left, bdy.top) = (8,20)?
: : a.(28,20)这两个数字怎么出现的?
: : b.为何bdy也跟着下移了20px?
: : c.此处margin改变应该是相对于父元素(bdy)
: : 为何只有d1.left相对于bdy移动了20px
: : d1.top却没有改变?
: : 感谢
: 我不知道你怎么加入的
: 总之我加入是没这个问题
: http://jsbin.com/cevukote/4/edit
因为我用 outline描边
outline不占任何px，我以为是一个比border更简单的css property
所以我用outline描边
其实这也是我本来接着想问的问题 (但我想先将影响问题的因子缩到最少)
为什么border / outline会造成如此差异?
我用outline描边和border描边，最后的结果应该只有差在border的px才对吧?
这边将问题简化成:只有一个<div>和body
将border , outline 从d1 和 bdy中都去除
http://jsbin.com/cevukote/8/edit?html,css,js,console,output
只看Javascript回传的offset.top offset.left
如同版友所言
#bdy {margin:0;}之后 d1初始时候，就不会有8px的问题
但是
1.
加入margin-top / margin-left
#d1{
width: 100px;
height: 100px;
background: blue;
margin-top: 20px;
margin-left: 20px;
}
d1 (offset.left , offset.top) = (20 , 20) ....(good)
bdy(offset.left , offset.top) = (0 , 20) ....(WHY?)
body从头到尾没有移动过
为何会从(0,0)变成(0,20)?
为什么只有top往下移动了20px，left却没有改变呢?
2.
例如bootstrap也在css中设定body margin:0;
所以这个观念应是该暗示说: <body> element本身也是一个大方块
像是桌巾一样盖著整张桌子一样
body涵盖的面积是整个页面
而其他所有<div> <p> <h>等element则像是桌巾上的餐盘餐具
我这样的想法对吗?
感谢
作者: Luos (Soul) 2014-07-08 17:34:00
Css的世界是充满奥妙的
作者: Rplus (R+) (9527) 2014-07-09 01:55:00
margin-top 的关系
作者: No (you stay there) 2014-07-09 02:07:00
关键字是 Collapsing margins当parent没有设定padding或border，而child有设定垂直margin时child的垂直margin会套用到parent去更正: 垂直margin -> margin-top
作者: fire231 (Bloodmors) 2014-07-09 02:56:00
2. > 你可以这样想没错，所以就是摆放餐具。
作者: leochen0818 (Leo) 2014-07-11 17:46:00
基本上，我个人是把网页看成一个方形的盒子，任何元素都是
继续阅读
Re: [问题] 请问网站外包所需准备和注意的sdlong[请益] RWD手机版无法正确显示?banana1975Re: [问题] css positioningfire231[问题] css positioningsean72[问题] 如何让div随内容长度向左边增加宽度 leyon[请益] 该如何抉择？恳请前辈指点（文长）purassistRe: [问题] margin/置中/border/outlinefire231[请益] 如何将blogspot的作品缩图加上连结？stu50516Re: [问题] margin/置中/border/outlineilovekebi[问题] margin/置中/border/outlinesean72