CSS盒子模型和背景

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

2.IE盒子模型与w3c的盒子模型
(1)由于一些“客观”的原因，IE浏览器和标准的盒子模型有一定的差异。
标准的盒子模型
最终盒子的“width”和“height”== conent、padding和border；
IE浏览器盒子模型
最终盒子的width”和“height == content
(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”，则这两个值会重叠，并且取较大值作为间距值。
【如果是左右的话，则是正常的相加】

注意

在某些浏览器里面可能

1.在块级元素的首个子标签元素中设置margin-top时，会作用到这个父元素上。

2.在块级元素的最后一个子标签元素中设置margin-bottom时，会作用到这个父元素上。若父元素已经设置了“padding-bottom”，则与父元素的该值相加取和作为与页面底部的间距。

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”在里面也扮演着相当重要的角色，
1.背景色“background-color”
以颜色作为背景

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

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

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

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

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

4.背景图定位“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”等。不过从代码规范性的角度出发，并不推荐这种“混搭”的方式。

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

6.背景图大小“background-size”
该属性用于设置背景图片的大小，主要可以通过四种类型的单位设置：
数值类型（px,rem…）
可以通过像素“px”精确地设置背景图片的大小。
需要设置为两个值，第一个值表示背景图的宽度，第二个值表示背景图的高度，
还可以通过设置宽度或高度的其中一个，将另外一个值设置成“auto”达到保持背景图原始图像比例的效果。
如：“240px 120px”、“180px auto”
或
“auto（相当于还原默认的大小）”。
百分比值
用“百分比”作为值，结构和用“像素值”一致，也是两个值，第一个值是相对于元素宽度的百分比值，第二个值是相对于元素高度的百分比。
如：“100% 80%”、“100% auto”或“auto 50%”。
contain
自动将背景图像填满元素的其中一边，图像的比例保持不变。
cover
在保持图像原始比例的情况下，将元素的背景区域完全覆盖，超出元素宽高的部分会自动被裁剪，是一种比较“智能”的背景图片大小设置方式，通过配合“background-position”属性使用可以将开发者认为背景图像中“更重要”的部分通过定位显示出来。
background-size: 100% 100%;

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

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

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

9.背景组合值“background”

10.背景色渐变“background”
11.扩展：关于body背景设置