html css中block盒子模型讲解

盒子模型是什么？

可以把盒子模型看作是一个快递：

• 快递纸箱的厚度叫边框
• 快递纸箱边框与里面的物品的距离叫内填充
• 如果有多个快递，两个快递纸箱之间的距离叫外边距
• 快递纸箱是有宽高的，也就是盒子模型的宽度和高度

每一个块级元素都是一个盒子模型，都具有边框，内填充，外边距的属性。比如div、p、h1元素默认都是块级元素。

而内联元素是没有这些属性的。比如span默认就没有这些属性。

当然这些只是默认时而已，我们可以随时通过display属性修改元素是否为块级。

display属性

display属性可以自定义元素是否成为块级元素。

/* 显示为内联元素，元素前后没有换行符 */
display: inline;

/* 显示为块级元素，元素前后会有换行符且是一个盒子模型 */
display: block;

/* 显示为行内块元素，元素呈现为inline(没有换行符)，但具有block特征 */
display: inline-block;

/* 不显示元素 */
display: none;

宽度与高度

CSS	介绍
width: 宽度值/百分比/auto	宽度
max-width: 宽度值/百分比/auto	最大宽度
min-width:宽度值/百分比/auto	最小宽度
height: 长度值/百分比/auto	高度
max-height: 长度值/百分比/auto	最大高度
min-height: 长度值/百分比/auto	最小高度

注意：

块级元素和替换元素可设置宽高：

• 块级元素：<div> <ul> <ol> <li> <dl> <dt> <dd> <h1> <p> <form> <hr>
• 替换元素：<img> <input> <textarea>

内联元素不可设置宽高：

• 内联元素：<b> <em> <a> <span>

border边框

• 边框宽度（border-width）
• 边框颜色（border-color）
• 边框样式（border-style: none/hidden/solid/groove/ridge/inset/outset/inherit ）

border边框简写：

• border: 宽度 样式 颜色
• border-top: 宽度 样式 颜色

内填充和外边距

内填充

    padding: 值1;               /*4个方向都为值1*/
    padding: 值1 值2;           /*上下=值1，左右=值2*/
    padding: 值1 值2 值3;       /*上=值1，左右=值2，下=值3*/
    padding: 值1 值2 值3 值4;   /*上右下左*/

注意： 内填充的值不可为负

外边距

    margin: 值1;                /*4个方向都为值1*/
    /*...与内填充一致*/
    
    /*值为auto时，实现水平方向居中显示，由浏览器自动计算*/
    margin: auto;
    
    /*默认情况块级元素(body、h1-h6、p)存在外边距*/
    body,h1,h2,h3,h4,h5,h6,p { margin:0; }

注意：

• 外边距的值可以为负
• 垂直方向，两个相邻元素会重叠外边距，已最大的外边距为准。

box-sizing

/* 默认值，宽度和高度外绘制内填充和边框 */
box-sizing: content-box

/* 内容+内填充+边框=宽高 */
box-sizing: border-box

z-index

• z-index仅能在定位元素奏效
• 对于同级元素，static情况下后面元素会覆盖前面的，不可用z-index
• 对于同级元素，position不是static且z-index设置的情况下，z-index越大越优先
• z-index为auto的元素不参与层级关系的比较，由向上遍历至此且z-index不为auto的元素来参与比较