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

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

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

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

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

标签的类型(显示模式)

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)高度,行高、外边距以及内边距都可以控制。

三者的 形状

显示模式 形状 图片
块级元素 面包
行内元素 牛奶
行内块元素 果冻

标签显示模式(display)的更多相关文章

  1. CSS——标签显示模式(display)

    非洲黑人: 皮肤内黑色素含量高,以吸收阳光中的紫外线,保护皮肤内部结构免遭损害,头发象羊毛一样卷曲,使每根卷发周围都有许多空隙,空隙充满空气,卷发有隔热作用. 欧洲白人: 生活寒带或着是说常年温度较低 ...

  2. 0014 标签显示模式:display(重点)

    目标: 理解 标签的三种显示模式 三种显示模式的特点以及区别 理解三种显示模式的相互转化 应用 实现三种显示模式的相互转化 2.1 什么是标签显示模式 什么是标签的显示模式? 标签以什么方式进行显示, ...

  3. CSS3标签显示模式

    HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素.具体如下: 块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性,常 ...

  4. CSS 标签显示模式

    标签的类型(显示模式) HTML标签一般分为块标签和行内标签两种类型,它们也称块元素和行内元素. 一.块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高 ...

  5. html 标签 显示模式

    1.html 标签模式分为三类:块级标签,行内标签(内联),行内块标签 a. 块级标签 典型代表:div.h1~h6.p.ul.ol.li.dl.dt.dd等. 特点:可以设置宽高,独占一行 b.行内 ...

  6. 盒子布局、标签特性display、浮动、定位position

    盒子模型布局: 盒子模型:每个标签都是一个盒子 盒子在页面显示在大小是:自身宽度+边框+边距(内边框+外边距) 如果一个盒子设置了边框,则边框需要被加两遍.若果设置了边距则内外边距根据设置情况要被加两 ...

  7. 微信小程序view标签以及display:flex的测试

    一:testview.wxml,testview.js自动生成示例代码 //testview.wxml <view class="section"> <view ...

  8. 同行span标签设置display:inline-block;overflow:hidden垂直对齐问题

    1 问题描述:一个div包含 三个span 当span2 类样式设置如下图时,将导致垂直方向不对齐的情况 2解决方案: 将前面的也设置同样的样式 overflow:hidden; display:in ...

  9. CSS初识- 选择器 &背景& 浮动& 盒子模型

    # CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...

随机推荐

  1. Android物联网应用程序开发(智慧城市)—— 环境状态值范围设置界面开发

    效果图: 代码: 布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns ...

  2. 编写Java程序,定义士兵类(Soldiers)并初始化5个士兵对象。

    返回本章节 返回作业目录 需求说明: 创建士兵类(Soldiers),定义有一个String类型参数name,代表士兵的姓名,两个int类型变量x和y,分别表示士兵所在的坐标位置,x代表横坐标,y代表 ...

  3. 编写Java程序,定义一个类似于ArrayList集合类

    返回本章节 返回作业目录 需求说明: 设计一个类似于ArrayList的集合类ListArray. ListArray类模拟实现动态数组,在该类定义一个方法用于实现元素的添加功能,以及用于获取List ...

  4. Docker_使用Rancher管理docker(7)

    一.简介 Rancher是一个开源的企业级全栈化容器部署及管理平台.Rancher为容器提供一揽子基础架构服务:CNI兼容的网络服务.存储服务.主机管理.负载均衡.防护墙--Rancher让上述服务跨 ...

  5. 谈谈 StringBuffer 和 StringBuilder 的历史故事

    1.前言 众所周知,StringBuffer 是线程安全的 ,而StringBuilder 不是线程安全的  ,但是 StringBuilder 速度会更快. 事实上 作为一个字符串拼接 方法 ,在线 ...

  6. ubuntu 18.04 安装mongodb并设为开机自启动

    导入包管理系统使用的公钥 sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9DA31620334BD75D9DCB4 ...

  7. SSRF打认证的redis

    redis客户端在向服务端传输数据用到的是RESP协议 客户端向Redis服务器发送一个仅由Bulk Strings组成的RESP Arrays. Redis服务器回复发送任何有效RESP数据类型作为 ...

  8. 深入理解Java虚拟机之Java内存区域与内存溢出异常

    Java内存区域与内存溢出异常 运行时数据区域 程序计数器 用于记录从内存执行的下一条指令的地址,线程私有的一小块内存,也是唯一不会报出OOM异常的区域 Java虚拟机栈 Java虚拟机栈(Java ...

  9. prtotype原型对象

    js每个对象都拥有一个原型对象,每个对象都能从原型对象继承方法和属性,原型链就是基于原型对象而产生的, 也就是说,每个对象都能继承原型对象的方法和属性,这样一层一层的继承,就形成了原型链 当然,你也可 ...

  10. 【Java常用类】String

    文章目录 String String实例化的方式 方式一:通过字面量定义 方式二:new + 构造器的方式 String s = new String("abc")方式创建对象,在 ...