|
[tr][td] css是前端必须掌握的技能之一。其中的box模型，大体就是border、margin、padding和content，概念挺好理解。但当盒子模型与其他属性一块使用时产生的现象，或许您还难以回答上来。下面来看看几个容易搞错的css盒子模型细节。
问题一：嵌套块级元素时，子元素margin的参考标准是？具体来说就是父元素的content-box，padding-box还是border-box？ 来看以下的例子： [*]#box3 [*] { [*] width:400px; [*] height:400px; [*] margin:20px; [*] padding:20px; [*] border:20px solid; [*] background-color:#ccc; [*] overflow:hidden; [*] } [*] #box3_3 [*] { [*] width:200px; [*] height:200px; [*] margin:20px; [*] padding:20px; [*] border:20px solid #0f0; [*] background-color:#f00; [*] } 复制代码 [url=] 图片：copycode.gif  [/url]图片：copycode.gif 可以清楚看到，子元素margin以包含元素content-box为参考 问题二：overflow:hidden隐藏的是超出哪里的部分呢？具体来说就是超出content-box，padding-box还是margin-box会被隐藏？ 依然来看一个例子，css如下： [*] #box1 [*] { [*] width:100px; [*] height:100px; [*] margin:20px; [*] padding:20px; [*] border:20px solid; [*] background-color:#ccc; [*] overflow:hidden; [*] } [*] #box1_1 [*] { [*] width:200px; [*] height:200px; [*] background-color:#f00; [*] } 复制代码 图片：copycode.gif 通过以上例子可以知道。overflow:hidden，隐藏超出padding-box的部分 问题三：position:absolute定位参考点是什么？ 我们都知道，当给一个元素应用position:absolute绝对定位后。会以最近拥有定位属性的父元素为定位参考。同时可以通过left和top指定相对父元素的偏移距离。那么这个左上角具体是指父元素哪里呢？元素本身又以哪个点来定位呢？ [*] #box2 [*] { [*] position:relative;; [*] width:400px; [*] height:400px; [*] margin:20px; [*] padding:20px; [*] border:20px solid; [*] background-color:#ccc; [*] } [*] #box2_2 [*] { [*] position:absolute; [*] left:auto; [*] top:auto; [*] width:100px; [*] height:100px; [*] padding:20px; [*] border:10px solid #0f0; [*] background-color:#f00; [*] } 复制代码 图片：copycode.gif 子元素有margin 子元素无margin left/top为默认值 left/top为0 通过点击上面的按钮，可以得到以下结论： •元素自身的参考点是最外围的盒子，即margin-box，无margin则为border-box，以此类推。 •left/top指定值后，参照父元素的padding-box左上角 •left/top为默认值，子元素还在原来的位置上，即相对于父元素的content-box左上角 问题四：元素的背景覆盖到哪个区域，border-box？padding-box还是margin-box？ 这里要区分background-color和background-image两种情况。 •1.对于背景颜色，颜色会填满border-box。 •2.对于背景图片，默认会填充padding-box。左上方从padding-box的区域开始填充，右侧和下侧会超出到border-box的区域，但不会超出到margin-box •3.在css3中，可以通过background-originr更改背景图片的填充区域 来看以下css， [*] #box4 [*] { [*] width:100px; [*] height:100px; [*] margin:20px; [*] padding:20px; [*] border:20px dotted; [*] background-color:#ccc; [*] overflow:hidden; [*] } [*] #box5 [*] { [*] width:400px; [*] height:300px; [*] margin:20px; [*] padding:20px; [*] border:20px dotted; [*] background-color:lightblue; [*] background-image:url('http://images.cnitblog.com/i/207603/201404/151302359783891.png'); [*] background-repeat:no-repeat; [*] overflow:hidden; [*] } 复制代码 图片：copycode.gif [/td][/tr] |
|
