Web笔记——两种盒子模型

文档中的元素都可以被看作是一个盒子，盒子都具有以下属性：

width、height：宽、高

padding：内边距

margin：外边距

border：边框，介于内边缘和外边缘之间。

默认盒子模型（W3C盒子）

使用box-sizing属性可以改变盒子模型，content-box的盒子是默认盒子模型

布局如下：

从里到外的属性依次是：width height、padding、border、margin

 width、height，宽高指盒子内容的宽高。

padding是在内容之外的、border之内的填充部分，是内边距。

margin是在border之外的部分，是外边距。

border介于二者之间。

内容区的宽 width 

内容区的高 height

盒子的宽 width+padding-left+padding-right+border-left+border-right 

也就是内容区宽度+padding区宽度

盒子的高 height+paddin-gtop+padding-bottom+border-top+border-bottom

也就是内容区高度+padding区高度

所占屏幕空间的宽 width+padding-left+padding-right+border-left+border-right +margin-left+margin-right

所占屏幕空间的高 height+padding-top+padding-bottom+border-top+border-bottom +margin-top+margin-bottom

所占屏幕空间就是border（包括border）里边的部分加上外边距部分

margin：兄弟元素水平方向的间隙是相加两个margin相加
              竖直方向间隙是相叠的，上边的margin和下边的margin取较大的那一个。
padding：10px 100px  150px 200px；padding的速记写法，方向顺序是上右下左。
padding：10px 100px；如果只写两个数值，设置的是上下10px，左右100px
padding：10px 100px 1px；写三个值就是上10px，左右100px，下1px。
margin:0 auto 可以使元素水平居中

IE盒子（边框盒子）

IE1-5之前默认盒子都是IE盒子

使用box-sizing属性可以改变盒子模型，取值“border-box”的盒子为边框盒子模型。

布局如下：

从外到里属性依次是：margin、width height、border、padding

所以：

内容区的宽=width-paddingleft-paddingright-borderleft-borderright 

width减去border和padding的值

内容区的高=height-paddingtop-paddingbottom-bordertop-borderbottom

height减去border和padding的值

盒子的宽 width 

盒子的高 height 

所占屏幕空间的宽 width+marginleft+marginright 

width+margin值

所占屏幕空间的高 height+margintop+marginbottom

height+margin值

盒子背景样式

 background-color 为元素设置一种颜色

取值 ——关键字、十六进制 、 RGB、 HSL、 RGBA、 HSLA

background-image 为元素设置一个背景图片

url('网络地址/相对地址...')、none

background-size 设置背景的大小

        百分比、px、cover 背景铺满整个屏幕，（尽量不要使用大图覆盖小范围） 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像 的某些部分也许无法显示在背景定位区域中。按照背景定位区域的最大边扩展 。 

         contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。按 照背景定位区域的最小边扩展，如果不重复，可能背景定位区域有一部分没有 背景图片。

background-repeat 设置背景图片的重复方式

         repeat 为了覆盖整个背景范围，背景图片尽可能多的重复，在背景边 缘切割(clipping)最后一个图片以使用整个背景范围。

 repeat-x x方向平铺一行  repeat-y y方向平铺一行  no-repeat 不重复

background-origin 设定背景的起始点

        padding-box 默认，背景图片从内边距的外边缘开始绘制 

        border-box 背景图片从边框的外边缘开始绘制 

        content-box 背景图片从内容区开始绘制

background-clip 设定背景的覆盖范围

        border-box 默认，背景位于边框以内 

        padding-box 背景位于内边距以内 

        content-box 背景位于内容区

background-attachment 设置背景图片的固定点 

        scroll 默认值，背景图像会随着页面其余部分的滚动而移动，背景固定在自身 元素上，背景图相对于元素固定，背景随页面滚动而移动，即背景和元素绑定 。 

        fixed 背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置 在了视口区上。 

        local 背景图相对于元素内容固定

        存在内部滚动条的情况下，scroll就相当于fixed，而local就相当于scroll

background-position 设置为背景图像初始位置，可以实现一个图片加载一次使用多个图标

提高效率

        设置为背景图像初始位置,相对于background-origin定义的位置，用来实现图片精灵 (CSS sprites)技术

        取值 —— 关键字 、 坐标，第一个值是x，第二个是y，向右向下是正值。

 盒子边框样式

border-width 为元素指定边框的宽度 

        取值 —— 关键字 thin 、medium、thick     单位 px、em

border-style 为元素指定边框样式 

        取值—— none 不设置 、 hidden 隐藏 、dotted 显示一系列的点 、 dashed 显示一系列小线段 、solid 显示一条单一的实心直线 、 double 显示两条实心直线 、 groove 边框雕刻效果(与ridge相反) 、 ridge 与groove相反 、 inset 嵌入式边界框(与outset相反) 、outset 突出的边界框

border-color 为元素指定边框颜色 

        取值 —— 关键字 、 十六进制、 RGB 、 HSL 、 RGBA 、 HSLA

border-radius 为元素指定圆角边框的半径 

        取值 —— 绝对值 px、mm 、cm    相对值 em 、rem

border 边框相关属性的速记写法

举例：border：1px solor red

表格样式

border-collapse 指定表格的边框是合并还是分开 

        separate 【默认值】分开模式，表示相邻的两个格子都有独立边框

        collapse 合并模式，表示相邻的两个格子共享边框

caption-side 指定caption坐落在表格的哪个位置上

        top 标题位于表格的上方 

        bottom 标题位于表格的下方

background 为表格添加背景色

注意！

table 下的父子关系不是严格的父子关系，如果要选择td可以用
table tr>td{ }

table 用collapse 合并之后外边框就看不见了，内边框还能看见
table的tr的border不可以设置，因为看不见，background-color可以设置
tr是一种虚拟行的概念，不做展示