zoukankan      html  css  js  c++  java
  • 关于块级元素与行内元素

    块级元素

    块级元素拥有以下的几个特征:

    1. 如果宽度未设置,则元素会自动适应父元素的宽度
    2. 可以拥有外边距与内边距
    3. 如果高度未设置,则元素会自动适应子元素的高度(假设它们没有设置浮动与定位)
    4. 默认情况下,将放置在Html标记里前一元素之后(假设没有浮动或定位)
    5. 忽略vertical-align属性

    所以,对于块级元素来说,我们没有必要设置width:100%来让它的宽度撑满父元素,而且那样做的话还有可能会对日后的维护带来麻烦。

    而且,对于上述第四点来说,我们没有必要对块级元素设置"clear",假设没有浮动来影响,块级元素将自动会在新启的一行里出现。

    块级元素:

    <p>, <div>, <form>, <header>, <nav>, <ul>, <li>, <h1>

    行内元素

    行内元素拥有以下的几个特征:

    1. 不会像块级元素一样占用一行
    2. 支持white-space属性
    3. 忽略上下外边距,但是拥有左右外边距以及所有内边距
    4. 忽略widthheight属性
    5. 如果设置浮动,则会变成一个块级元素,将会拥有块级元素的所有特性
    6. 支持vertical-align属性

    行内元素的表现会像一个文本框。它们将会一个挨着一个出现。

    行内元素标签:

    <a>, <span>, <b>, <em>, <i>, <cite>, <mark>, <code>.


    我们可以注意到,其实区分行内元素与块级元素还是比较容易的,块级元素通常可以包含其他的元素,而行内元素一般来说都是基于文本的。

    通常来讲,你可以让块级元素包含于另一个块级元素中。也可以让行内元素包含于块级元素或者是行内元素中。但你不可以让一个块级元素包含于行内元素里。但是有一个里例外:你可以在<a>标签里包含块级或者是行内元素。

    我们可以通过使用display属性来实现块级元素与行内元素的互换。

  • 相关阅读:
    基于mAppWidget实现手绘地图--索引&DEMO
    C语言数据结构----栈的定义及实现
    libvirt命令行文档
    清理系统方法
    Linux 经典电子书共享下载
    使用数组实现队列----《数据结构与算法分析---C语言描述》
    清理系统垃圾
    epoll的内部实现 & 百万级别句柄监听 & lt和et模式非常好的解释
    进程、线程、socket套接字-资源大小 & 切换代价
    网络编程学习-面向工资编程
  • 原文地址:https://www.cnblogs.com/deryck/p/4409267.html
Copyright © 2011-2022 走看看