css 总结

入门部分 

 

 

 

 

• CSS元素分类

• 块级元素

• 常用的块级元素有:

• <div> 、 <p> <h1>-<h6> <ol> <ul> <li> <dl> <dt> <dd> <table> <tr> <address> <blockquote>(这是引用标签) <form>
  

• 块级元素的特点:

• a. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。即块级元素都是自己占用一行。
  b. 元素的高度、宽度、行高以及到顶和底边的距离都可设置
  c. 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
  

• 设置display:block 可将元素显示为块级元素。如下代码就是将内联元素a转换为 块级元素，从而使a元素具有和块级元素特点。
  例: a{display:block;}

• 内联元素

• 常用的内联元素:

•     <a> <b> <span> <br> <i> <em> <strong> <label> <q>
  

• 内联元素的特点

•     a. 和其它元素都在一行上。即自己不独占一行
      b. 元素的高度、宽度以及到顶部和底部的距离不可设置
      c. 元素的宽度就是它包含的文字或图片的宽度，不可改变
  

• 内联元素可以通过 display:inline 将块级元素转为内联元素。从而使块级元素具有内联元素的特点。

•     例子:
      div{
          display:inline;
      }
      
      <div> 我会从块级元素变成内联元素 </div>

  内联块级元素

• 常用的内联块级元素有: <img> <input>
• 内联块级元素的特点:

•     a. 和其它元素在一行上
      b. 元素的高度、宽度、行高以及到顶部和底部的距离都可以设置
  

• 代码 display:inline-block 就是将于元素设置为内联块级元素