05、HTML&CSS-元素类型

每天一句：99分和100分的区别是在于，满分只有100分。

一、元素类型

根据CSS现实分类，XHTML可以分为: 块状元素、行内元素、行内块元素、可变元素;

二、块元素block

  > 块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域;
  > 常用元素有div/dl/dt/dd/ol/ul/fieldset/h1~h6/form/hr/colgroup/col/table/tr/td....;
  > 默认情况下，块状元素都会占据一行;
  > 块状元素都可以定义自己本身的宽度和高度;
  > 块状元素一般为其他元素的容器，可以容纳其他元素，也是比喻为盒子;

三、行内元素inline(内联元素)

  > 常见的内联元素a/span/i/em/strong/b/del...;
  > 内联元素的边线形式是始终以行内逐个进行显示;
  > 内联元素没有自己的形状，不能定义宽度和高度，只能根据内容的高度和宽度来确定，它的最小内容单元也会呈现矩形形状;
  > 内联元素也会遵守盒模型基本规则，如可以定义padding/border/margin/background等属性，但个别属性不能正常显示;(padding-left/padding-right可以使用);

四、行内块元素inline-block(内联块元素)

  > 常见元素img/input；
  > 行内块元素，是行内逐个显示；
  > 行内块元素，还可以设置宽度和高度；

五、元素类型转换

 > display: block; 块状元素: 类似在元素后面添加换行符，也就是说其他元素不能再其后面并列显示;
 > display: inline; 内联元素: 在元素后面删除换行符，多个元素可以在一行内并列显示;
 > display: inline-block; 内联块元素: 元素的内容以块状显示，行内的其他元素显示在同一行；
 > display: none; 此元素不会被显示;

备注: 
  > 当元素设置float属性后，就相当于给该元素加了display: block;属性;

六、水平居中设置技巧

• 内联元素和内联块元素都是可以通过text-align设置改变水平对齐方式的，但是块元素不起效果;
• 块元素如果要设置为居中，必须得用margin: 0 auto;

七、垂直居中设置技巧

  原理: 让span标签作为a标签居中的基线参考(inline-block支持text-align和vertical-align属性)
    0、a和span设置为内联块元素(vertical-align才有效)
    1、a标签垂直居中vertical-align: middle;
    2、span标签垂直居中vertical-align: middle;
    3、span标签高度与父元素一致height: 100%;
    4、span只是参考，不需要显示width: 0;

八、边框设置技巧(九宫格)

九宫格效果

<style>
  *{
      margin: 0;
      padding: 0;
   }
  ul{
      width: 204px;
      height: 200px;
      margin: 30px auto;
      /*border: 1px solid gray;*/
   }
  li{
      width: 50px;
      height: 50px;
      border: 1px solid gray;
      float: left;
      list-style: none;
      /* 边框设置技巧*/
      margin: -1px 0 0 -1px;
   }
</style>


<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>