首页 > Web开发 > 详细

07-元素类型以及元素类型的转换/css

时间:2020-08-08 17:57:23      阅读:80      评论:0      收藏:0      [点我收藏+]
#### img引入图片的bug
  * 图片自带3px的底部留白
    + 给图片设置vertical-align:bottom/middle/top
#### 去掉input按下时候的样式
  * outline:none; 去掉边框 
#### 元素类型
  * 块级元素 div p ul li h1-h6 ol dl dt dd
    + 可以设置宽高
    + 盒模型属性都生效
    + 独占一行
  * 内联元素 span b strong i em a u del img 
    + 在同一行显示
    + 不可以设置宽高,宽高由内容撑开
    + padding的左右显示准确,上下显示不准确,margin属性的左右显示准确,上下不准确 
    + margin:0 auto,不生效
    + 可以给内联元素添加一个外层的盒子形成一个大的区域,给该盒子设置text-align:center的居中属性 
    + 添加浮动可以解决内联元素之间的间歇,也能将内联元素的元素类型转换为块元素
  * 内联块元素 input img  
    + 可以设置宽高
    + 在同一行显示
    + 盒模型属性都适用
  * *为什么img和input可以设置宽高??* 
    + 置换元素:img和input属于置换元素 
      img的src和input的type是不确定的,可以更换
      <img src="">
      <input type="text/password">
    + 非置换元素: 除了置换元素之外  
  * 元素类型的转换 display
    + block 块级元素
    + inline 内联元素
    + inline-block 内联块元素
      - 盒子和盒子之间会产生空隙,两个标签之间的回车导致
        1. 将元素的代码在同一行编写 
        2. 给在同一行的显示的元素的父元素设置font-size:0;该元素设置正常的字体大小
    + **none 隐藏元素 隐藏之后不占位**
      + visibility:hidden; 隐藏元素,隐藏之后占位    
 

07-元素类型以及元素类型的转换/css

原文:https://www.cnblogs.com/qdbj2020/p/13457696.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!