9.13

浏览器在解析第二个p的时候，因为字母之间没有空格，他会认为这是一个单词没有写完，所以不会换行

无序列表 ul

第一 内部必须有子标签 <li></li>

第二 ul天生自带内外边距   还有一个 p 标签

并集选择

*选择器 有好处也有弊端

　　好处 就是省事，弊端，就是因为太省事了，加大了浏览器的负荷。

解决办法  按需选择。

List-style   这是样式属性 除去列表前的符号

List-style的属性值 circle（空心圆） disc（实心圆）square（正方形）none（空）

ol 有序列表

内部必须有子标签<li>

天生自带内外边距

Ol和ul不同之处就在前面符号的区别。

用标签属性type修改

3.自定义列表

Dl 自定义列表 dt 是小标题  dd内容

Margin:200px;设置一个值 说明top right bottom left 都是200px

Margin：200px 100p；设置两个值 上下是200px  左右是100px

Margin：200px 50px 100px 上是200px 左右是50px  下是100px

Margin:200px 50px 100px 50px; 上是200  右是50px 下是100px 左是50px

一个元素实际占用的空间（区域）是

Width+border*2+padding*2+margin*2

一个标签元素的实际高度

实际高度=height+padding-top+padding-bottom+2*border

Margin的塌陷现象是指相邻两个块级元素同时设置margin时，他们之间的外边距不会叠加，会取最大的。这种现象叫margin塌陷。

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

标签又分为

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

内敛：span img i b a em icon（矢量标签）

二者区别

块级

1，块级元素会独占一行

2，块级可以设置宽高

内敛

1，内敛不会独占一行

2，内敛不可以设置宽高

3，内敛元素的margin上下不起作用了

块级转行级

给块级元素添加属性display:inline; display 显示  inline 行

行级转块级

给行级元素添加属性display:block;    block块

行级块元素

给需要的元素添加属性 display:inline-block;

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

Line-height的值和height的值相同 文本就上下居中

转载于:https://www.cnblogs.com/yang08/p/9708191.html