zoukankan      html  css  js  c++  java
  • 块级元素与内联元素

    块级元素(block-level)

             常见的块元素有<h1>~<h5>、<p>、<div>、<ul>、<ol>、<li>等,其中<div>是最典型的块元素

    特点:

    1、独占一行

    2、高度、宽度、内边距、外边距、边框都有效

    3、宽度默认是父元素宽度的100%

    4、是一个盒子及容器,里面可以放行内元素或者块级元素

    注意:

    1、只有文字才能组成段落,因此p标签里不能放块级元素,特别是p标签不能放div

    2、同理还有这些标签h1~h6,dt(自定义列表dl的下级描述标签),他们都是文字类块级元素标签,里面不能放其他块级元素

    3、除了以上特殊标签,其他都没问题

    行内元素(inline-level)

    常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等,其中<span>标签是最典型的行内元素。有的地方也成内联元素

    特点:

    1、相邻行内元素在一行上,一行可以显示多个。

    2、高、宽是无效的

    3、边框上下左右都有效,但不会影响布局

    4、外边距左右有效,上下无效

    5、内边距上下左右都有效,但是不会影响布局

    6、大小默认被内容撑开

    7、行内元素只能容纳文本或其他行内元素

    注意:

    1、链接里面不能再放链接

    2、特殊情况a里面可以放块级元素或其他行内元素,但是给a转换一下块级元素最安全

    行内块元素(inline-block)

    在行内元素中有几个特殊的标签<img>、<input>、<td>可以对它们设置宽高和对齐属性,有些资料可能会称它们为行内块元素

    特点:

    1、和相邻行内元素(行内块)在一行上,但是之间会有空白间隙(除非代码中的两个元素中间没有任何空白),一行可以显示多个

    2、大小默认被内容撑开

    3、高度、行高,内外边距边框都有效

  • 相关阅读:
    .net core 一次坑爹的类库打包过程
    elasticsearch的store属性 vs _source字段
    VMware虚拟机中CentOS设置固定IP
    Elasticsearch 中文分词(elasticsearch-analysis-ik) 安装
    docker之docker-machine用法
    docker之数据卷管理
    docker之Dockerfile实践
    docker之Dockerfile指令介绍
    docker之手动构建新的镜像
    docker之container
  • 原文地址:https://www.cnblogs.com/webpon/p/13445143.html
Copyright © 2011-2022 走看看