几个容易出错的css盒子模型细节
查看: 3665|
评论: |原作者: nana|来自:
摘要: css是前端必须掌握的技能之一。其中的box模型，大体就是border、margin、padding和content，概念挺好理解。
& && &css是前端必须掌握的技能之一。其中的box模型，大体就是border、margin、padding和content，概念挺好理解。但当盒子模型与其他属性一块使用时产生的现象，或许您还难以回答上来。下面来看看几个容易搞错的css盒子模型细节。
& && &问题一：嵌套块级元素时，子元素margin的参考标准是？具体来说就是父元素的content-box，padding-box还是border-box？
来看以下的例子：
& && && && &width:400
& && && && &height:400
& && && && &margin:20
& && && && &padding:20
& && && && &border:20
& && && && &background-color:#
& && && && &overflow:
& && &&&#box3_3
& && && && &width:200
& && && && &height:200
& && && && &margin:20
& && && && &padding:20
& && && && &border:20px solid #0f0;
& && && && &background-color:#f00;
& && &&&}复制代码[url=][/url]
可以清楚看到，子元素margin以包含元素content-box为参考
问题二：overflow:hidden隐藏的是超出哪里的部分呢？具体来说就是超出content-box，padding-box还是margin-box会被隐藏？
依然来看一个例子，css如下：
& && && && &width:100
& && && && &height:100
& && && && &margin:20
& && && && &padding:20
& && && && &border:20
& && && && &background-color:#
& && && && &overflow:
& && &&&#box1_1
& && && && &width:200
& && && && &height:200
& && && && &background-color:#f00;
& && &&&}复制代码
通过以上例子可以知道。overflow:hidden，隐藏超出padding-box的部分
问题三：position:absolute定位参考点是什么？
& && &我们都知道，当给一个元素应用position:absolute绝对定位后。会以最近拥有定位属性的父元素为定位参考。同时可以通过left和top指定相对父元素的偏移距离。那么这个左上角具体是指父元素哪里呢？元素本身又以哪个点来定位呢？
& && && && &position:;
& && && && &width:400
& && && && &height:400
& && && && &margin:20
& && && && &padding:20
& && && && &border:20
& && && && &background-color:#
& && &&&#box2_2
& && && && &position:
& && && && &left:
& && && && &top:
& && && && &width:100
& && && && &height:100
& && && && &padding:20
& && && && &border:10px solid #0f0;
& && && && &background-color:#f00;
& && &&&}复制代码
子元素有margin&&子元素无margin&&left/top为默认值&&left/top为0
通过点击上面的按钮，可以得到以下结论：
o元素自身的参考点是最外围的盒子，即margin-box，无margin则为border-box，以此类推。
oleft/top指定值后，参照父元素的padding-box左上角
oleft/top为默认值，子元素还在原来的位置上，即相对于父元素的content-box左上角
问题四：元素的背景覆盖到哪个区域，border-box？padding-box还是margin-box？
这里要区分background-color和background-image两种情况。
o1.对于背景颜色，颜色会填满border-box。
o2.对于背景图片，默认会填充padding-box。左上方从padding-box的区域开始填充，右侧和下侧会超出到border-box的区域，但不会超出到margin-box
o3.在css3中，可以通过background-originr更改背景图片的填充区域
来看以下css，
& && &&&#box4
& && && && &width:100
& && && && &height:100
& && && && &margin:20
& && && && &padding:20
& && && && &border:20
& && && && &background-color:#
& && && && &overflow:
& && &&&#box5
& && && && &width:400
& && && && &height:300
& && && && &margin:20
& && && && &padding:20
& && && && &border:20
& && && && &background-color:
& && && && &background-image:url('/i/404/891.png');
& && && && &background-repeat:no-
& && && && &overflow:
& && &&&}复制代码
刚表态过的朋友 ()
复制代码&!DOCTYPE html&
&meta charset=&utf-8&&
&title&HTML5, CSS3 and JavaScript demo&/title&
height:300
padding:15
background-image:url(bg.jpg);}
height:300
padding:15
background-color}
&!-- Start your code here --&
&div class=&box1&&There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really&/div&
&div class=&box2&&background-colored for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really&/div&
&!-- End your code here --&
背景色background-color会覆盖border。
QQ图片53.jpg (96.93 KB, 下载次数: 7)
背景颜色和背景图片都会填满border-box。
23:16 上传
扫一扫 HTML5中国官方微信
Powered by扫二维码下载作业帮
拍照搜题，秒出答案，一键查看所有搜题记录
下载作业帮安装包
扫二维码下载作业帮
拍照搜题，秒出答案，一键查看所有搜题记录
CSS+DIV写盒子模型图请高手帮我用HTML写一个盒子模型图出来!DIV不要用绝对定位!
扫二维码下载作业帮
拍照搜题，秒出答案，一键查看所有搜题记录
网页盒子模型存在两种：1：标准W3C盒子模型； 2：IE盒子模型（IE浏览器默认的模型）.在两种不同模型网页里,定义了相同CSS属性的元素显示效果是不一样的,下面就用公式来区分这两种不同的盒子模型.1：标准W3C盒子模型宽=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right)高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom) 2：IE盒子模型宽=width+(border-left)+(border-right) 高=height+(border-top)+(border-bottom) 该模型是IE浏览器默认的盒子模型,当然也可以对其进行更改,在页面最上方加如下代码：1
为您推荐：
其他类似问题
扫描下载二维码}