CSS盒子模型

CSS盒子模型

什么是盒子模型

所谓盒子模型，即是将网页布局中的元素（能设置宽高的元素）进行拟物化的比喻

一个盒子是由四个部分组成

①　“内容–content”（盒子内的物件）
②　“内间距–padding”（物件和盒子的距离）
③　“边框–border”（盒子壁）
④　“外间距–margin”（盒子和其它物体的距离）

IE盒子模型与w3c的盒子模型

由于一些“客观”的原因，IE浏览器和标准的盒子模型有一定的差异

标准的盒子模型

最终盒子的“width”和“height” 等于 conent+padding+border
简单来说你更改盒子中的内容的时候盒子总体的宽高会发生变化

IE浏览器盒子模型

最终盒子的width”和“height 等于 content
更改盒子中的内容的时候盒子总体的宽高会不会发生变化

盒子模型的选择与转换

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

转换方式如下：
CSS的样式属性
box-sizing：border-box  --》IE盒子模型
box-sizing：content-box --》W3C盒子模型

盒子宽度，盒子高度，内间距，边框，外边距

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;
}

圆角的盒子“border-radius”

给每个角进行设置圆角

div {
border-top-left-radius: 5px;
border-bottom-right-radius: 10px;
}

给所有角进行设置圆角

div {
border-radius: 5px;
}

元素的轮廓“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; /* 这个值只能单独写 */
}