1 HTML 区块元素: 大多数 HTML 元素被定义为块级元素内联元素

1.1 块级元素实例: <div> <h1>, <p>, <ul>, <table>

块级元素的特点: 独占一行,可设置宽高

1.2 行级元素实例 :<span> <a>

行级元素特点:一行可排布多个,不可设置宽高.

1.3 行内块元素:使用的最多:<input> <img>

  行级元素特点:一行可排布多个,也可设置宽高.

2 常用标签行内块特性区别介绍:

2.1 HTML<div> 元素的常见的用途是文档布局。它取代了使用表格定义布局的老式方法。是定义了文档的区域,块级 (block-level)

使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

2.2 HTML <span> 元素是内联元素,可用作文本的容器

<span> 元素也没有特定的含义。是用来组合文档中的行内元素, 内联元素(inline)

当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。

css总结17:HTML块级元素&行内元素之分: <div> 和<span>的更多相关文章

  1. css盒模型和块级、行内元素深入理解

    盒模型是CSS的核心知识点之一,它指定元素如何显示以及如何相互交互.页面上的每个元素都被看成一个矩形框,这个框由元素的内容.内边距.边框和外边距组成,需要了解的朋友可以深入参考下 一.CSS盒模型 盒 ...

  2. css盒子模型的深入理解,在块级、行内元素的区别和特性

    css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...

  3. 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

    1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  h ...

  4. day001-html知识点总结(-)块级。行内元素区分

    -.行内元素和块级元素的区别与转换: 区别: 1.从形式上看,在标准文档流中,行内元素会水平方向呈线性排列,而块级元素会各占一行,垂着方向排列. 2.在结构使用上,块级元素可以包含行内元素和块级元素, ...

  5. block与inline,inline和inline-block,块级和行内元素,行内替换和行内非替换元素

    block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...

  6. 元素显示模式:块元素 & 行内元素 & 行内块元素

    元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素 ...

  7. css菜鸟学习之text-align属性,行内元素,块级元素居中详解

    一.text-align属性 1.text-align用来设置元素中的的文本对齐方式,例如:如果需要设置图片的对齐方式,需要设置图片的父元素的text-align属性: 2.text-align只对文 ...

  8. 块级元素行内元素以及display属性

    1.什么叫做标签语义化? ->合理的标签做合适的事情 ->HTML中常用的标签都有哪些? (块状标签和行内标签) ->块状标签和行内标签的区别? (常用的有8条区别) 1)内联元素: ...

  9. HTML 块级元素 行内元素

    块级元素 - block level element 总是在新行上开始: 高度,行高以及外边距和内边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度: 它可以容纳内联元素和其他块元素 如: ...

随机推荐

  1. Linux多网卡的时候执行机器Ip

    在Linux部署的时候,经常会有多网卡的情况出现,这时候项目又需要指定Ip.在这种情况下,要配置linux机子的host,指定里头要使用的ip地址,否则linux机子不知道去找哪个ip. 一.查看本机 ...

  2. php webservice服务端和客户端的实现

    1.创建类文件service.class.php,service类,添加若干方法. 2.用浏览器访问create_wsdl.php文件,生成service.wsdl文件. 3.修改wsdl文件,loc ...

  3. Flex布局(转载)

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂 ...

  4. VS下QT的自定义槽函数修改方法

    通过几天的摸索,基本发现了两个VS的槽函数的修改方法 一种是UI是通过UI 设计师拖出来的,类似VB的方法,通过拖的方法,按钮的代码是系统自动生成的,在UI.h的头文件下,这个时候,实现槽函数有个固定 ...

  5. LaunchImage添加以及设置无效处理

    1.添加LaunchImage 2.添加所需要图片即可,出现un..可以删除,警告也随之而去,并删除LauchImage Assets之后重新添加 3.确定设置是否一样 4.发现启动后加载不了启动图, ...

  6. Java-Maven-Runoob:Maven 插件

    ylbtech-Java-Maven-Runoob:Maven 插件 1.返回顶部 1. Maven 插件 Maven 有以下三个标准的生命周期: clean:项目清理的处理 default(或 bu ...

  7. PHP面向对象深入研究之【命名空间】与【自动加载类】

    命名空间 避免类名重复,而产生错误. <?php require_once "useful/Outputter.php"; class Outputter { // outp ...

  8. js处理数值和日期本地化

    js处理数值和日期本地化 const s = new Intl.NumberFormat('zh-cn'); s.format(111.111) // "111.111" cons ...

  9. Three.js响应和移动物体

    效果图 demo import './index.css'; // stats var stats; (function(){ stats = new Stats(); document.body.a ...

  10. Three.js创建运动立体几何体示例

    效果图 安装 帧率统计工具 变量控制GUI demo 效果图 安装 npm install three 帧率统计工具 // 监听动画帧率 var Stats = function () { var m ...