Css盒子模型、Css样式背景、 vertical-align

一、CSS盒子模型

1. 什么是盒子模型
   所谓盒子模型，即是将网页布局中的元素（能设置宽高的元素）进行拟物化的比喻。
   一个盒子是由四个部分组成
   ①　“内容–content”（盒子内的物件）、
   ②　“内间距–padding”（物件和盒子的距离）、
   ③　“边框–border”（盒子壁）、
   ④　“外间距–margin”（盒子和其它物体的距离）

2. IE盒子模型与w3c的盒子模型
   (1) 由于一些“客观”的原因，IE浏览器和标准的盒子模型有一定的差异。
   标准的盒子模型
   最终盒子的“width”和“height”==
   == 我们给元素设置的宽高 + padding + border；
   换句话说：
   在标准模型下，我们给元素设置的宽高只会作用到内容content上
   IE浏览器盒子模型
   最终盒子的width”和“height == 我们给元素设置的宽高
   换句话说：
   在标准模型下，我们给元素设置的宽高为content+padding+borderde==

(2) 盒子模型的选择与转换
一方面为为了兼容IE浏览器，另一方面是IE的盒子模型在实际的布局中的确更容易控制。所以我们在实际的开发工作中，都是将标准的盒子模型转换为IE的盒子模型。转换方式如下：

CSS的样式属性
box-sizing：border-box --》IE盒子模型
box-sizing：content-box --》W3C盒子模型
3. 盒子宽度，盒子高度，内间距，边框，外边距
基本含义
width: 盒子宽度
height： 盒子高度
padding：内边距：盒子内容与盒子边框的距离
border： 盒子边框
margin: 外边距：盒子边框与其他标签的边框的距离
padding/margin设置
四个方向单独进行控制
div {
margin-left: 1rem;
margin-right: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;

padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
组合值控制
div {
margin: 1rem;
padding: 1rem;
}
当为组合值时的含义：
一个值: 上右下左同时设置
两个值：上下，左右
三个值：上，左右，下
四个值：上右下左分别设置

Border设置
边框的三大属性
①　border-width 设定边框的宽度。
②　border-style 设置边框的类型，主要有以下可以设定的值
③　border-color 设置边框的颜色，

单独设置各属性（所有方向）
div {
border-color: #4b8fca;
border-style: solid;
border-width: 2rem;
}
只设置某个方向上的border，单独控制
div {
border-right-color: #4b8fca;
border-right-style: solid;
border-right-width: 2rem;
}

边框可选类型如下：
①　none，无边框
②　solid，实现边框
③　dotted，点线边框
④　dashed，虚线边框
⑤　double，双线边框
⑥　groove，3D凹槽边框
⑦　ridge，3D凸槽边框
⑧　inset，内浮雕边框
⑨　outset，外浮雕边框

组合值

用组合值设置各属性（所有方向）

div {
border: 0.05rem red solid;
}

各个属性的位置可以调整改变
只设置某个方向上的border，组合值控制
div {
border-right:1rem solid red;
}

1. 圆角的盒子“border-radius”
   给每个角进行设置圆角
   div {
   border-top-left-radius: 5px;
   border-bottom-right-radius: 10px;
   }
   给所有角进行设置圆角
   div {
   border-radius: 5px;
   }
2. 元素的轮廓“outline”
   概述
   ①　该属性用于设置一个元素的轮廓线.(input点下会有蓝色边线，那就是轮廓)

②　和“border”不一样，“outline”无论在什么“盒子模型”下，都不会占据页面的空间

③　并且它不能分别去设置各个方向的值，即不能对“top”、“right”、“bottom”和“left”方向的“outline”进行分别设置，只能进行统一给所有方向设置。（可以对某个分支属性进行设置）

④　在使用“webkit内核或“blink内核的浏览器中，该属性会在表单元素在获得焦点后自动出现，本意是让用户获得更好的交互体验。

但该设定很多时候反而会影响我们对“Web”页面的风格设置，这个时候我们都是将它的值设置为“none”。

Webkit :
老版本Chrome浏览器、Safari浏览器以及iOS和Android系统自带浏览器

Blink :
以新版的Chrome浏览器和Opera浏览器为代表

⑤　另外，“outline”属性并不受圆角属性“border-radius”的影响。和“border”属性大体一致
outline的分支属性
outline-width 设置轮廓线的宽度
outline-style 设置轮廓线的样式
outline-color 设置轮廓线的颜色
outline-offset设置轮廓线相对元素边框的距离
div {
width: 10rem;
height: 10rem;
margin: auto;
border: 0.05rem red solid;

outline: 1px solid blue; /* 组合值写法 /
outline-offset: 20px; / 这个值只能单独写 */
}

3. 可调整元素大小的“resize”
   (1) 默认情况textarea能够进行元素标签大小的调整
   如下：

(2) resize的使用
resize这个属性就是用来专门定义这种大小调整的行为的，使用方式如下：

1. resize应该配合overflow这个css属性进行使用,
   然后overflow值一般为下者之一即可：
   hidden/auto/scroll

2. resize应该使用到块级元素与行内块元素上。【通过display属性修改的也算】

3. resize主要有三个值
   ①　允许垂直改变大小：vertical
   ②　允许水平改变大小：horizontal
   ③　允许垂直水平同时改变大小：both

4. resize属性在大部分ie系列里面的浏览器中都是无效的。

5. resize使用示例
   div {
   /* 设置div的大小和边框 /
   border: 0.1rem solid red;
   width: 3rem;
   height: 3rem;
   / 设置以下样式，让此元素大小可变 */
   resize:both;
   overflow:hidden;
   }

6. 默认能够改变大小，就是默认设置了值为both,
   如果我们想让他只能水平改变大小或者垂直改变大小，或者不能改变大小，我们直接使用设置相应的resize值就可以了，并且无需显示的去设置“overflow”属性。
   textarea {
   /* resize: horizontal; 水平*/
   /* resize: vertical; 垂直 */
   resize: both;
   }

4. 元素的阴影“box-shadow”
   描述
   该属性能够让元素获得一个“阴影”效果，根据颜色的不同，有时候也可以叫做“发光”效果。“box-shadow”属性没有分支属性，它的值是以“组合值”的形式设置的，它最多允许6个值的组合，按值的顺序分别代表：
   基本值
   h-skewing（必要）
   阴影在水平方向的偏移，负数是向左偏移，正数是向右偏移，单位为“px”。
   v-skewing（必要）
   阴影在垂直方向的偏移，负数是向上偏移，正数是向下偏移，单位为“px”。
   blur（可选）
   阴影的“模糊距离”或“模糊程度”，单位为“px”。
   color（可选）
   阴影的颜色，支持Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。
   基本实例

和文本阴影的不同（多了两个值）
inset（可选）
将默认向外的阴影方向改为向内，然后inset一般是放在阴影颜色的后面。

spread（可选）
阴影的扩展范围,值为数值，其单位可以使用常用单位。rem,em,px.
它应该放在阴影颜色的前面

4. 扩展
   ①　给某个元素设置margin-top时，如果他上方元素含有“margin-bottom”，则这两个值会重叠，并且取较大值作为间距值。
   【如果是左右的话，则是正常的相加】

②　当一个块级元素没有设置border和padding时，在块级元素的首个子标签元素中设置margin-top时，这个margin-top会作用到这个父元素上。

(1) 关于inline-block会造成空白间隙的解决方案
(2) display:inline-block会造成空白间隙，只有当这个完全挨着时，空白的间隙才会消失，如果有空隙的存在，20%宽度+空隙宽度+80%宽度 > 100%宽度，会造成第二个div另起一行布局。
空隙产生原因：

HTML中的换行符、空格符、制表符等空白符，字体大小不为0的情况下，空白符占据一定宽度，使用inline-block会产生元素间的空隙。

解决方式：

1. 通过浮动可以解决空白间隙（float）

2. 改变html结构，让其没有空白间隙。（下面四种任意一种都可以）

3. 通过设置负的margin-rigin值，让他们处于一行
   margin-right:-0.25em;

4. 设置父元素的字体为“0”，然后在“inline-block”元素上重置字体需要的大小。
   这样处理在Firexfox,chrome等浏览器下是达到了效果，可是在Safari下可问题依然存在。

5. 在父元素中设置font-size:0,用来兼容chrome，而使用letter-space:-N px来兼容safari
   main .aside{
   width: 20%;
   background-color: rgb(21, 58, 90);
   }
   main .content{
   width: 80%;
   background-color: rgb(103, 123, 141);
   }

main{
text-align: center;
letter-spacing: -0.25rem;/根据不同字体字号或许需要做一定的调整/
word-spacing: -0.25rem;
font-size: 0;
}
main .aside,main .content{
display: inline-block;
height: 20rem;

font-size: 1rem;
letter-spacing: normal;
word-spacing: normal;
}

(2) 关于当窗体大小改变时引发的布局混乱问题解决方案
解决方式： 给body设置最小宽度即可。
(3) 关于原本两个对齐的行内块在放入内容后无法对齐后的解决方案
解决方式：设置此行内元素为vertical-align:top;

二、CSS背景

1. 在当今的HTML页面中，页面的背景色默认为“白色”。

2. 除了少许的表单元素及HTML5规范后才出现的一些新的“功能性”元素标签，其它元素是不具有背景色的（也可以理解为透明的）。

3. 要为页面内的元素添加漂亮的“装饰”，让页面表现得更加丰富，区别于人，除了“border”、“outline”、“box-shadow”外，“background”在里面也扮演着相当重要的角色，

4. 背景色“background-color”
   以颜色作为背景

5. 背景图像“background-image”
   以图片作为背景

6. 写法 (其值不给引号也可以，但是建议给上引号，以防名字在有空格)
   background-image: url("./oa.jpg");

7. 当盒子宽高大于背景图片大小时，会默认平铺

8. 默认背景图片会覆盖掉背景颜色，但是当背景图片未铺满整个盒子时，背景颜色就会显示出来。
   提示： 设置图片不平铺

9. 背景图片重复“background-repeat”
   当背景图片宽或高小于其元素宽高时，设置图片平铺方式
   repeat 默认，以“平铺”的方式排列图片
   repeat-x 只在水平方向（X轴方向）进行平铺
   repeat-y只在垂直方向（Y轴方向）进行平铺
   no-repeat 使背景图片不平铺
   示例

10. 背景图定位“background-position”
    设置背景图片在元素内出现的位置，默认为（0,0）左上角。
    元素的宽高大于背景图片时：
    这个时候是通过“0”或“正数值”去进行定位；
    元素的宽高小于背景图片时：
    这个时候是通过“0”或“负数值”去进行定位
    很多时候，我们量出的像素并不是其真正的大小，所以对于真正距离，我么可以通过比例进行计算，得到最终实际大小。
    该属性的值有三种形式：
    方位英文单词
    可以有“left”、“right”、“top”、“bottom”和“center”。
    用法如：
    “left top”（默认），设置背景图在元素内的“左上方”；
    “right bottom”，设置背景图在元素内的“右下方”；
    “center center”，设置背景图在元素的“中心”。
    百分比单位
    用法如：
    “0% 50%”，设置背景图在元素内“水平方向”的“左方”，垂直方向的“中心”；
    “50% 50%”,，设置背景图在元素内的“中心”；
    “100% 100%”,，设置背景图在元素内的“右下方”。
    数值单位（px,rem，em等）
    背景图的“左上角”相对于元素“左上角”偏移的距离，如
    “10px 20px”,设置背景图“水平向右”偏移10像素，“垂直向下”偏移20像素。
    这三种形式去设置背景图片的位置是可以“混搭”的，如：“left 100%”、“50% 70px”、“top 30px”等。不过从代码规范性的角度出发，并不推荐这种“混搭”的方式。

11. 背景图固定“background-attachment”
    通过将该属性的值设置为“fixed”后，页面出现滚动条后就算页面滚动，背景图也会固定在原来的位置不会跟随页面滚动。它的默认值是“scroll”，是当页面滚动的时候，背景图也跟随页面同步滚动。
    background-attachment: fixed;

12. 背景图大小“background-size”
    该属性用于设置背景图片的大小，在进行颜色渐变时还可以设置渐变一次的颜色的宽度。
    主要可以通过四种类型的单位设置：
    数值类型（px,rem…）
    (1) 可以通过像素px , rem等精确地设置背景图片的大小。
    (2) 需要设置为两个值，第一个值表示背景图的宽度，第二个值表示背景图的高度。
    (3) 还可以通过设置宽度或高度的其中一个，将另外一个值设置成“auto”达到保持背景图原始图像比例的效果。如：“240px 120px”、“180px auto”或“auto（相当于还原默认的大小）”。
    background-size: 10rem 10rem;

百分比值
用“百分比”作为值，结构和用“像素值”一致，也是两个值，第一个值是相对于元素宽度的百分比值，第二个值是相对于元素高度的百分比。
如：“100% 80%”、“100% auto”或“auto 50%”。
background-size: 100% 100%;

contain
自动将背景图像填满元素的其中一边（一般为长的那条边），图像的比例保持不变。
background-size: contain;

cover
在保持图像原始比例的情况下，将元素的背景区域完全覆盖，超出元素宽高的部分会自动被裁剪。
它是一种比较“智能”的背景图片大小设置方式，通过配合“background-position”属性使用可以将开发者认为背景图像中“更重要”的部分通过定位显示出来。
background-size: cover;

7. 规定背景颜色裁剪终点“background-clip”
   规定背景颜色从border开始，裁剪到哪里为止，默认不做裁剪
   该属性是规定背景颜色显示的范围，是从“border”开始，是从“padding”开始，还是从“content”开始，它有以下值：
   border-box 背景颜色的覆盖范围从“border”开始【默认】
   padding-box背景颜色的覆盖范围从“padding”开始
   content-box背景颜色的覆盖范围从“content”开始

8. 背景图片的开始位置“background-origin”
   设置背景图像开始的位置，它和“background-clip”的使用方式十分相似，（对于背景图片，应该说从哪里开始显示，默认是padding左上角开始显示）
   border-box 背景图片从“border”左上角开始显示
   padding-box背景图片从“padding”左上角开始显示
   content-box背景图片从“content”左上角开始显示

然后，background-origin与background-clip两者可以同时存在。

9. 背景组合值“background”
   组合值可以通过一行代码设置所有的背景相关属性

(1) 在组合值中由于clip,origin的值是一样的，所以在前的表示背景图片的开始位置，在后的表示背景颜色裁剪终点。（只有一个值表示同时控制）
(2) 在组合值中由于position,size 都可以使用像素值等来设置，所以设置他们两个时需要以/分割，而不是以空格分割，否则会报错。
然后在前的表示position，在后的表示size
(3) 组合值中可以设置所有的背景属性，而且顺序基本上可以任意切换（position/size必须是一个整体）
实例
div {

width: 30rem;
height: 60rem;
border: 1rem blue dashed;
padding: 1rem;

background:
red url("./oa.jpg") no-repeat center/cover content-box padding-box;
}
关于实例中的content-box padding-box
第一个表示背景图片的开始位置，第二个表示背景颜色裁剪终点，有先后顺序

10. 背景色渐变“background”
    “background”背景色渐变是利用色彩在标签元素内以一定的方向进行颜色的过渡变化而成。
    渐变是css3中的东西，请考虑加上兼容处理。
    CSS3中渐变类型：
    渐变对象：背景颜色
    线性渐变
    (1) 线性渐变背景颜色沿着一条直线进行的
    (2) 渐变函数：linear-gradient() ;
    (3) 渐变条件
    给上两种以上的背景颜色作为函数参数（多个颜色以逗号分隔）
    基本实例：
    div {
    width: 10rem;
    height: 10rem;
    background: linear-gradient(red, blue);
    }

(4) 渐变方向
渐变可以设置方向的，作为linear-gradient() 函数的第一个参数就可以了。【默认为从上到下开始渐变】
渐变方向设置方式：

1. 使用方位名称进行设置
   to right : 表示从左到右渐变
   to left : 表示从右到左渐变
   to top：表示从下到上渐变
   to bottom: 表示从下到上渐变
   方位名词还可以组合：比如
   to right bottom 表示从左上渐变到右下
   div {
   width: 10rem;
   height: 10rem;
   background: linear-gradient(to right bottom,red, blue);
   }

2. 使用角度进行设置
   顺时针为正，指向12点时为0度,即0deg
   例如：
   0deg : 从下到上渐变
   180deg：从上到下渐变（默认）
   90deg: 从左到右渐变
   -90deg 从右往左渐变
   360deg : 回到0点了，从上到下

(5) 渐变节点
在进行普通线性渐变时，每个颜色都可以设置一个渐变的位置节点。节点一般表示每个颜色渐变的开始位置。
div {
width: 10rem;
height: 10rem;
background: linear-gradient(red 30px, blue 50px,yellow 70px ,purple 90px);
}

例子解析：
red是从30px处开始渐变的，blue是从50px处开始渐变的，
yello是从70px开始渐变的，每个节点都表示当前颜色的纯色。
注意

1. 如果第一个颜色渐变节点位置大于0，那么之前就是纯色（第一个颜色）
2. 如果最后一个颜色渐变节点位置小于最大大小，那么之后就是纯色（最后一个颜色）
3. 渐变节点位置可以使用百分比进行设置

(6) 渐变颜色可以设置透明度（rgba，HSLa等）
div {
width: 10rem;
height: 10rem;
background: linear-gradient(red 30px, blue 50px,yellow 70px ,rgba(204, 30, 204,.1) 90px);
}

(7) 渐变颜色可以不限，每个颜色都以逗号分隔。

重复线性渐变方式说明：

1. 从第一个颜色（节点位置默认从0px开始）到最后一个颜色的节点位置的渐变距离为一个完整渐变过程。

2. 用html标签在渐变方向总的大小，除以一个完整渐变过程的大小就是渐变的次数。

三、vertical-align专题解析

1. vertical-align作用
   ①　控制单元格内容的垂直对齐方式。
   ②　控制多个行内（块）元素在一行上的垂直对齐方式
   ③　控制行内（块）元素相对其父元素垂直对齐方式
   注意： vertical-align 只对行内与行内块元素、表格单元格元素生效：不能用它垂直对齐块级元素
2. 浏览器支持
   所有浏览器都支持 vertical-align 属性。
3. 可能的值
   表格单元格的值
   top 单元格内容居上【使单元格内边距的上边缘与该行顶部对齐。】
   middle 单元格内容居中【使单元格内边距盒模型在该行内居中对齐。】
   bottom 单元格内容居下【使单元格内边距的下边缘与该行底部对齐。】

相对行的值
控制多个行内（块）元素在一行上的垂直对齐方式
【当一行中有多个行内块元素时生效，如果只有一个元素那么他的顶端就是行的顶端，他的底端就是行的底端，不管你设置top适当bottom，他都不会变化】

top 使元素及其后代元素的顶部与整行的顶部对齐。
bottom 使元素及其后代元素的底部与整行的底部对齐。

== 注意：
(1) 一行的高度由该行最高元素的高度决定的，而不管其父元素有多高，除非我们显式的设置了行高父元素的高度。
(2) 然后行高会存在继承关系，如果我们设置了父元素的行高，那么子元素会自动的继承在父元素上设置的行高，这在很多时候都不是我们想要的，所以我们需要在子元素里面重新定义行高。==

相对父元素的值
具体值
控制行内（块）元素相对其父元素垂直对齐方式
baseline 默认。使元素的基线与父元素（当前行）的基线对齐

middle 使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。

text-top 把元素的顶端与父元素字体的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐。

sub 使元素的基线与父元素的下标基线对齐
super 使元素的基线与父元素的上标基线对齐。

length 使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
% 使元素的基线对齐到父元素的基线之上的给定百分比，
该百分比是line-height属性的百分比。可以是负数。

注意：没有基线的元素，使用外边距的下边缘替代。

基线概念
在各种内联相关模型中，凡是涉及到垂直方向的排版或者对齐的，都离不开最最基本的基线(baseline)。其他中线顶线一类的定义也离不开基线。
①　作为父元素的块级元素基线
块级元素如果只有一行的内容,那么就以字母x的底部作为基线。
当有多行内容时，每行都有一个基线，两个相邻基线间的距离就是行高

②　作为子元素的一个空的行内（块）元素基线
以下margin的底部作为基线

③　作为子元素的一个非空的行内（块）元素基线
以含有元素的基线作为基线

注意： 一个行内块里面可能含有多个子元素，不同子元素的基线可能不一样，但是最终他们的基线会排在同一行上，这一行也会作为外层行内块元素的基线。
④　作为子元素非空的一个行内（块）元素基线【但是它设置了overflow的值不等于visible，如设置为hidden】
对于button等设置overflow无法修改他的基线

以下margin的底部作为基线文本基线

⑤　文本元素基线
以x的底部作为基线

以字母x的底部作为基线
x-height（译注：x高度）
"x-height"就是指的小写字母’x’的高度；

当vertical-align: middle.时，其含义就是使元素的中部与父元素的基线加上父元素x-height的一半对齐。
相对父元素基线垂直对齐实例

1. baseline
   baseline 默认。使元素的基线与父元素（当前行）的基线对齐
   

2. Middle
   middle 使元素的中部与父元素的基线加上父元素x-height（译注：x高度）的一半对齐。
   

3. text-top、text-bottom

text-top 把元素的顶端与父元素字体的顶端对齐
text-bottom 把元素的底端与父元素字体的底端对齐。

4. Sub，super
sub 使元素的基线与父元素的下标基线对齐
super 使元素的基线与父元素的上标基线对齐。

5. Length,%
   length 使元素的基线对齐到父元素的基线之上的给定长度。可以是负数。
   % 使元素的基线对齐到父元素的基线之上的给定百分比，
   该百分比是line-height属性的百分比。可以是负数。