盒模型详细介绍和样式属性使用

盒模型：盒子模型，框模型
css将页面中的所有元素都设置为了一个矩形的盒子
将元素设置为矩形的盒子，对页面的布局就变成将不同的盒子摆放到不同的位置
每一个盒子都由以下几个部分组成：
    内容区 content ，元素中所有的元素和文本都在内容区中排列
    内边距 padding
    边框 border
    外边距 margin

1.文档流：

网页是多层结构，一层压着一层，通过css可以分别为每一层设置样式
用户只能看到最顶一层
这些层最底层成为文档流，是网页的基础
我们创建的元素默认是在文档流中进行排列
元素有两个状态：
           在文档流中
           不在文档流中（脱离文档流）
元素在文档流中有什么特点：
    块元素
           会在页面中独占一行
           默认宽度是父元素的全部，会把父元素撑满
           默认高度是被内容撑开
    行内元素
           不会独占一行，只占自身大小
           自左向右水平排列
           如果一行容纳不下，元素会换到第二行继续自左向右排列，书写习惯一致
           默认宽高都是被内容称开

2.边框border：
边框属于盒子边缘，边框大小会影响盒子大小
可以设置三个样式：

1.边框宽度border-width：默认值3px，可以指定四个方向的边框宽度
border-xxx-width： xxx可以是 top right bottom left指定某边宽度
例子：
    border-width: 10px 20px 30px 40px;
    border-width: 10px;

2.边框颜色border-color：同上，也可以指定四个边的边框颜色
例子：
    border-color: orange red yellow blue;
    border-color: orange;

3.边框样式border-style：默认值none，表示没有样式
可选值
    solid实线
    dotted点状虚线
    dashed虚线
    double双线
例子：

border-style: solid dotted dashed double;
border-style: solid;

边框简写属性border：通过该属性可以同时设置边框所有样式 无顺序要求
例子：

border: 10px red solid;
border-top: none;

3.内边距padding

内容区和边框之间的距离是内边距
同样有四个方向padding-xxx
内边距的设置会影响到盒子大小
背景颜色会延伸到内边距上
举例：

padding-top: 100px;
padding-left: 100px;
padding-bottom: 100px;
padding-right: 100px;

4.外边距margin

不会影响可见框的大小，但是会影响盒子的位置盒实际占用空间 决定和上下左右和其他元素的距离
同理 有四个方向的外边距margin-xxx
top 上外边距，设置正值，则元素向下移动
right 右外边距，默认情况下不会产生移动
bottom 下外边距，设置正值，其他元素会向下移动
left 左外边距

margin也可以设置负值，元素会向相反的方向移动
元素在页面中自左向右排列 所以默认情况下
    如果设置左和上外边距，则会移动元素自身
    如果设置右和下外边距，则会移动其他元素
    margin简写属性和padding一样
举例：

margin-top: 100px;
margin-bottom: 100px;

5.overflow溢出：

元素是在父元素的内容区中排列的
如果子元素的大小超过了父元素 则子元素会从父元素中溢出
使用overflow属性来设置父元素如何处理溢出的元素
可选值：
    visible 默认值 子元素会溢出 在父元素外部位置显示
    hidden 溢出内容会被裁减不会显示
    scroll 生成两个滚动条来查看完整内容
    auto 根据需要生成滚动条

overflow-x: 处理水平方向的溢出
overflow-y: 处理垂直方向的溢出

6.display：设置元素显示的类型

可选值：
    inline 将元素设置为行内元素
    block 将元素设置为块元素
    inline-block 将元素设置为行内块元素,(行内块：既可以设置宽高,又不会独占一行）
    table 将元素设置为表格
    none 元素不在页面中显示（隐藏一个元素）

7.visiblity： 用来设置元素的显示状态

可选值：
    visible 默认值 元素正常显示
    hidden 隐藏不显示 但是仍然占据页面中的位置

8.box-sizing：用来设置盒子尺寸的计算方式

设置width和height的作用
默认情况下盒子可见框的大小由内容区，内边距和边框共同决定
可选值：
    content-box 默认值 宽高用来设置内容区的大小
    border-box  宽高用来设置整个盒子可见框的大小
    width和height指内容区+内边距+边框总大小
举例：

    box-sizing: border-box;

9.box轮廓和圆角

box-shadow 用来设置元素的阴影效果 不会影响页面布局
    第一个值 水平偏移量 设置阴影水平位置 正右负左
    第二个值 垂直偏移量 设置阴影垂直位置 正下负上
    第三个值 阴影的模糊半径
    第四个值 阴影的颜色
举例：

box-shadow:10px 10px 30px rgba(0, 0, 0, .3)  ;

outlien 用来设置元素的轮廓线 用法和border一样
轮廓和边框不同的地方就是轮廓不会影响可见框的大小
举例：

 outline: 7px red solid;

border-radius 用来设置圆角 圆角设置的圆的半径大小
    border-top-left-radius:上左
    border-top-right-radius:上右
    border-bottom-left-radius:下左
    border-bottom-right-radius:下右
举例：
圆形

border-radius: 50%;

椭圆 以斜杠相隔

border-radius: 10px /20px;