俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

CSS盒子模型(Box Model)

 一、背景

  作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻。在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字、图片,很好的排版成美工设计的样式,这时文字图片就如同牛奶需要用盒子装起来,然后可以随意的摆放它的位置。

  网页布局的本质:把网页元素(文字、图片等),放入盒子里面。并利用CSS摆放盒子的过程就是网页布局。就像玩积木,可以随意的摆放想要的效果。

  图片 1

来看张图,体会下盒子模型。

图片 2  

 其实, 所有的标签都会生成一个矩形框(给它添加一个背景色就会看到),称为元素框(element box),它描述了一个标签在网页布局汇总中所占位置的大小,因此,每个盒子除了有自己的大小和位置外,HIA影响其他盒子的大小和位置。

请看盒子之间的位置关系:

图片 3

由上面两张图看出盒子模型主要包括四部分:

  • 内容content
  • 内边距padding
  • 边框border
  • 外边距margin

盒子模型(Box Model)

■ 盒子模型——概念
在网页设计中常用的属性名:内容(content),填充(padding),边框(border),边界(margin),CSS 盒子模式都具备这些属性。
图片 4
细节说明:
☛html 元素都可以看成一个盒子
☛盒子模型的参照物不一样,则使用的 css 属性不一样。比如:从 div1 的角度看,是 margin-right,从 div2 看,则是 margin-left。
☛如果你不希望破坏外观,则尽量使用 margin 布局,因为 padding 可能会改变盒子的大小(相当于这个盒子有弹性),margin 如果过大,盒子内容被挤到盒子外边去,但盒子本身没有变化。
【区块属性】
width 元素的宽度,值有两种,第一种是弹性宽度,值用百分比表示,第二种是固定宽度,值用以px为单位的数值表示.
height 元素的高度,值有两种,第一种是弹性高度,值用百分比表示,第二种是固定高度,值用以px为单位的数值表示.
margin 设置外边距,即区块与周围元素之间或元素与元素之间的间距,它包括了 left||right||top||bottom ,分别设定各个方向对象之间的间距
缩写:{margin:margin-top margin-right margin-bottom margin-left;}按照顺时针的顺序
{margin:100px(上) 90px(右) 30px(下) 90px(左);}
{margin:100px(上) 90px(左右相等90px) 30px(下);}
{margin:100px(上下100px) 90px(左右90px);}
{margin:100px(上下左右都为100px);}
可惜的是,上下边距相等,左右不相等是没有缩写的。若想方便调试建议还是四个参数都写上吧,哈哈
padding 设置内边距,即区块边框与内容之间的间距,同样包括 left||right||top||bottom ,分别设定各个方向的填充距离
缩写或者用法什么的基本都与margin类似

♞有一个值auto,意思是自动。也有居中的效果
元素居中的写法是{margin:100px(上边距) auto 90px(下边距);}或者{margin:100px(上下边距相等) auto;}

【盒子模型(Box Model)】
盒子模型,又称框模型(Box Model),包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。
盒模型一共有两种模式,一种是标准模式(W3C 盒子模型),另一种就是怪异模式(IE 盒子模型)。
图片 5
从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,再看看content的宽度width和高度height,可以看出,content 部分不包含其他部分。
图片 6
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content,再看看content的宽度width和高度height,可以看出和标准 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。
那应该选择哪种盒子模型呢?当然是“标准 W3C 盒子模型”了。怎么样才算是选择了“标准 W3C 盒子模型”呢?很简单,就是在网页的顶部加上 DOCTYPE 声明。如果不加 DOCTYPE 声明,那么各个浏览器会根据自己的行为去理解网页,即 IE 浏览器会采用 IE 盒子模型去解释你的盒子,而 FF(Firefox) 会采用标准 W3C 盒子模型解释你的盒子,所以网页在不同的浏览器中就显示的不一样了。反之,如果加上了 DOCTYPE 声明,那么所有浏览器都会采用标准 W3C 盒子模型去解释你的盒子,网页就能在各个浏览器中显示一致了。
【CSS3的box-sizing属性】
box-sizing语法:box-sizing:content-box || border-box || inherit;
●当设置为box-sizing:content-box时,将采用标准模式解析计算,也是默认模式;
在标准模式下,元素的总宽度=宽度+左padding+右padding+左border+右border+左margin+右margin
元素的总高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
●当设置为box-sizing:border-box时,将采用怪异模式解析计算;
在怪异模式下,元素的总宽度= width + margin(左右)(即width已经包含了padding和border值)

举例来说:
一个盒子的 margin 为 20px,border 为 1px,padding 为 10px,content 的宽为 200px、高为 50px,
假如用标准 w3c 盒子模型解释,那么这个盒子需要占据的位置为:
总宽度:20*2+1*2+10*2+200=262px、总高度:20*2+1*2*10*2+50=112px,
盒子的实际大小为:宽 1*2+10*2+200=222px、高 1*2+10*2+50=72px;
假如用ie 盒子模型,那么这个盒子需要占据的位置为:
总宽度:20*2+200=240px、总高度 20*2+50=70px,
盒子的实际大小为:宽 200px、高 50px。
✪如下图所示,在相同条件下,元素#element{width:208px;padding:32px;border:16px;}
当设置为box-sizing:content-box时,在标准模式下,由于content不包含padding和border,所以填充后就变大了。
但是当设置为box-sizing:border-box时,在怪异模式下,由于content已经包含了padding和border,所以填充的话可以看到里面的文本反而变小了。
图片 7

 

二、下面具体介绍border/padding/margin/content

盒子边框(border)

语法

border:border-width border-style border-color;

边框样式:border-style

  • none: 没有边框,即忽略所有边框的宽度(默认值)
  • solid:单实线(最常用)
  • dashed:虚线
  • dotted:点线
  • double:双实线

可以单独设置给某一边的边框:

  • 上边框: border-top: 宽度 样式 颜色;
  • 下边框: border-bottom: 宽度 样式 颜色;
  • 左边框: border-left: 宽度 样式 颜色;
  • 右边框: border-right: 宽度 样式 颜色;

圆角边框(border-radius)

语法格式:

 /*从左上角开始,顺时针排序*/
border-radius: 左上角  右上角  右下角  左下角;    

案例:

<style>
        div{
            width:200px;
            height: 200px;
            border:1px solid red;
        }
        div:first-child{
            border-radius:20px;
        }
        div:nth-child(2){
            border-radius: 10px  40px;
        }
        div:nth-child(3){
            border-radius: 10px  40px 80px;
        }
        div:nth-child(4){
            border-radius: 10px  40px 80px 100px;
        }
        div:nth-child(5){
            border-radius: 50%;
        }
        div:nth-child(6){
            border-radius: 100px;
            height:100px;
        }
</style>

图片 8

内边距(padding)

padding 是指边框与内容之间的间距。有上内边距(border-top)、右内边距(border-right)、下内边距(border-bottom)、左内边距(border-left).

注意:padding 后面跟几个值表示的意思不一样。

值的个数 

  • 1个值 padding:上下左右边距 比如padding: 3px; 表示上下左右都是3像素
  • 2个值 padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
  • 3个值 padding:上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
  • 4个值 padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针

外边距(margin)

margin属性用于设置外边距。 设置外边距会在元素之间创建“空白”, 这段空白通常不能放置其他内容。

  • margin-top:上外边距
  • margin-right:右外边距
  • margin-bottom:下外边距
  • margin-left:上外边距
  • margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。值的个数也遵循内边距的规律,请参考上面内边距的表格。

外边距实现盒子居中

这是外边距的一个重要用法。

实现盒子水平居中,需要两个条件:

  1. 必须是块级元素。
  2. 盒子必须指定了宽度。

然后给盒子的左右外边距都设置为auto,就可使盒子水平居中。

示例:

.header{ width:960px; margin:0 auto;}

示例:

div{
    width: 300px;
    height: 300px;
    margin:30px auto;
    padding:20px;
    background-color: pink;
    border:1px solid #000;
}

图片 9

CSS3盒模型

  CSS3中可以通过box-sizing来指定盒模型,content-box和border-box,指定的盒模型不同,计算盒子大小的方式就不同。

两种情况:

  1. box-sizing:content-box;盒子大小为 width + padding + border content-box:此值为其默认值(见上图盒子),其让元素维持W3C的标准Box Mode
  2. box-sizing: border-box ; 盒子大小为 width 就是说 padding 和 border 是包含到width里面的

注:上面标注的width指的是css属性中设置的width:length, content的值会自动调整。

div:first-child {
    width: 200px;
    height: 200px;
    background-color: pink; 
    box-sizing: content-box;  /*  就是以前的标准盒模型  w3c */
    padding: 10px;
    border: 15px solid red;
    /* 盒子大小为 width + padding + border=200+10+10+15+15   content-box:此值为其默认值,其让元素维持W3C的标准Box Mode */
}
div:last-child {
    width: 200px;
    height: 200px;
    background-color: purple;
    padding: 10px;
    box-sizing: border-box;   /* padding border  不撑开盒子 */
    border: 15px solid red;
    /* margin: 10px; */
    /* 盒子大小为 width=200    就是说  padding 和 border 是包含到width里面的 */
}

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:CSS盒子模型(Box Model)

您可能还会对下面的文章感兴趣: