行内元素与块级元素及切换

块级元素

1. 自己独占一行(应该理解为独占一块)
2. 可设置宽度，高度，内外边距的，没指定宽度，则默认为父元素宽度
3. 是一个容器，里面可以放各种标签，但文字类的元素中不能再放块级元素如<p><h1>
4. 常见的有div，h1～h6，p，hr，ol，ul，li，dl dd dt form 

行级元素

一行可以放多个元素

宽高设置没有效果，默认宽度是它本身内容的宽度（注意 这个地方img是可以设置宽高的，且可以设置上下margin）

行内元素只能容纳文本或其它行内元素

行内元素只能设置左右边距，左右padding，设置上下都无效

常见的有：span a，

 注意img元素：

1.img是可以设置宽高，但是，需要在src上导入可加载的图片，或者不要设置alt这个属性，此时时可以设置的

2.img是行内块元素

1、常见的行内元素

<span> <a> <lable> <strong> <b> <small> <abbr> <button> <input> <textarea> <select> <code>  <br> <q> <i> <cite> <var> <kbd> <sub> <bdo>

2、常见的块级元素

<div> <p> <li> <h1> <h2> <h3> <h4> <h5> <h6> <form> <header> <hr> <ol> <address> <article> <aside> <audio> <canvas> <dd> <dl> <fieldset> <section> <ul> <video>

 

行内块元素

 

  支持宽高，margin ,自左向右排列

  受空格影响

  不独占一行

常见的有：img  textarea  input

转换
display：inline（转为行内元素）

              inline-block（转为行内块元素）

              block（转为块元素）

              none（隐藏 不显示）

注意：当元素浮动（float）时会转化成行内块元素特点。