CSS总结梳理_02盒子模型

一、盒子模型简介

 

CSS将所有的元素设置为了一个矩形的盒子，相当于在一个大的矩形的页面中分散着小的矩形，小的矩形中又能嵌套更小的矩形。

每一个盒子内容区（content）、内边距（padding）、边框（border）、外边距（margin）组成。

定义元素的宽高时默认为内容区的宽高，增加内边距、边框和外边距不会影响内容区的尺寸，但是会增加元素框的总尺寸。

盒子的可见框的大小，由内容区 内边距 和 边框共同决定，所以在计算盒子大小时，需要将这三个区域加到一起计算。

二、内边距（padding）

定义：内容区和边框之间的距离是内边距

用法：

/* 
上内边距设置为100px
左内边距设置为100px
右内边距设置为100px
下内边距设置为100px
 */
padding-top: 100px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 100px;
/*
padding不加方向可以用来指定四个方向的边框的宽度
一个值：上下左右 
两个值：上下 左右   
三个值：上 左右 下
四个值：上 右 下 左 
*/
padding:100px;
padding:100px 50px;
padding:100px 100px 100px;
padding:100px 100px 100px 100px;;

内边距的设置会影响到盒子的大小

背景颜色会延伸到内边距上

内边距的百分比数值

/*下面这两种写法在父元素不变的状态下实际的效果是一样的*/
父元素{width=100px}
子元素{padding: 10%;}
子元素{padding: 10px;}

 

内边距属性接受长度值或百分比值，百分数值是相对于其父元素的 width 计算的，与父元素的heigth无关，当父元素的width改变，它也会进行改变

三、外边距（margin）

定义：围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

margin 属性接受任何长度单位，可以是像素、英寸、毫米或 em。

用法：与内边距的用法基本一致，外边距可以设置为auto，一般情况下只对左右外边距生效，上下外边距设为auto时默认为0。

关于元素的方向的布局

元素在其父元素中水平方向的位置由以下几个属性共同决定“

• margin-left
• border-left
• padding-left
• width
• padding-right
• border-right
• margin-right

 一个元素在其父元素中，水平布局必须要满足以下的等式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度 （必须满足）

程序会自动使这个等式满足，其中有width、margin-left、maring-right可以被设置为auto或负值(反方向移动)。

等式的运行流程

• 没有auto，自动调整margin-right值以使等式成立
• 一个auto，自动调整为auto的那个值以使等式成立
• 两个auto
  • width和其中一个margin设置为auto，则width会调整到最大，设置为auto的margin会自动为0
  • 两个margin都设置为auto，则 margin-right = margin-left，以使等式成立，利用这个特点来使一个元素在其父元素中水平居中
• 三个auto，则margin都是0，调整width以使等式成立

外边距的合并

当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

 

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

• 如果相邻的外边距一正一负，则取两者的和
• 如果相邻的外边距都是负值，则取两者中绝对值较大的

 

 

当一个元素包含在另一个元素（父子元素）中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

• 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）

四、边框（border）

定义：围绕元素内容和内边距的一条或多条线。

包含元素边框的样式（style）、宽度（width）和颜色（color），其中样式必须制定，否则会无法显示。

用法：

元素{
border-style: solid dotted dashed double;
border-width: 10px 10px 10px 10px;
border-color: orange red yellow green;
/*与外边距的用法基本一致，不同的是需要指定三个属性，其中style必须指定*/
}

样式（border-style）

• solid 表示实线
• dotted 点状虚线
• dashed 虚线
• double 双线
•  border-style的默认值是none 表示没有边框

border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求

border 指定四边属性

border-top 指定上边框属性

border-right 指定右边框属性

border-bottom 指定下边框属性

border-left 指定左边框属性

border: solid 10px orange; 
border-top: 10px solid red;
border-left: 10px solid red;
border-bottom: 10px solid red;

五、行内元素的盒模型

行内元素不支持设置width和height

行内元素可以设置padding、border、margin，但是垂直方向上不会影响页面的布局

如果想让行内元素与块元素一致 可以使用dispaly属性。

可选值：

• inline 将元素设置为行内元素
• block 将元素设置为块元素
• inline-block 将元素设置为行内块元素（行内块，既可以设置宽度和高度又不会独占一行）
• table 将元素设置为一个表格
• none 元素不在页面中显示(可以用来生成下拉框)