每天一个小知识：HTML(块元素、行内元素、行内块元素和空元素)、null和undefined区别、css盒子模型详解

HTML(块元素、行内元素、行内块元素和空元素)

HTML可以将元素分类方式分为块元素、行内元素、行内块元素和空元素。其中块元素、行内元素和行内块元素这三者是可以互相转换的，使用display属性能够将三者任意转换：

1. display:inline;转换为行内元素
2. 　　display:block;转换为块状元素
3. 　　display:inline-block;转换为行内块状元素

块元素

块状元素最具代表性的就是div标签，大部分块元素标签可以用div来实现。为了可以方便程序员解读代码，一般都会使用特定的语义化标签，使得代码可读性强，且便于查错。

特征：1.设置宽高值。2.margin和padding的上下左右均对其有效。3.自动换行。多个块状元素标签写在一起，默认排列方式为从上至下。

eg:div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu…

行内元素

行内元素最常使用的就是span，其他的只在特定功能下使用

特征：1.无法设置宽高。2.对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间,行内元素尺寸 。padding设置上下左右都有效，即会撑大空间但是不会产生边距效果。3.不会自动换行。

eg：span 、a 、strong 、em 、b 、s 、i 、img 、input 、select 、textarea 、button 、label …

行内块元素

行内块状元素综合了行内元素和块状元素的特性

特征：1.不自动换行。2.能够识别宽高。3.默认排列方式为从左到右

eg：img 、input 、select 、textarea 、button 、label …

空元素

eg：br、hr、imput、img（后两个不设置内容时）

---

null和undefined区别

1、null

null是一个表示“无”的对象，转为数值时为0。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。由于 null 代表的是空指针（大多数平台下值为 0x00），因此，null 的类型标签是 0，typeof null 也因此返回 "object"，值 null 特指对象的值未设置，是一个空指针对象。在基础数学运算中，null值将被转换为0。

用法：1.作为函数的参数，表示该函数的参数不是对象。2.作为对象原型链的终点

2、undefined

undefined是一个表示“无”的原始值，转为数值时为NaN。当声明的变量还未初始化时，变量的默认值为undefined，

用法：1.变量声明未赋值，等于undefined；2.当调用函数时，如果没有提供应该提供的参数，该参数就等于undefined；3.如果对象没有赋值，该属性的值为undefined；4.函数没有返回值时，默认返回undefined。

---

css盒子模型详解

盒子组成

内容（content）、margin（外边距）、border（边框）、padding（内边距）。

盒子的大小

盒子的大小指的是盒子的宽度和高度，而不是指width和height。

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距

盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

 

盒子的宽度和高度的计算方式由box-sizing属性控制。当box-sizing：content-box时，这种盒子模型成为标准盒子模型，当box-sizing: border-box时，这种盒子模型称为IE盒子模型。

盒子成分分析

margin

：盒子的外边框，完全透明，开发者只可以设置它的边距。margin包含了上下左右四条边，开发者可以单独设置每一条边的边距。

margin-top：10px ；上边距、margin-buttom：20px；下边距、margin-left：30px 左边距、margin-right： 40px;右边距

/简写/

margin: 10px（上） 20px（右） 30px（下） 40px（左）;

padding

：盒子的内边距（填充），可以设置背景颜色和图片。padding包含了上下左右四条边，开发者可以单独设置每一条边的边距。

padding-top：10px;上部填充padding-bottom：20px;下部填充padding-left：30px左部填充padding-right：40px;右部填充

/简写/

padding：10px (上)20px (右)30px (下)40px(左)；

border

：表示盒子的边界，它可以设置样式。border包含了上下左右四条边，开发者可以单独设置每一条边的边距。

border-top：2px solid green;上边界border-bottom：2px solid green;下边界border-left：2px solid green;左边界border-right：2px solid green;右边界

/简写/

border:2px solid green;

除了可以单独对每一条边进行样式设置之外，还可以分别对边界的宽度、样式和颜色进行设置），同样可以使用简写属性border进行设置。

• border-width：边界宽度
• border-style：边界样式
• border-color：边界颜色

border-sytle属性可取值：

• none：定义无边框。
• hidden：与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
• dotted：定义点状边框。在大多数浏览器中呈现为实线。
• dashed：定义虚线。在大多数浏览器中呈现为实线。
• solid：定义实线。
• double：定义双线。双线的宽度等于 border-width 的值。
• groove：定义 3D 凹槽边框。其效果取决于 border-color 的值。
• ridge：定义 3D 垄状边框。其效果取决于 border-color 的值。
• inset：定义 3D inset 边框。其效果取决于 border-color 的值。
• outset：定义 3D outset 边框。其效果取决于 border-color 的值。
• inherit：规定应该从父元素继承边框样式。

边界半径,也就是圆角。边界半径由属性border-radius进行控制，这是一个简写属性，像上面提到过的margin、padding等一样，可以有一个、两个、三个或四个值进行设置。同样也可以对盒子的每一个角的半径进行单独设置。边界半径可以使用 px、em 等长度单位，也可以使用百分数。

border-top-left-radius：左上角border-top-right-radius：右上角border-bottom-left-radius：左下角border-bottom-left-radius：右下角

/简写/

border-radius: 10px 20px 30px 40px;