zoukankan      html  css  js  c++  java
  • 标签显示模式(display)

     

    非洲黑人: 皮肤内黑色素含量高,以吸收阳光中的紫外线,保护皮肤内部结构免遭损害,头发象羊毛一样卷曲,使每根卷发周围都有许多空隙,空隙充满空气,卷发有隔热作用。

    欧洲白人: 生活寒带或着是说常年温度较低的地缘,加上年日照时间少,身体的黑色素沉淀比较少``所以出现皮肤、发色、瞳晕都呈现浅色

    亚洲黄人: 我中间的。。。

    最重要的总结: 是为了更好的适应环境而完成的自然选择。

    同理,我们网页的标签非常多,再不同地方会用到不同类型的标签,以便更好的完成我们的网页。

    标签的类型(显示模式)

    HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素。具体如下:

    块级元素(block-level)

    每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度、高度、对齐等属性,常用于网页布局和网页结构的搭建。

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

    块级元素的特点:

    (1)总是从新行开始

    (2)高度,行高、外边距以及内边距都可以控制。

    (3)宽度默认是容器的100%

    (4)可以容纳内联元素和其他块元素。

    行内元素(inline-level)

    行内元素(内联元素)不占有独立的区域,仅仅靠自身的字体大小和图像尺寸来支撑结构,一般不可以设置宽度、高度、对齐等属性,常用于控制页面中文本的样式。

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


    我一样重要

    行内元素的特点:

    (1)和相邻行内元素在一行上。

    (2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。

    (3)默认宽度就是它本身内容的宽度。

    (4)行内元素只能容纳文本或则其他行内元素。(a特殊)

    注意:

    1. 只有 文字才 能组成段落 因此 p 里面不能放块级元素,同理还有这些标签h1,h2,h3,h4,h5,h6,dt,他们都是文字类块级标签,里面不能放其他块级元素。

    2. 链接里面不能再放链接。

     

    块级元素和行内元素区别

    块级元素的特点:
    (1)总是从新行开始
    (2)高度,行高、外边距以及内边距都可以控制。
    (3)宽度默认是容器的100%
    (4)可以容纳内联元素和其他块元素。
    行内元素的特点:
    (1)和相邻行内元素在一行上。
    (2)高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效。
    (3)默认宽度就是它本身内容的宽度。
    (4)行内元素只能容纳文本或则其他行内元素。

    行内块元素(inline-block)

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

    行内块元素的特点:
    (1)和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙。
    (2)默认宽度就是它本身内容的宽度。
    (3)高度,行高、外边距以及内边距都可以控制。

     

    三者的 形状

    显示模式形状图片
    块级元素 面包
    行内元素 牛奶
    行内块元素 果冻
  • 相关阅读:
    通过JavaMail发送(群发)邮件示例(内含附件图片) 代码复制可用
    需要把获取系统的当前时间存入库里 获取时是String类型,库里是Datetime类型 String 转化 Date
    用canvas和原生js写的一个笨鸟先飞的小游戏(暂时只有一个关卡)
    Svg和canvas的区别,伪类选择器有哪些(归类)
    微信web网页动态增减输入框,搜索框,基于jQuery weui、jQuery 实现无限插入数据,动态数据生成,外加高德地图POI和根据坐标获取位置信息的页面
    vue 使用tinymce富文本编辑器
    mamp环境下navicat无法链接本地mysql
    tp5 系统变量输出
    开始项目注意事项
    jQuery weui实现下拉刷新事件
  • 原文地址:https://www.cnblogs.com/jiumen/p/11392607.html
Copyright © 2011-2022 走看看