HTML、CSS、盒子模型

《盒子模型》
一、盒子模型的概念
1.border:边框
2.margin：外边距
3.padding：内边距
4.padding-border-margin模型是一个通用的描述矩形对象布局形式的方法
5.这些矩形对象称为盒子，英文就是box，所以这种布局模型就叫盒子模型
6.网页中的布局也可以使用盒子模型来完成
7.一个独立的盒子模型由四部分组成：
a、content 内容（位于最中间，网页的主要内容，相当于画本身）
b、padding 内边距/内填充（内容和边框之间的距离）
c、border边框（相当于画框)
d、margin外边距（画框和画框之间的距离）

二、边框
1.边框：border
2.每个盒子都有四条边框，默认是不显示边框的
3.边框有三个属性：颜色color、粗细width、样式style
4.通常需要着三个属性配合使用才能起到效果
5.边框颜色：border-color
a、border-top-color：red;单独设置上边框颜色
b、border-left-color：red;单独设置左边框颜色
c、border-right-color：red；单独设置右边框颜色
d、border-buttom-color：red；单独设置下边框颜色
e、border-color：red；设置四条边框都是红色
f、border-color：red black；表示上下边框红色，左右边框黑色
g、border-color：red black blue green；表示按照上右下左的顺序
h、border-color：red yellow blue；表示上red，左右yellow，下blue
6.边框粗细：border-width
a、thin，细边框，相当于1px;
b、medium，中等，默认值，相当于2px
c、thick，粗边框，相当于5px
d、也可以设置具体的像素值，单位是px，用的最多
e、设置各条边框粗细不同的话，语法规则和颜色一样
7.边框样式:border-style
a、dotted,点线
b、dashed，虚线
c、solid，实线
d、none，无样式，边框消失
8.边框的简写：
border-bottom：1px solid black; //同时设置底部边框的三个属性
border:1px solid black; //同时设置四条边框的三个属性
注意：三个属性值的顺序可以随意调换

三、外边框
1.margin：外边框
2.每个元素都有四个外边框，分别是：
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
3.外边距通常都给定一个具体的像素值，以px为单位
4.也可以通过margin直接设置四个方向的外边距，语法规则和颜色一样
5.案例：
a、两个div隔开一点
b、两个label隔开一点
6.浏览器给每个元素都设置了默认的外边距值，导致我们的div不能紧贴body
7.不同浏览器的默认外边距值不一样，可能导致页面排版效果不能兼容各种浏览器
8.解决上述问题的常用方法就是重置外边距，即清零外边距(margin:0;padding:0;)
9.可以通过并集选择器来实现并集选择器用逗号分隔：
body,div,h2{margin:0px }
10.如果像素值为0，可以省略px单位
11.如果想要元素居中显示：
a、先设置元素的宽width
b、再设置元素的左右边距为auto，即margin：0 auto；
c、左右边距为auto表示元素距离两边的距离自动调整为一样的宽度，那元素自然就居中了。

四、内边距
1.padding：内边距
2.内边距也是分为四个方向
3.用法和margin相同
4.浏览器默认就给元素添加了padding值，但是不同浏览器的padding值不一样
5.通常为了兼容浏览器，我们会重置margin和padding，把他们都清零
6.清零的一种简便写法：
*{margin:0 ; padding:0；}
7.上下padding都给相同的值，可以实现垂直居中的效果

五、盒子模型的尺寸
1.默认的盒子大小内盒计算公式为：
盒子模型内盒总尺寸=border(左右/上下)+padding(左右/上下)+内容宽度
2.Google Chrom浏览器调试工具的使用
a、F12可以打开调试，或者右键选择审查元素
b、可以临时修改样式的属性值来查看效果
3.每次这样去计算盒子的总宽度还是很麻烦的
4.可以通过box-sizing属性来改变盒子总宽度的计算模式
5.box-sizing：定义盒子模型尺寸的解析方式
a、content-box，默认值，即上面传统的计算方式
b、border-box，以width属性值作为元素的总宽度，其余的border和content,
padding都要在这个基础上扣除

六、圆角边框和盒子阴影
1.圆角边框是CSS3新增的特性，用于设置带边框的直角变为带弧度的圆角
2.弧度的大小可以通过像素值来设置
3.圆角设置的属性为：border-radius（边框半径）
border-radius：3px 8px 15px 26px; 左上、右上、右下、左下
border-radius：3px 8px 15px; 左上、右上和左下、右下
border-top-left-radius：20px； 单独设置左上
4.制作特殊图形
a、border-radius：0 0 0 100%；扇形
b、border-radius：50%； 圆形
c、width：100px；height：50px；border-radius：50px 50px 0 0；半圆
5.盒子阴影：box-shadow
box-shadow：inset x-offset y-offset blur-radius color；
6.inset：阴影类型，不设置表示是外阴影，设置了是内阴影
7.x-offset/y-offset 是指阴影的偏移量，可正可负
8.blur-radius：阴影的模糊程度
9.box-shadow：0 0 13px blue； //x、y都设置为0显示的是阴影环绕效果