9.13

面试题

为什么两个P出此案的效果不同，原因是 浏览器在解析第二个P的时候，因为字母没有空格，浏览器会认为这个单词没有打完，所以不会换行。

列表 ul ol dl li

1、无序列表 ul

（1）内部必须有子标签<li></li>

（2）ul天生自带外边距  <p>也是自带外边距

❤list-style 样式属性 可以清楚列表前面的符号

list-style的属性值：circle/disc/square/none

❤并集选择器，用英文状态下的逗号隔开

❤*选择器，优缺点

优点：省事

缺点：增加了浏览器的负荷

解决办法：按需选择

2、有序列表 ol

（1）内部必须有子标签<li></li>

（2）天生自带内外边距

❤ul和ol的区别主要在于前面的符号

ol前面的符号属性更改在标签里

<ol type="A"></ol>

3、自定义列表 dl

dl dt dd（自定义列表 小标题 内容）

❤列表可以做什么：二级菜单 导航

❤有关margin和padding问题的探讨

（1）margin：200px；只设一个值，它的上下左右边距都是200px

（2）margin：200px 100px；设两个值，上下边距是200px，左右边距是100px

（3）margin：200px 50px 100px；设三个值，上边距是200px，左右是50px，下边距是100px

（4）margin：200px 50px 100px 50px；它是顺时针设置的，则上 右 下 左

❤空间的实际占用空间

通过分析我们可以知道，一个元素实际占用的空间（区域）是：width+border*2+margin*2

❤一个标签元素的实际高度

height+padding-top+padding-bottom+border*2

❤margin的塌陷现象是什么？

相邻的两个块级元素都设置margin时，他们的外边距不会叠加，会取最大值，这种现象就叫做margin塌陷

4、有的标签设置背景时会独占一行，还有的会根据内容的增减而改变自己的空间大小，则

块级元素：p h1-h6 div ul ol dl li

内联元素：span img i b a em icon

❤二者的区别

块级元素

（1）块级元素会独占一行

（2）块级元素可以设置宽高

内敛元素

（1）内敛不会独占一行

（2）不可以设置宽高

（3）内联元素的上下margin不起作用

❤二者转换

块级元素转行级

display：inline;

行级转块级

display：block；

行级块元素（给需要的元素添加属性）

display：inline-block;

可以设置宽高，可以在一行，margin可以随便使用

❤lin-height（行高）可以设置字体的垂直位置

line-height的值和height的值相同的时候，文本就是上下居中了

❤line-height的值

line-height：50px/2；

当为2时，line-height的值是2*font-size的大小