盒模型、标签分类及转换(1)

一、盒模型

PC端网站上，网页布局的三大核心 （盒模型、浮动、定位）

1.1 盒模型概念

盒模型 叫 “ box model ” , 所有的HTML标签都有一个盒模型，在css里 盒模型用来设计布局时使用。

1.2 标准盒子模型的组成

content（内容区域）+ padding（内边距）+ border（边框） + margin（外边距）

1.3 content区域 （内容区域）

• width 宽度

• height 高度

• min-width / max-width ( 最小宽度/最大宽度 )

• min-height / max-height (最小高度/ 最大高度)

    max-width:1000px;   可以比当前值更小，不能更大
    min-width:600px;    可以比当前值更大，不能更小
    min-height:400px;   可以比当前值更大，不能更小
    max-height：400px；  可以比当前值更小，不能更大

1.4 padding区域 （内边距）

内容 和 盒子边缘 之间的间距叫 “内间距”

            padding-left: 30px;   左内边距
            padding-right: 30px;  右内边距
            padding-top: 40px;    上内边距
            padding-bottom:70px;  下内边距
            
            
            复合写法：
             /* padding:20px; 四周 */
            /* padding:30px 35px; 上下  左右 */
            /* padding:10px 20px 30px;  上  左右  下 */
            /* padding:10px 20px 30px 40px;  上  右   下  左 （从上开始 顺时针一圈） */

1.5 border区域 （边框）

写法一：

          /* 边框宽度、边框样式、边框颜色 */
            border-width: 20px;
            border-style: solid; /* 实线 */
            border-color:red;

            border-width: 10px 10px 10px 10px;
            border-style: solid dashed dotted double; /* 实线  虚线  点线  双实线 */
            border-color:red green blue yellow;
​
           属性值 支持1-4个值的写法
            一个值：代表四周
            二个值：上下   左右
            三个值：上  左右    下
            四个值：上  右   下  左 （从上开始，顺时针一圈）

写法二:

单独指定某一边边框时使用

            border-top:10px solid yellow;   边框宽度  边框样式  边框颜色
            border-right:5px dashed blue;
            border-bottom: 5px dotted deeppink;
            border-left: 10px double tomato;

写法三：

四边具有相同边框时使用

            border:10px solid red;

            border-right: 0/none; /*去掉某一边边框*/

利用边框实现三角形

.sanjiaoxing{
            width: 0;
            height: 0;
            border-width: 100px;
            border-style: solid;
            /* 透明颜色：transparent */
            border-color: transparent yellow transparent transparent ;
}
​
​
    <div class="sanjiaoxing"></div>

1.6 margin 外边距

盒子边缘之外的间距

            margin-top: 50px;   上外边距
            margin-left:50px;   左外边距
            margin-bottom: 70px;  下外边距
            margin-right: 30px; 右外边距

          复合写法
          margin:20px 30px 40px 50px;
          
           属性值 支持1-4个值的写法
            一个值：代表四周
            二个值：上下   左右
            三个值：上  左右    下
            四个值：上  右   下  左 （从上开始，顺时针一圈）

  /* 给块标签设置  让块标签水平居中 */
           margin: 0 auto; 

1.7 盒子模型的水平占位和垂直占位

盒子的总占位宽 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的总占位高 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom