前端小知识点

看似简单的东西，越是很重要，赶紧收藏起来吧！
标签的嵌套：

1. 块标签可以嵌套任何标签
   2.p标签绝对不能嵌套块标签
2. 行标签不能嵌套块标签，可以嵌套行标签（例外a标签可以嵌套块标签）
   注意：a)自己不能嵌套自己 b)display：block ;变成块之后也不能嵌套块标签\列表
   列表的样式：list-style-type: none disc square
   距离 内边距 ，内补丁，内补白
   padding: top right bottom left
   单独的四个方向：
   a)padding-top： 左边距
   b padding-bottom ： 下边距
   c padding-left ： 左边距
   d)padding-right ： 右边距简
   padding : 上下左右； 一个值
   padding： 上下，左右； 两个值
   padding： 上，左右，下 三个值
   padding： 上 ，右，下，左， 四个值
   盒子模型： 盒子=标签 标签的模型 标签在页面中占的大小 盒子模 型的组成：width /height+padding+boder 注意：如果标签设置了宽高，在设置Padding的时候会往外挤，一定要用宽高减掉padding，标签如果有需要，最好设置宽度。
   margin: 外边距（盒子与盒子之间的距离）
   margin: top right bottom left
   单独的四个方向：
   a) margin-top ： 左边距
   b)margin-bottom： 下边距
   c)margin-left： 左边距
   d)margin-right ： 右边距简
   padding : 上下左右； 一个值
   padding： 上下，左右； 两个值
   padding： 上，左右，下 三个值
   padding： 上 ，右，下，左， 四个值
   注意：margin塌陷，如果上下两个值一样，听一个，如果一个大，一个小，挺大的。 margin:行元素只有margin-left 和 margin-right
   padding:行元素只有padding-left/padding-right/padding-bottom
   很多元素自带margin和padding 写样式之前，需要把所有元素的margin和 padding都清空
   *{
   margin: 0; padding: 0;
   }
   列表
   无序列表：
   <ul>
   <li> 内容 <li>
   <li> 内容 <li>
   <li> 内容 <li>
   </ul>
   有序列表：
   <ol>
   <li> 内容 <li>
   <li> 内容 <li>
   <li> 内容 <li>
   </ol>
   描述列表：
   <dl>
   <dt>内容标题</dt>
   <dd> 内容 <dd>
   <dd> 内容 <dd>
   <dd> 内容 <dd>
   </dl>
   列表的样式：list-style-type: none disc square