盒子模型

盒子模型

1、盒子模型的相关属性
（1）边框属性：边框样式属性、边框宽度属性、边框颜色属性、单侧边框属性、边框的综合属性
边框样式：none：没有边框。
solid：边框为单实线
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线
边框宽度：border-width属性用于设置边框的宽度，其常用取值单位为像素px。
综合设置4条边宽度必须按上右下左的顺时针顺序采用值复制。
边框颜色：border-color属性用于设置边框颜色，其取值可以是预定义的颜色英文单词、十六进制颜色值或者RGB模式，实际工作中常用十六进制。
边框的默认元素为元素本身的文本颜色，对于没有文本的元素，例如只包含图象的表格，其默认颜色为父元素的文本颜色。
注意：①设置边框颜色时同样必须设置边框样式，如果未设置样式或设置为none，则其他的边框属性无效。
② 使用RGB模式设置颜色时，如果括号里面的数值为百分比，必须把“0”也加上百分号，写作 0%
综合设置边框：例如样式

border-top:上边框宽度 样式 颜色;
border:四边宽度 颜色 样式;

边框的宽度、样式、颜色顺序任意。
2、内边距属性：也称内填充，指的是元素内容与边框之间的距离

padding-top:上边距;
padding:上内边距[右内边距  下内边距  左内边距] 

使用复合属性padding定义内边距时，必须按顺时针顺序采用值复制的原则
注意：如果设置内外边距属性值为百分比，则内外边距不论上下或左右，都是相对于父元素宽度wigth的百分比，随父元素width的变化而变化，和高度height无关
3、外边距属性：指的是标签边框与相邻标签之间的距离

margin-top:上外边距
margin:上外边距 右外边距 下外边距 左外边距

**当对块级元素应用宽度属性width，并将左右的外边距都设置为auto时，可使块级元素水平居中，实际工作中常用这种方式进行网格布局
**

.num{
      margin:0 auto;
}

如果没有明确定义标签的宽高时，内边距相比外边距的容错率高。
4、背景属性
（1）设置背景颜色
background-color属性，其取值与文本颜色的取值一样，可使用预定于的颜色值、十六进制或RGB代码。
其默认值为transparent，即背景透明。
（2）设置背景图像
背景不仅可以设置为某种颜色，还可以将图像作为标签的背景。
（3）设置背景图像平铺
默认情况下，背景图像自动沿着水平和竖直两个方向平铺。如果不希望图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制，该属性取值如下：
repeat：沿水平和竖直两个方向平铺（默认值）
no-repeat：不平铺（图像位于元素的左上角，只显示一次）
repeat-x：只沿着水平方向平铺
repeat-y：只沿着竖直方向平铺
（4）设置背景图像的位置
background-position属性设置图像的位置
该属性的取值有多种
①使用不同单位（最常用的是像素px）的数值：直接设置图像左上角在元素中的坐标
②使用预定义的关键字：指定背景图像在元素中的对齐方式
水平方向值：left、center、right，
垂直方向值：top、center、bottom。
③使用百分比：按背景图像和元素的指定点对齐
0%0% 表示图像左上角与元素的左上角对齐。
50%50% 表示图像的50%50%中心点与元素50%50%的中心点对齐
20%30% 表示图像20%30%的点与元素20%30%的点对齐
100%100% 表示图像右下角与元素的右下角对齐
如果取值只有一个百分数，将作为水平值，垂直值默认为50% 可以为
（5）设置图像固定背景
background-attachment属性
①scroll：图像随页面一起滚动（默认值）
②fixed：图像固定在屏幕上，不随页面滚动
（6）综合设置元素背景

background:背景色 url（"图像"）  平铺  定位 固定

各样式顺序任意，中间用空格隔开 不需要的样式可以省略
5、盒子的宽与高
宽：width、高：height 可以为不同单位的数值或者相对于父元素的百分比。
元素的width和height属性仅仅指元素内容的宽度和高度，其周围的内边距、边框和外边距是单独计算的。
盒子的总高度=height+上下边距之和+上下边框宽度之和+上下边距之和
盒子的总宽度=width+左右边举止和+左右边框宽度之和+左右边距之和
注意：宽度属性width和高度属性height仅仅适用于块级元素，对行内元素无效（和标签除外）。
6、颜色透明度
①rgba模式：是rgb颜色模式的延伸，是在红、绿、蓝三原色的基础上添加了不透明度的参数，其语法格式如下

rgba(r,g,b,alpha);

在其中alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字
②opacity属性：该属性能够使任何元素呈现出透明效果，作用范围要比rgba模式大得多。
该属性用于定义标签的不透明度，参数表示不透明度的值，它是一个介于0~1之间的浮点数值，其中，0表示完全透明，1表示完全不透明，而0.5则表示半透明。

opacity：参数;

7、圆角
border-radius属性可以将矩形边框的四角圆角化。

border-radius:水平半径参数1 水平半径参数2 水平半径参数3 水平半径参数4/垂直半径参数1 垂直半径参数2 垂直半径参数3 垂直半径参数4;

参数的取值单位可以是px或者%
注意：
border-radius属性同样遵循复制的原则，其水平半径参数和垂直半径参数均可以设置1~4个参数值，来表示四角圆角半径的大小
①水平半径参数和垂直半径参数设置1个参数值时，表示四角的圆角半径均相同
②水平半径参数和垂直半径参数 设置2个参数值时，第一个参数值代表左上圆角半径和右下圆角半径，第二个参数代表右上和左下圆角半径。
代码如下：

img{border-radius:50px 20px/30px 60px;}

③水平半径参数和垂直半径参数设置3个参数值时，第一个参数值代表左上圆角半径，第2个参数值代表右上和左下圆角半径，第3个参数值代表右下角半径。
④水平半径参数和垂直半径参数设置4个参数时，第一个代表左上圆角半径，第二个代表右上圆角半径，第三个代表右下圆角半径，第四个代表左下圆角半径。
注意：如果垂直半径参数省略，则会默认其等于水平半径参数值，此时圆角的水平和垂直半径相等。
8、图片边框
border-image属性是一个复合属性
其语法格式如下

border-image:border-image-source/ border-image-slice/ border-image-width/ border-image-outset/ border-image-repeat;

border-image-slice：指定边框图像的顶部、右侧、底部、左侧向内偏移量（可以理解为图片的裁切位置）。
border-image-outset：指定边框背景向盒子外部延伸的距离。
如果想要正常显示图片边框，前提是先设置好边框样式，否则不会显示边框。

stretch：拉伸填充
图片边框也可以使用综合属性设置格式：

border-image:url("图片")  边框的偏移量/边框的宽度 平铺

9、阴影

box-shadow:h-shadow  v-shadow  blur  spread  color  outset;

inset内阴影 outset 外阴影
注意：使用内阴影时须配合内边距属性padding，让图像和阴影之间拉开一定的距离，不然图片会将内阴影遮挡。
box-shadow属性可以改变阴影的投射方向以及添加多重阴影效果。
示例代码

box-shadow:5px 5px 10px 2px #999 inset,-5px -5px 10px 2px #73AFEC inset;

10、渐变
（1）线性渐变：在线性渐变的过程中，起始颜色会沿着一条直线按顺序过渡到结束颜色

back-ground-image:linear-gradient(渐变角度，颜色值1，颜色值2.。。颜色值n)

①渐变角度：指水平线和渐变线之间的夹角，可以是以deg为单位数值或者“to”加“left”“right”“top”和“botton”等关键词，在使用角度设定渐变起点的时候，0deg对应“to top”，90deg对应"to right"，180deg对应“to bottom”，270deg对应“to left”，整个过程是以bottom为起点顺时针旋转。
当未设置渐变角度时，会默认为“180deg”等同于“to bottom”。
②颜色值：颜色值1表示起始颜色，颜色值n表示结束颜色，起始颜色和结束颜色之间可以添加多个颜色，颜色之间用，隔开。
值得一提的是：每个颜色值后面还可以书写一个百分比数值，用于标示颜色渐变的位置。
（2）径向渐变：起始颜色会从一个中心点开始，按照椭圆或者圆型形状进行扩张渐变。

background-image:radial-gradient(渐变形状  圆心位置，颜色值1，颜色值2，颜色值3.。。颜色值n);

① 渐变形状：其取值既可以是定义水平和垂直半径的像素值或者百分比，也可以是相应的关键词。其关键词主要包括"circle"和’'ellipse"。
具体解释：
a、像素值/百分比：用来定义形状的水平和垂直半径，例如“80px 50px”即表示一个水平半径为80px，垂直半径为50px的椭圆形
b、circle：指定圆形的径向渐变。
c、ellipse：椭圆形的径向渐变
②圆心位置：用于确定元素渐变的中心位置，使用“at”加上关键词或者参数值来定义径向渐变的中心位置，该属性类似于css中的background-position属性值，如果省略则默认为center，该属性值主要有以下几种：
a、像素值/百分比：用来定义圆心的水平和垂直坐标，可以为负值。
b、left：设置左边为径向渐变圆心的横坐标值。
c、center：设置中间为径向渐变圆心的横坐标值或者纵坐标。
d、right：设置右边为径向渐变圆心的横坐标值。
e、top：设置顶部为径向渐变圆心的纵坐标值。
f、bottom：设置底部为径向渐变圆心的横坐标值。
③颜色值：颜色值1为起始颜色，颜色n为结束颜色，中间可以添加多个颜色值，之间用，隔开。
（3）重复渐变
①重复线性渐变

background-image:repeating-linear-gradient(渐变角度，颜色值1，颜色值2，颜色值3.。。颜色值n);

括号里的参数值和线性渐变相同。
②重复径向渐变

background-image:repeating-radial-gradient(渐变形状 圆心位置，颜色值1，颜色值2，颜色值3.。。颜色值n);

参数取值和径向渐变相同。
11、多背景图像
CSS3中并没有为实现多背景图片提供对应的属性，而是通过background-image、background-repeat、background-position、background-size等属性的值来实现多背景图像效果，个属性之间用，
隔开。
排列在最上方的图片应该先链接，其次是中间的装饰，最后才是背景图。
12、修建背景图像
（1）设置背景图像的大小

background-size：属性值1 属性值2

该属性可以设置一个或者两个属性值定义图像的宽和高，其中属性值1为必选属性值，属性2为可选属性值。属性值可以是像素、百分比或者cover和contain关键字。
像素和百分比如果只设置一个值，则第二个只默认为auto
cover ：把背景图像扩展至足够大，使背景图像完全覆盖背景区域，背景图像某些部分也许无法显示在背景定位区域中
contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
（2）设置背景图像的显示区域
在默认情况下，background-position属性总是以标签左上角为坐标原点定位背景图像，运用background-origin属性改变这种定位方式，自定义图像的位置。

background-origin：属性值 

该属性有三个属性值
①padding-box：背景图像相对于内边框区域来定义
②border-box：背景图像相对于边框来定义
③content-box：背景图像相对于内容框来定位。
（3）设置背景图像的裁剪区域

background-clip：属性值;

该属性有三个属性值‘
①border-box：默认值，从边框区域向外裁剪背景
②padding-box：从内边距向外裁剪
③content-box：从内容向外裁剪
13、元素的类型和转换
（1）元素的类型
①块元素：块元素在页面中以区域块的形式出现，其特点是：每个块元素通常都会独自占据一行或者多行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。
常见的块元素又h1~h6、p、div，ul，ol，li等，其中div标签是典型的块标签
②行内元素：也称内联元素或者内嵌元素，其特点是：不会占据一行，也不强迫其他标签在新的一行显示。一个行内标签通常会和其他行内标签显示在同一行中，它们不占有独立的区域，仅仅靠自己的内容文本和图像尺寸来支撑结构，一般可以不设置宽度、高度、对齐等属性，常常用于控制页面样式。
典型的行内元素有strong，b，em，i，del，s，ins，u，a，span等，其中典型的是span标签
块元素可以 设置宽高和对齐属性，而行内元素不可以。
行内元素可以嵌套在块元素中，而块元素不可以嵌套在行内元素内
（2）div标签和span标签
①div标签：简单来说就是一个快标签，可以实现网页的规划和布局，大多数HTML标签可以嵌套在div标签内，div中还可以嵌套div标签，可以替代大多数的块级文本标签。
div标签可以替代块级元素h标签和p标签，但是在语义上有所不同，h2具有特殊的含义，语义较重，代表标题，而div标签只是普通的块级标签，只要用于布局。
②span标签：行内标签，仅仅作为包含文本和各种行内标签的容器。
span标签常常用于定义网页中某些特殊显示的文本，配合class属性使用。
（3）元素类型的转换
使用display属性
常用属性值为
inline：此元素将显示为行内元素（行内元素默认的display属性值）
block：此元素将显示为块元素（块元素默认的display属性值）
inline-block：此元素显示为行内元素，可以对其设置宽高和对齐属性，但是元素不单独占据一行
none：此元素将被隐藏，不显示，也不占有页面空间，相当于该元素不存在。
注意：行内元素只可以定义左右外边距，定义上下边距无效
14、块元素垂直外边距的合并
（1）相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的标签有下边距margin-bottom，下面的标签有上边距margin-top，则它们之间的垂直间距不是这两个边距之和而是其中最大的那个。
（2）镶嵌块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父标签没有上内边距及边框，则父标签的上外边距会与子标签的上外边距发生合并，合并后的外边距为两者中的较大者，即使父标签的上外边距为0，也会发生合并。