css小知识 2

效果为

为什么还出现出现不同的效果？

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

列表

1.无序列表ul

第二，内部必须有子代标签<li></li>

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

并集选择器

*选择器  有好处也有弊端

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

解决的办法就是    按需选择。

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

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

ol有序列表

1.内部必须有子代标签<li>

2.天生自带内外边距

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

用标签属性type修改

3.自定义列表

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

列表能做什么？

做二级菜单   做导航

备注

margin和padding问题的探讨

margin：200；设置一个值  说明 top  right   bottom   left    都是200px

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

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

margn：200px  50px   100px    50px；     上是200   右是50px     下是100px    50px

padding同上

实际占用的空间大小

通过分析我们发现   一个元素实际占用空间是

width+border+*2+padding*2+margin*2

一个标签元素的是高度

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

margin的塌陷现象是是很么？

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

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

根据以上现象，标签又分

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

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

二者区别

块级

1，块级元素会独占一行

2，块级可以设置1宽高

内敛

1，内敛不会独占一行

2，内敛不可以设置宽高

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

二者转换

块级转行级

给块级元素添加属性 display：inline；display  显示      inline  hang

行级转块级

给行级元素添加属性display：block；          block块

行级块元素

给需要的元素添加属性  display：inline-block；

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

备注

line-height   行高    设置字体的垂直位置

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

拓展  line-height：50px/2；

当是2的时候  line-height的值是2*font-size的大小==36px