刚接触HTML css可能遇到的问题以及解决方法

问题

• 标签嵌套
• 标签选用
• 结构（有的上下有的左右，怎么把上下变成左右）

解决方法

标签的嵌套要求

• 块标签里面可以嵌套块标签以及行内标签

<div>
    <a href="#"></a>
</div>

• 行内标签里面不能嵌套块标签

解决结构问题

元素的分类

• 行内元素
  • a em i…
  • 不独占一行
  • 左右结构
  • 设置宽高不会有任何变化
  • 受换行符的影响，会产生默认间距
    • 解决默认间距
      • 代码中行内块不换行，这是最笨的方法
      • 给其父元素加一个font-size：0；但是会影响自己的文字大小，因此在自己身上也加上font-size属性就可
  • display默认为inline
  • 加float浮动一行，自动转化为块元素
• 行内块元素：既有行内元素的特点也有块元素的特点
  • img …
  • 不独占一行
  • 左右结构
  • 可以设置宽高
  • 受换行符影响，也会产生默认间距
  • display默认为inline-block
• 块元素
  • div p 三大列表…
  • 独占一行
  • 上下结构
  • 可以设置宽高，以及盒子模型的所有属性
  • display的默认值为block

根据这些标签的分类，解决

• 一般把行内标签转化为行内块标签进行
  • display进行转化成行内块
  • 行内块 元素的垂直对齐方式
    • 基线对齐 vertical-align，三个属性
      • top 上对齐
      • middle 中对齐
      • bottom 下对齐

li{
    display:inline-block;
    vertical-align：top
}