块元素

代表元素：h1-h6,p,div,ul,li, ol ,li,dl ,dt,dd…..
特点：

  1. 独占一行
  2. 没有设置按宽度的情况下默认为父元素宽度的百分之百
  3. 可以设置宽高

默认属性:display:block

行内元素

代表元素:span,格式化,a
特点：

  1. 一行多个
  2. 不能设置宽高
  3. 宽度默认为内容的宽度

默认属性：display:inline

行内块元素

代表元素:img,input,td
特点：

  1. 一行多个
  2. 可以设置宽高
  3. 宽度为元素本身的大小
    默认属性：display:inline-block

display:none使元素隐藏，一般与display：block来控制元素的显示和隐藏

三类元素的转换：

  1. 转换成块元素:display:block
  2. 转换成行内元素:display:inline
  3. 转化成行内块元素:display:inline-block

display:inline-block问题

  • 会产生行内块元素之间会有一个大约4px的一个距离
    产生原因：换行符导致的
    解决办法：
  1. 删除换行符或者注释换行符
  2. 给父元素设置font-size：0，然后给本身一个不为0的字体大小
  • 在ie8以下不兼容
    需要添加以下两行代码：
    display:inline
    zoom:1

三类元素的嵌套

  1. 块元素可以嵌套块元素，行内元素和行内块元素，比如div
  2. 某些块元素只能嵌套行内元素，而不能嵌套块元素，这些元素包含p和h1-h6
  3. 行内元素不能嵌套块元素，只能嵌套其他的行内元素
  4. a标签是万能的， 可以嵌套任何元素(使用时将a标签转换成块元素)，意思是只要是a标签里面的内容都是可以点击跳转的
  5. 尽量写页面结构的时候，使同类元素同级

三类元素的水平居中

  1. 块元素水平居中：
    设置属性 margin:0 auto(这个块元素必须有宽)
  2. 行内元素和行内块元素进行居中
    使其用块元素进行包裹，然后给块元素一个text-align:center