块元素和行内元素

HTML元素根据表现形式，可以分为2类：

  • （1）块元素（block）；
  • （2）行内元素（inline）；

任何HTML元素都属于这两类中的其中一类。

2、块元素特点：

  • （1）独占一行，排斥其他元素跟其位于同一行，包括块元素和行内元素；
  • （2）块元素内部可以容纳其他块元素或行元素；

3、行内元素特点：

  • （1）可以与其他行内元素位于同一行；
  • （2）行内内部可以容纳其他行内元素，但不可以容纳块元素，不然会出现无法预知的效果。

在这里，所谓的“独占一行”并不是在代码中独占一行，而是在浏览器显示效果中独占一行。

表1 常见块元素
块元素 说明
div div层
h1～h6 1到6级标题
p 段落，会自动在其前后创建一些空白
hr 分割线
ol 有序列表
ul 无序列表
表1 常见行内元素
行内元素 说明
strong 加粗强调
em 斜体强调
s 删除线
u 下划线
a 超链接
span 常用行级，可定义文档中的行内元素
img 图片
input 表单

HTML CSS基础（二）的更多相关文章

  1. css基础二

    1,文本 文本颜色: <style> body {color:red;} /*为body的所有字体设置字体颜色为红色*/ h1 {color:#00ff00;} /*为h1元素设置字体颜色 ...

  2. css基础总结一

    最近在弄一个简单管理系统的前端,所以打算将做项目的一些个人感想以及总结简单罗列下,当然,主要针对前端的基础部分以及一些常用的前端个人简单技巧总结.主要分为js部分和css部分,下面是css的基础部分总 ...

  3. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  4. CSS 基础（二）

    本节内容: 文本 字体 链接 列表 表格 一.文本 文本颜色 颜色属性被用来设置文字的颜色. 三种方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的 ...

  5. 两天学会css基础（二）

    接上一篇博客,还有css中的两个重要知识点没有说到,就是元素的浮动与定位. 第三部分:元素的浮动与清除 这部分的内容之前的博客已总结过.请查看css中的浮动与三种清除浮动的方法这篇文章. 浮动在网页中 ...

  6. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  7. Bootstrap <基础二十九>面板（Panels）

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  8. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  9. Bootstrap<基础二十七> 多媒体对象（Media Object）

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  10. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

随机推荐

  1. Mysql主从备份、主主备份

    简单介绍mysql双机,多机异地热备简单原理实战. 双机热备的概念简单说一下,就是要保持两个数据库的状态自动同步.对任何一个数据库的操作都自动应用到另外一个数据库,始终保持两个数据库数据一致. 这样做 ...

  2. PHP中使用正则表达式详解 preg_match() preg_replace() preg_mat

    PHP中嵌入正则表达式常用的函数有四个: 1.preg_match() :preg_match() 函数用于进行正则表达式匹配,成功返回 1 ,否则返回 0 . 语法:int preg_match( ...

  3. hdu_5213_Lucky(莫队算法+容斥定理)

    题目连接:hdu_5213_Lucky 题意:给你n个数,一个K,m个询问,每个询问有l1,r1,l2,r2两个区间,让你选取两个数x,y,x,y的位置为xi,yi,满足l1<=xi<=r ...

  4. Cacti安装详细步骤（转）

    一.cacti概述 1. cacti是用php语言实现的一个软件,它的主要功能是用snmp服务获取数据,然后用rrdtool储存和更新数据,当用户需要查看数据的时候用rrdtool生成图表呈现给用户. ...

  5. hbase port

    From "Jonathan Hsieh (JIRA)" <j...@apache.org> Subject [jira] [Updated] (HBASE-10123 ...

  6. Git 学习资源

    在线教程 Try Git: Git初学者绝不能错过的Git上手资源. 廖雪峰Git教程: 比较系统的中文在线教程 易百Git教程 : 另一个比较全的中文在线教程 Git Immersion : A V ...

  7. 64位win7系统下面安装pyOpenSSL

    原文地址:http://blog.csdn.net/xinsuixiaofeiyu/article/details/40350067 最近想装一个scrapy玩下爬虫,虚拟机Linux下面倒是很好安装 ...

  8. li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 用javascript实现完全的类（private、pubulic等）

    js是面向对象的,但是其不像java一样完全的面向对象,但是利用其灵活性,我们可以使用它进行高度的模拟,来看下面的代码: function Student(name){ this.name=name; ...

  10. AIM Tech Round 3 (Div. 2)D. Recover the String（贪心+字符串）

    D. Recover the String time limit per test 1 second memory limit per test 256 megabytes input standar ...