CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 几个容易出错的css盒子模型细节

几个容易出错的css盒子模型细节

      css是前端必须掌握的技能之一。其中的box模型,大体就是border、margin、padding和content,概念挺好理解。但当盒子模型与其他属性一块使用时产生的现象,或许您还难以回答上来。下面来看看几个容易搞错的css盒子模型细节。

      问题一:嵌套块级元素时,子元素margin的参考标准是?具体来说就是父元素的content-box,padding-box还是border-box?

来看以下的例子:

  1. #box3
  2.         {
  3.             width:400px;
  4.             height:400px;
  5.             margin:20px;
  6.             padding:20px;
  7.             border:20px solid;
  8.             background-color:#ccc;
  9.             overflow:hidden;
  10.         }
  11.         #box3_3
  12.         {
  13.             width:200px;
  14.             height:200px;
  15.             margin:20px;
  16.             padding:20px;
  17.             border:20px solid #0f0;
  18.             background-color:#f00;
  19.         }
复制代码[url=][/url]




可以清楚看到,子元素margin以包含元素content-box为参考

问题二:overflow:hidden隐藏的是超出哪里的部分呢?具体来说就是超出content-box,padding-box还是margin-box会被隐藏?

依然来看一个例子,css如下:

  1. #box1
  2.         {
  3.             width:100px;
  4.             height:100px;
  5.             margin:20px;
  6.             padding:20px;
  7.             border:20px solid;
  8.             background-color:#ccc;
  9.             overflow:hidden;
  10.         }
  11.         #box1_1
  12.         {
  13.             width:200px;
  14.             height:200px;
  15.             background-color:#f00;
  16.         }
复制代码



通过以上例子可以知道。overflow:hidden,隐藏超出padding-box的部分

问题三:position:absolute定位参考点是什么?

      我们都知道,当给一个元素应用position:absolute绝对定位后。会以最近拥有定位属性的父元素为定位参考。同时可以通过left和top指定相对父元素的偏移距离。那么这个左上角具体是指父元素哪里呢?元素本身又以哪个点来定位呢?

  1. #box2
  2.         {
  3.             position:relative;;
  4.             width:400px;
  5.             height:400px;
  6.             margin:20px;
  7.             padding:20px;
  8.             border:20px solid;
  9.             background-color:#ccc;
  10.         }
  11.         #box2_2
  12.         {
  13.             position:absolute;
  14.             left:auto;
  15.             top:auto;
  16.             width:100px;
  17.             height:100px;
  18.             padding:20px;
  19.             border:10px solid #0f0;
  20.             background-color:#f00;
  21.         }
复制代码






子元素有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,


  1.         #box4
  2.         {
  3.             width:100px;
  4.             height:100px;
  5.             margin:20px;
  6.             padding:20px;
  7.             border:20px dotted;
  8.             background-color:#ccc;
  9.             overflow:hidden;
  10.         }
  11.         #box5
  12.         {
  13.             width:400px;
  14.             height:300px;
  15.             margin:20px;
  16.             padding:20px;
  17.             border:20px dotted;
  18.             background-color:lightblue;
  19.             background-image:url('http://images.cnitblog.com/i/207603/201404/151302359783891.png');
  20.             background-repeat:no-repeat;
  21.             overflow:hidden;
  22.         }
复制代码





【几个容易出错的css盒子模型细节】相关文章

1. 几个容易出错的css盒子模型细节

2. CSS3灵活的盒子模型(Flexible Box Module)–1

3. CSS3灵活的盒子模型(Flexible Box Module)–2

4. CSS3灵活的盒子模型(Flexible Box Module)–1

5. CSS3灵活的盒子模型(Flexible Box Module)–2

6. Web开发和设计上容易被忽视的8个错误

7. 网络公司Juniper:Android手机比iPhone更容易中病毒

8. Webshims Lib--不错的HTML5类库

9. 10个帮助你快速调试和排错的小技巧

10. DIV+CSS编码常见错误 你占了几个?

本文来源:https://www.51html5.com/a1012.html

点击展开全部

﹝几个容易出错的css盒子模型细节﹞相关内容

「几个容易出错的css盒子模型细节」相关专题

其它栏目

也许您还喜欢