CSS盒子模型

• CSS盒模型 (Box Model)规定了元素框处理元素内容、内边距、边框和外边距 的⽅式。
• 元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
• 提示 ：背景应⽤于由内容和内边距、边框组成的区域。
• 内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由⽤户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进⾏，也可以使⽤通⽤选择器对所有元素进⾏设置
• 在 CSS 中，width 和 height 指的是内容区域的宽度和⾼度。增加内边距、边框和外边距不会影响内容区域的尺⼨，但是会增加元素框的总尺⼨。

一、CSS内边距

元素的内边距在边框和内容区之间。CSS padding 属性定义元素边框与元素内容之间的空⽩区域，CSS padding 属性定义元素的内边距。padding 属性接受⻓度值或百分⽐值，但不允许使⽤负值。

• 按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使⽤不同的单位或百分⽐值h1 {padding: 10px 0.25em 2ex 20%;}等价于

h1 {
 padding-top: 10px;上
 padding-right: 0.25em;右
 padding-bottom: 2ex;下
 padding-left: 20%;左
 }

• h1 元素的各边都有 10 像素的内边距，h1 {padding: 10px;}

1. 内边距的百分⽐数值
   前⾯提到过，可以为元素的内边距设置百分数值。百分数值是相对于其⽗元素的 width 计算的，这⼀点与外边距⼀样。所以，如果⽗元素的 width 改变，它们也会改变。下⾯这条规则把段落的内边距设置为⽗元素 width 的 10%p {padding: 10%;}
2. 如果⼀个段落的⽗元素是 div 元素，那么它的内边距要根据 div 的 width 计算。

<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>

3. 上下内边距与左右内边距⼀致；即上下内边距的百分数会相对于⽗元素宽度设置，⽽不是相对于⾼度。
4. CSS 内边距属性
   

二、CSS 边框

一般是按照top-right-bottom-left 的顺序设置，顺时针旋转
元素的边框 (border) 是围绕元素内容和内边距的⼀条或多条线。CSS border 属性允许规定元素边框的样式、宽度和颜⾊。这也是边框的三个方面。

• border-style 属性全部可能的值如下:
  
• 定义单边样式

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}
p{
border-top-style
border-right-style
border-bottom-style
border-left-style
}
div标签要显示边框必须指定style
注意：如果要使⽤第⼆种⽅法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。

边框样式的简写属性
border-style: solid; ，去掉top、right等修饰

• 边框的宽度
  border-width 属性为边框指定宽度，为边框指定宽度有两种方法：可以指定⻓度值，⽐如 2px 或 0.1em；或者使⽤ 3 个关键字之⼀，它们分别是 thin 、medium（默认值） 和 thick。

p {border-style: solid; border-width: 15px 5px;}值复制的方法
p {border-style: solid; border-width: 15px 5px 15px 5px;}
p {
 border-style: solid;
 border-top-width: 15px;
 border-right-width: 5px;
 border-bottom-width: 15px;
 border-left-width: 5px;
 }
 以上俩个是等价的

• 边框宽度的简写属性

• border-width: 10px;

• 没有边框
  由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果希望边框出现，就必须声明⼀个边框样式。

• 边框的颜色
  CSS 使⽤⼀个简单的 border-color 属性)，它⼀次可以接受最多 4 个颜⾊值。可以使⽤任何类型的颜⾊值，例如可以是命名颜⾊，也可以是⼗六进制和 RGB 值。默认的边框颜⾊是元素本身的前景⾊。如果没有为边框声明颜⾊，它将与元素的⽂本颜⾊相同。另⼀⽅⾯，如果元素没有任何⽂本，假设它是⼀个表格，其中只包含图像，那么该表的边框颜⾊就是其⽗元素的⽂本颜⾊（因为== color 可以继承==）。这个⽗元素很可能是 body、div 或另⼀个 table

• 单边的颜色

border-top-color
border-right-color
border-bottom-color
border-left-color

• 通明的边框

⽤于创建有宽度的不可⻅边框
border-color: transparent;

• CSS边框属性
  
• 边框的简写属性
• border:boder-width border-style border-color;
• border: 1px solid #000;

三、CSS外边距

1. 围绕在元素边框的空⽩区域是外边距。设置外边距会在元素外创建额外的“空⽩”。
2. 使⽤ margin 属性，这个属性接受任何⻓度单位(像素、英⼨、毫⽶或 em。)、百分数值(百分数是相对于⽗元素的 width 计算的。p {margin : 10%;}p 元素设置的外边距是其⽗元素的 width 的10%)甚⾄负值。margin 的默认值是 0，所以如果没有为 margin 声明⼀个值，就不会出现外边距。如果没有为 p 元素声明外边距，浏览器可能会⾃⼰应⽤⼀个外边距。特别作了声明，就会覆盖默认样式。
   -单边外边距属性

h2 {
 margin-top: 20px;
 margin-right: 30px;
 margin-bottom: 30px;
 margin-left: 20px;
 }
 等价于p {margin: 20px 30px 30px 20px;}

3. CSS 外边距合并

• 外边距合并指的是，当两个垂直外边距相遇时，它们将形成⼀个外边距。合并后的外边距的⾼度等于两个发⽣合并的外边距的⾼度中的较⼤者。
• 当⼀个元素出现在另⼀个元素上⾯时，第⼀个元素的下外边距与第⼆个元素的上外边距会发⽣合并。
• 当⼀个元素包含在另⼀个元素也会发⽣合并。
• 有⼀个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了⼀起，也会发⽣合并

四、值复制

• 如果缺少左外边距的值，则使⽤右外边距的值。
• 如果缺少下外边距的值，则使⽤上外边距的值。
• 如果缺少右外边距的值，则使⽤上外边距的值。

h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */
h2 {margin: 0.5em 1em;} /* 等价于 0.5em 1em 0.5em 1em */
p {margin: 1px;} /* 等价于 1px 1px 1px 1px */

五、盒模型与display属性

1. HTML组建的盒模型分为俩种

• block类型 : 这种盒模型的组件默认占据⼀⾏，允许通过CSS设置宽度、⾼度。<div…/>、<p…/>元素。
• inline类型 : 这种盒模型的组件不会占据⼀⾏(默认允许在⼀⾏放置多个组件)设置宽度、高度也不会起作用。例如<span…/>、<a…/>、<img…/>元素。

2. none值
   display属性还可以指定为none值，⽤于设置⽬标对象隐藏，⼀旦该对象隐藏，其占⽤的⻚⾯空间也会释放。与此类似的还有visibility属性，该属性也可⽤于设置⽬标对象是否显示。与display属性不同，当通过visibility隐藏某个HTML元素后，该元素占⽤的⻚⾯空间依然会被保留。visibility属性的两个常⽤值为visible和hidden，分别⽤于控制⽬标对象的显示和隐藏。
3. inline-block盒模型
   CSS还提供了⼀种inline-block盒模型，通过为display属性设置inline-block即可实现这种盒模型，这种盒模型是inline模型和block模型的综合体；inline-block盒模型的元素既不会占据⼀⾏，同时也通过width、height指定宽度及⾼度。
   通过使⽤inline-block盒模型可以⾮常⽅便的实现多个<div…/>元素并列显示。也就是说，使⽤inline-block盒模型可以实现多栏布局。
   在默认情况下，多个inline-block盒模型的组件将会采⽤底端对⻬的⽅式，也就是它们的底部将会位于同
   ⼀条⽔平线上，这可能不是多栏布局期望的结果。为了让多个inline-block盒模型的组件在顶端对⻬，为
   它们增加vertical-align:top；即可。
4. inline-table盒模型
   在默认情况下，<table…/>元素属于block盒模型，也就是说，该元素默认占据⼀⾏:它的左边不允许出现任何元素，右边也不允许出现其他内容。该元素可以通过width、height设置宽度和⾼度。CSS为<table…/>元素提供了⼀个inline-table盒模型，这个盒模型允许表格通过width、height设置宽度和⾼度，⽽且允许它的左右两边出现其他内容。为了控制表格与前、后内容垂直对⻬，可以通过添加vertical-align属性来实现，设置该属性为top，表示让表格与前后内容顶端对⻬；设置该属性为bottom，表示让表格与前后内容底端对⻬。
5. 表格相关的盒模型
   table:将⽬标HTML组件显示为表格
   table-caption:将⽬标HTML组件显示为表格标题
   table-cell:将⽬标HTML组件显示为单元格
   table-column:将⽬标HTML组件显示为表格列
   table-column-group:将⽬标HTML组件显示为表格列组
   table-header-group:将⽬标HTML组件显示为表格头部分
   table-footer-group:将⽬标HTML组件显示为表格⻚脚部分
   table-row:将⽬标HTML组件显示为表格⾏
   table-row-group:将⽬标HTML表格显示为表格⾏组
6. list-item盒模型
   list-item模型可以将⽬标组件转换为类似于<ul…/>的列表元素，也可以同时在元素前⾯添加列表标志。

六、布局相关属性

1. 通过float属性实现多栏布局
   通过使⽤float属性，可以很⽅便的基于<div…/>元素来设计导航菜单、多栏布局等效果。float属性控制⽬标HTML组件是否浮动以及如何浮动。当通过该属性设置某个对象浮动后，该对象将被当做块(block-level)组件处理，即相当于display属性被设置为block。也就是说，即使为浮动组件的display设置了其他属性值，该属性值依然是block。浮动HTML组件将会漂浮紧紧跟随它的前⼀个组件，直到遇到边框padding、margin、另⼀个块组件为⽌。该属性⽀持left、right两个属性值，分别指定对象向左、向右浮动。
2. 使⽤clear属性实现换⾏
   clear属性⽤于设置HTML组件的左、右是否允许出现"浮动"组件，如果该属性指定为left，则左边不允许出现"浮动"组件。如果指定为both，则两边都不允许出现浮动组件。借助于clear属性可以让"浮动"组件换⾏。

float: left;左边不浮动
float: righ;右边不浮动
clear: both;俩边都不浮动

3. 控制组件的滚动条
   CSS提供了overflow、overflow-x、overflow-y三个属性值来控制HTML组件不够容纳内容时的显示⽅
   式，这三个属性的功能基本类似，区别只是overflow同时控制两个⽅向，⽽overflow-x只控制⽔平⽅
   向，overflow-y只控制垂直⽅向。
4. CSS3新增的box-shadow属性
   CSS3新增了box-shadow属性为盒模型添加阴影，该属性可⽤于为整个盒模型添加阴影。box-shadow属性可以为所有盒模型的元素整体添加阴影。这是⼀个复合属性，包含有如下5个值:

• hOffset:该属性值控制阴影在⽔平⽅向的偏移
• vOffset:该属性值控制阴影在垂直⽅向的偏移
• blurLength:该属性值控制阴影的模糊程度

5. 列表属性

ul li{
		/*list-style-type:定义列表项的标记*/
		list-style-type: none;
		/*自定义列表项标记图片
		 * list-style-image:url(图片地址)
		 */
		list-style-image: url(img/start.jpg);
	}

CSS的三种定位方式

定位属性：position
1)绝对定位:absolute:针对他的父标签进行移动（向下、向右）
2)相对定位：relative:针对之前元素位置进行移动(常用)
3)固定定位:fixed
应用场景；网站中间弹出对话框 随着滚动条的滚动
永远在网页中间