04-第四章_元素的显示类型与转换

一.样式初始化

为什么要样式初始化
通配符的弊端
逐个清除
需要的才去清除
body,p,ul,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
ul,ol{list-style:none;}
img{border:0px;}
a{text-decoration:none;color:#222;}

二.标签分类

块级元素

特性

• 1. 独占一行
• 2. 默认宽度100%.支持宽高.行高
• 3. 支持外边距和内边距
• 4. 可以包裹内联元素和其他块元素
• 5. p不内包裹（块元素特殊块级元素）
     常见块级元素
     div / dl / form / h1-h6 / ol / ul / p

内联元素(行内元素)

特性

• 1. 和其它内联元素同处一行
• 2. 不支持宽高
• 3. 外边距上下无效.auto无效
• 4. 内边距只对内联元素产生影响.无视块元素
• 5. 标签之间空格被解析
• 6. a能包裹块元素特殊内联元素
• 7 内联不能嵌套块级标签（a标签除外）
  常见内联元素
  a / b / em / i / img / input / lable / span
  三.标签转换(属性:display)
  内联元素转换为快元素(属性值:block)
  块元素转换为内联元素(属性值:inline)

转换成行内快元素(属性值:inline-block)

特性

• 1. 横排显示
• 2. 支持宽高
• 3. 没有宽高时内容撑开
• 4. 支持外边距,不支持auto
• 5) 标签间隔被解析
  **间隔解析解决方法
  给行内块元素父级设置字体大小为零,行内块元素字体大小重新设置 **

  <style>
   ul{
      font-size:0;
   }
   li{
      display:inline-block;
      font-size:16px;}
  </style>
  <ul>
   <li>我是1</li>
   <li>我是2</li>
  </ul>

image.png

隐藏对象(属性值:none)

display:block;有显示的意义,和display:none;是对立的

    <style>
         .parent{
                width:200px;
                height:200px;
                background-color:pink;
        }
         .child{
                display:none;
                margin:auto;
                width:50px;
                height:50px;
                background-color:yellow;
        }
         .parent:hover .child
                display:block;
        }
     </style>
     <div class='parent'>
           <div class='child'></div>
     </div>
  </style>