首頁 > web前端 > html教學 > 几个容易出错的css盒子模型细节 - jerrylsxu

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

WBOY
發布: 2016-05-21 08:54:31
原創
1588 人瀏覽過

css是前端必须掌握的技能之一。其中的box模型,如图所示:

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

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

来看以下的例子:

复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

#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;

}

登入後複製
复制代码
 

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

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

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

复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

#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;

}

登入後複製
复制代码
 

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

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

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

复制代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

#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;

}

登入後複製
复制代码
 

   

通过点击上面的按钮,可以得到以下结论:

  • 元素自身的参考点是最外围的盒子,即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

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

#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;

}

登入後複製
复制代码
 
 
background-origin:      
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板