zoukankan      html  css  js  c++  java
  • __x__(17)0906第三天__块元素block_内联元素inline_行内块元素inline-block

    1. 块元素block

    • 独占一行的元素
      • 一般使用块元素包含内联元素,用作页面布局
      • <a> 标签可以包含任何除了a标签以外的元素
      • <p> 标签不能包含块元素
      • h1... ...h6
      • <hr />
      • <center></center>
      • <div> 标签不含任何语义,被用于页面布局

    2. 内联元素 inline

    行内元素        只占自身大小的位置,不会独占一行。通常用于选中文本,设置样式

    • 内容区    不能设置 width 和 height ,设置了没用。
    • 水平方向 内边距,可以设置,会影响布局,正常
    • 垂直方向 内边距,可以设置,不会影响布局,会覆盖原位置其他元素
    • 水平方向的 边框,可以设置,会影响布局,正常
    • 垂直方向的 边框,可以设置,不会影响布局,会覆盖原位置其他元素
    • 水平方向的 外边距,可以设置,且不会重叠,而是求和增加
    • 垂直方向的 外边距不能设置
      • <span></span> 无任何语义,用于选中行内内容,进行样式设置
      • <img></img>
      • <a></a>
      • <iframe></iframe>

     

    3. 行内块元素 inline-block

    既有块元素特点,又有内联元素的特点。

    既可以设置 width 和 height,又不会独占一行。


     值得注意的是:

    在 HTML5 中,已经不使用这两个概念了,而是用了更复杂的

     

    --------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...
  • 相关阅读:
    ubuntu 下安装Angular2-cli脚手架
    git的使用及常用命令(二)
    framework7+node+mongo项目
    LINUX下安装搭建nodejs及创建nodejs-express-mongoose项目
    初学strurs基础
    JAVA Struts2 搭建
    mongodb的基本操作
    LightOj_1342 Aladdin and the Magical Sticks
    Codeforces Round #Pi (Div. 2)
    Codeforces Round #315 (Div. 2)
  • 原文地址:https://www.cnblogs.com/tianxiaxuange/p/9601793.html
Copyright © 2011-2022 走看看