边距，方框和定位 [英] margins, boxes and positioning
问题描述
我试图一般地了解如何使用CSS制作各种大小的网格。\\ b
框。我的第一个想法是制作一个盒子，我可以看到边缘，填充，边框和内容的边缘，并理解为什么他们的b $ b有他们所做的区域。我遇到了麻烦...
我在2.1规范中读到，高度和宽度属性指定了
的高度和宽度的方框由适用的元素生成，并且相对于高度和宽度获取
百分比值。
盒子的包含块。
在盒子模型章节中，我觉得在高度和
块的宽度是指盒子内容边缘内的区域，
以及填充，边距等延伸到该区域之外。
只有一个案例，我确定
a包含块的高度和宽度，这是当包含块是视口时
（我'' m暂时忽略分页媒体）。到目前为止，我已经提出了
的唯一方法来创建一个相对于包含
块的高度和宽度的盒子，而不是块，是绝对使用
定位块级元素，所有顶部，右侧，底部和左侧
指定（IE似乎不支持）。例如（将
方括号更改为尖括号）：
[？xml version =" 1.0"？>
[！DOCTYPE html PUBLIC" - // W3C // DTD XHTML 1.1 // EN"
" http：//www.w3.org/TR/xhtml11/DTD/xhtml11 .dtd">
[html> [！ -
- > [head> [！ -
- > ; [title> One Box [/ title> [！ -
- > [style type =" text / css">
body {
背景颜色：绿色;
}
＃div1 {
位置：绝对值;
顶部：5px;
右：5px;
底部：5px;
剩余：5px;
background-color：white;
}
＃div11 {
position：absolute;
top：5px;
右：5px;
底部：5px;
左：5px;
背景颜色：紫色;
}
＃div111 {
职位：绝对;
顶部：5px;
右：5px;
底部：5px;
剩余：5px;
背景颜色：黄色;
}
[/ style> [！ -
- > [/ head> [！ -
- > [body> [！ -
- > [div id =" div1"> [！ -
- > [div id =" div11"> [！ -
- > [DIV ID = QUOT; div111"> [ -
- >！[p为H. essss EEE呜tititttt nononnnn UUU EEE tititttt essss ngggg EEE
TT EEE nononnnn EEE UUU UUU MMMM essss FF FF essss EEE EEE UUU EEE EEE
EEE UUU MMMM EEE EEE UUU UUU UUU UUU UUU UUU UUU UUU。 Eskss tt rnn eskss
lslss tertrr innnioninn ineiee eskss tertrr tertrr oeoileiee oeoileiee
mhmm ngigg ff tef ff ineiee mhmm eskss rnn odd oee yuu ecescss oeoileiee
ngig tee llill tee mhmm yuu mhmm uee yuu yuu uee yuu yuu。 Sllll
llxtitittty adrdddy nnnnne llxtitittty sllll uiiil llxtitittty
的llxtitittty neleeed oou sllll HHE llxtitittty LLD oou eeem uiiil
meees sllll meees HHE uiiil sllll tnnng sllll elilmllle oou uiiil sllll
hhe oou sou oou tnnng oou oou oou oou oou。 Dfntoiooon ilxbltittty ieleeed
UUN ilxbltittty ntocooon它deaavnaeteees eeem HHE ieleeed HHE它HHE
ilxbltittty ntocooon NNE ieleeed它UUN sllll oou HHE oou eeem tnnng
uiiil eelmllle oou hhe ehe ehe eeem uiiil oou tnnng oou oou oou oou。
Iuiiiinn tt ff tee aaaaayy tee iiill odd tee tt iuiiiinn iiill ff
rccccss tt uee uee rccccss iiigg iiiiee UEE iiciiiiee UEE OEE RNN UEE
三通HHMM UEE iiigg UEE UEE UEE三通UEE UEE UEE UEE悠悠[/ p为H.！[ -
- > [/ div> [！ -
- > [/ div> [！ -
- > [/ div> [！ -
- > [/ body> [！ -
- > [/ html>
如果我改变样式有一个div11各方面的5px余量和
div111：
＃div1 {
位置：绝对;
顶部：15px;
右：15px;
底部：15px;
剩余：15px;
背景色：白色;
}
＃div11 {
p假设：绝对;
顶部：0;
左：0;
身高：100％;
宽度：100％;
保证金：5px;
背景颜色：紫色;
}
＃div111 {
位置：绝对;
顶部：0;
左：0;
身高：100％;
宽度：100％;
保证金：5px;
背景颜色：黄色;
}
规则＃6：
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced -width
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height
浏览器应该在div11和div111中求解底部和右边。
我在mozilla 1.7中得到的似乎是div11和div111的高度为
，宽度等于div1的高度和宽度，但有边距
向外延伸5px。
这两个例子都没有错误地传递了w3c css验证器。
因为IE似乎没有支持在绝对定位的块级非替换元素上指定left和right或top和
bottom，以及
，因为height and width和一个盒子里面没有它的边缘，怎么我可以创建一个特别是n像素更窄更短的盒子？b
$ b相对跨浏览器的方式？
顺便说一句，我希望解决方案不会涉及使用浮点数，因为
在我看来，浮点数应该是对于漂浮而且我担心那里有b $ b可能不会出现黑客浮动问题以实现非浮动
相关布局。
如何在不使用左右和上下两个的情况下，制作一个比n的像素更窄更短的盒子？
包含块？ br />
Secret Guy写道：如何制作一个n像素比它包含块更窄更短的盒子？ ，不使用左右和上下两个？
在包含bl上设置填充ock。
-
Brian（删除" .invalid"给我发电子邮件）
http://www.tsmchughs.com/
好吧，对我来说很困惑的部分是规格块的概念
大小。我的意思是大小真的是在我看来像是盒子的大小：它是内容，它是填充，边框和边距。虽然
规范调用了块的大小，但是内容包围的区域是
边缘，填充，边框和边距延伸到其外部。
http：//www.w3。 org / TR / CSS21 / box.html＃box-dimensions
http://www.w3.org/TR/CSS21/visudet.h...replaced-width
http://www.w3.org/TR/CSS21/ visudet.h ... eplaced-height
因此，根据我对规格的了解，以及我在mozilla中看到的内容，
添加填充到包含块的结果是内部框
与包含块相比在视觉上更小+它的填充
（也不是更小）使用spec的块高/ wi的概念dth）。
如果你看原始消息中的html，在mozilla和
中使用样式：
＃div1 {
位置：绝对;
顶部：20px;
右：20px;
底部：20px;
剩余：20px;
背景颜色：白色;
}
＃ div11 {
位置：绝对;
顶部：0;
左：0;
身高：100％ ;
宽度：100％;
保证金：5px;
填充：5px;
背景颜色：紫色;
}
＃div111 {
位置：绝对;
顶部：0;
剩余
：0;
身高：100％;
宽度：100％;
保证金：5px;
背景颜色：黄色;
}
你应该看到我看到的是div11在视觉上大于
它包含块，而div111并不明显小于包含块的
。
I''m trying to understand generally how to make a grid of variously sized
boxes using CSS. The first idea I had was to make a box where I can see
the margin, padding, border and content edges, and understand why they
have the areas that they do. And I''m having trouble...
I read in the 2.1 spec, that the height and width properties specify the
height and width of boxes generated by applicable elements, and that a
percentage value is taken relative to the "height and width" of the
box''s containing block.
In the box model chapter, it seems to me to say that the height and
width of a block refers to the area within the content edge of a box,
and that padding, margin etc. extend outside of that.
There''s only one case where I feel certain about the height and width of
a containing block, which is when the containing block is the viewport
(I''m ignoring paged media for now). And, the only way I''ve come up with
so far to create a box with height and width relative to the containing
block, rather than the content of the block, is to use absolutely
positioned block-level elements with all of top, right, bottom and left
specified (which IE doesn''t seem to support). For example (change the
square brackets to angle brackets):
[?xml version="1.0"?>
[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
[html>[!--
-->[head>[!--
-->[title>One Box[/title>[!--
-->[style type="text/css">
body {
background-color: green;
}
#div1 {
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
background-color: white;
}
#div11 {
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
background-color: purple;
}
#div111 {
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
background-color: yellow;
}
[/style>[!--
-->[/head>[!--
-->[body>[!--
-->[div id="div1">[!--
-->[div id="div11">[!--
-->[div id="div111">[!--
-->[p>Essss eee oooo tititttt nononnnn uuu eee tititttt essss ngggg eee
tt eee nononnnn eee uuu uuu mmmm essss ff essss ff eee eee uuu eee eee
eee uuu mmmm eee eee uuu uuu uuu uuu uuu uuu uuu uuu. Eskss tt rnn eskss
lslss tertrr innnioninn ineiee eskss tertrr tertrr oeoileiee oeoileiee
mhmm ngigg ff tee ff ineiee mhmm eskss rnn odd oee yuu ecescss oeoileiee
ngigg tee llill tee mhmm yuu mhmm uee yuu yuu uee yuu yuu. Sllll
llxtitittty adrdddy nnnnne llxtitittty sllll uiiil llxtitittty
llxtitittty of neleeed oou sllll hhe llxtitittty lld oou eeem uiiil
meees sllll meees hhe uiiil sllll tnnng sllll elilmllle oou uiiil sllll
hhe oou sse oou tnnng oou oou oou oou. Dfntoiooon ilxbltittty ieleeed
uun ilxbltittty ntocooon it deaavnaeteees eeem hhe ieleeed hhe it hhe
ilxbltittty ntocooon nne ieleeed it uun sllll oou hhe oou eeem tnnng
uiiil eoplmllle oou hhe sllll hhe eeem uiiil oou tnnng oou oou oou oou.
Iuiiiinn tt ff tee aaaaayy tee iiill odd tee tt iuiiiinn iiill ff
rccccss tt uee uee rccccss iiigg iiiiee uee iiciiiiee uee oee rnn uee
tee hhmm uee iiigg uee uee uee tee uee uee uee uee yuu yuu.[/p>[!--
-->[/div>[!--
-->[/div>[!--
-->[/div>[!--
-->[/body>[!--
-->[/html>
If I change the styles to have a 5px margin on all sides of div11 and
div111:
#div1 {
position: absolute;
top: 15px;
right: 15px;
bottom: 15px;
left: 15px;
background-color: white;
}
#div11 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 5px;
background-color: purple;
}
#div111 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 5px;
background-color: yellow;
}
by rule #6 in:
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-width
http://www.w3.org/TR/CSS21/visudet.html#abs-non-replaced-height
the browser should solve for bottom and right, in div11 and div111.
What I get in mozilla 1.7 appears to be div11 and div111 having height
and width equal to the height and width of div1, but with margins
extending outside by 5px.
Both of the examples pass the w3c css validator without errors.
Since IE doesn''t seem to support specifying left and right or top and
bottom, on absolutely positioned block-level non-replaced elements, and
since the "height and width" of a box doesn''t include it''s margins, how
can I create boxes that are specfically n pixels narrower and shorter
than their containing blocks, in a relatively cross-browser way?
Incidentally, I''m hoping a solution will not involve using float, since
it seems to me that float should be for floating and I worry that there
might be unforseen problems with hacking float to achieve a non-float
related layout.解决方案How can I make a box that is n pixels narrower and shorter than it''s
containing block, without using left and right and top and bottom?
Secret Guy wrote:How can I make a box that is n pixels narrower and shorter than it''s
containing block, without using left and right and top and bottom?
set padding on the containing block.
--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Well, ok part of the confusion for me is the spec''s notion of block
size. What I mean by size really is what looks to me like the size of
the box: it''s content, and it''s padding, border and margin. While the
spec calls the size of the block, the area surrounded by the content
edge, with the padding, border and margin extending outside of that.
http://www.w3.org/TR/CSS21/box.html#box-dimensions
http://www.w3.org/TR/CSS21/visudet.h...replaced-width
http://www.w3.org/TR/CSS21/visudet.h...eplaced-height
So, from my reading of the spec, and from what I see in mozilla, the
result of adding padding to the containing block is that the inner box
is not visually smaller compared to the containing block + it''s padding
(nor is it smaller using the spec''s notion of block heigh/width).
If you look at the html I have in the original message, in mozilla and
use the styles:
#div1 {
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
background-color: white;
}
#div11 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 5px;
padding: 5px;
background-color: purple;
}
#div111 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 5px;
background-color: yellow;
}
you should see what I see which is that div11 is visually larger than
it''s containing block and div111 is not visibly smaller than it''s
containing block.
这篇关于边距，方框和定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
