块元素 | 易学教程

CSS文档流与块级元素和内联元素

阅读更多关于 CSS文档流与块级元素和内联元素

3 月，跳不动了？>>> CSS文档流与块级元素（block）、内联元素（inline），之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理>;<). 浮动元素不占任何正常文档流空间，而浮动元素的定位还是基于正常的文档流，然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。

行内元素和块内元素

阅读更多关于行内元素和块内元素

一、行内元素和块状元素的定义 1、行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有a, em ,strong等。 2、块状元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。注意：元素之中还存在一些可变元素可变元素：可变元素为根据上下文语境决定该元素为块元素或者内联元素。常见的可变元素 * applet - java applet * button - 按钮 * del - 删除文本 * iframe - inline frame * ins - 插入的文本 * map - 图片区块(map) * object - object对象 * script - 客户端脚本二、行内元素与块状元素的区别（1）占行区别：块级元素会独占一行，其宽度自动填满其父元素宽度行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化（2）宽高区别：块级元素可以设置 width, height属性，【注意：块级元素即使设置了宽度

第二十七节内联块属性

阅读更多关于第二十七节内联块属性

1 <!DOCTYPE html> 2  8 <html lang="en"> 9 <head> 10 <meta charset="UTF-8"> 11 <title>内联块实例</title> 12 <style type="text/css"> 13 14 .box{ 15 width:600px; 16 height:600px; 17 border:1px solid #000; 18 font-size:0; 19 } 20 .box a{ 21 width:60px; 22 height:60px; 23 background-color:red; 24 display: inline-block; /* 设置为内联模块 */ 25 font-size: 16px; 26 27 } 28 29 </style> 30 <

行内元素，块级元素与空元素

阅读更多关于行内元素，块级元素与空元素

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空元素:br、meta、hr、link、input、img 块级元素的特点： 1.总在新行上开始，占据一整行 2.默认情况下，其宽度自动填满其父元素宽度 3.宽度始终是与浏览器宽度一样，与内容无关 4.它可以容纳内联元素和其他块元素 5.display属性为block 块级元素的垂直相邻外边距margin会合并。行内元素的特点： 1.和其他元素都在一行上 2.高，行高及外边距和内边距部分可改变 3.宽度只与内容有关 4.行内元素只能容纳文本或者其他行内元素 5.display属性为inline 水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。不可以设置宽高，其宽度随着内容增加，高度随字体大小而改变，内联元素可以设置外边界，但是外边界不对上下起作用，只能对左右起作用。空元素的特点：没有内容的 HTML 内容被称为空元素。空元素是在开始标签中关闭的。 <br

css中块级元素和内联元素

阅读更多关于 css中块级元素和内联元素

块级元素和内联元素 “块级元素”译为 block level element，“内联元素”译为 inline element。块级元素在浏览器显示时，通常会以新行来开始（和结束）。例子：<h1>, <p>, <ul>, <table> 内联元素在显示时通常不会以新行开始。例子：<b>, <td>, <a>, <img> HTML 分组标签 <div> 定义文档中的分区或节（division/section）。 HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。 <span> 定义 span，用来组合文档中的行内元素。 HTML <span> 元素是内联元素，可用作文本的容器。 <span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。块级元素 (block) 特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制; 内联元素 (inline) 特性：和相邻的内联元素在同一行; 宽度

HTML块级元素

阅读更多关于 HTML块级元素

在HTML5出现之前，人们一般把元素分为块级、内联和内联块元素。本文将详细介绍HTML块级元素 h 标题(Heading)元素有六个不同的级别， <h1> 是最高级的，而 <h6> 则是最低的。一个标题元素能简要描述该节的主题从 <h1> 到 <h6> ，重要性逐渐减小，字体大小也逐渐减小。在使用标题元素时，要注意以下几点 1、不要为了减小标题的字体而使用低级别的标题，而是使用CSS的font-size样式 2、避免跳过某级标题：始终要从 <h1> 开始，接下来使用 <h2> 等等 3、使用 <section> 元素时，为了方便起见，避免重复在一个页面上使用 <h1> ， <h1> 应该用来表示页面的标题，其他的标题当从 <h2> 开始。使用 <section> 时，应当每个 section都使用一个 <h2> 【默认样式】 //从h1到h6 margin: 0.67em 0 -> 0.83em 0 -> 1em 0 -> 1.33em 0 -> 1.67em 0 -> 2.33em 0; font-size: 2em -> 1.5em -> 1.17em -> 1em -> 0.83em -> 0.67em; font-weight: bold; HTML5新增了 <hgroup> 标签，它表示标题组，用于组合标题，只在区块需要有多个级别的标题时使用 <hgroup> <h1

1.4、html块、含样式的标签

阅读更多关于 1.4、html块、含样式的标签

html块 1、div标签块元素，表示一块内容，没有具体的语义。 2、span标签行内元素，表示一行中的一小段内容，没有具体的语义。含样式和语义的标签 1、em标签行内元素，表示语气中的强调词 2、i标签行内元素，原本没有语义，w3c强加了语义，表示专业词汇 3、b标签行内元素，原本没有语义，w3c强加了语义，表示文档中的关键字或者产品名 4、strong标签行内元素，表示非常重要的内容语义化的标签语义化的标签，就是在布局的时候多使用语义化的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。来源： https://www.cnblogs.com/LiuYanYGZ/p/12254538.html

css笔记之行级元素和块级元素

阅读更多关于 css笔记之行级元素和块级元素

行级元素和块级元素块级元素(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特殊）注意：只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。

行内元素与块级元素

阅读更多关于行内元素与块级元素

块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档中的分区或节 <dl> 定义列表 <dt> 定义列表中的项目 <fieldset> 定义一个框架集 <form> 创建 HTML 表单 <h1> 定义最大的标题 <h2> 定义副标题 <h3> 定义标题 <h4> 定义标题 <h5> 定义标题 <h6> 定义最小的标题 <hr> 创建一条水平线 <legend> 元素为 fieldset 元素定义标题 <li> 标签定义列表项目 <noframes> 为那些不支持框架的浏览器显示文本，于 frameset 元素内部 <noscript> 定义在脚本未被执行时的替代内容 <ol> 定义有序列表 <ul> 定义无序列表 <p> 标签定义段落 <pre> 定义预格式化的文本 <table> 标签定义 HTML 表格 <tbody> 标签表格主体（正文） <td> 表格中的标准单元格 <tfoot> 定义表格的页脚（脚注或表注） <th> 定义表头单元格 <thead> 标签定义表格的表头 <tr> 定义表格中的行行内元素列表 <a> 标签可定义锚 <abbr> 表示一个缩写形式 <acronym> 定义只取首字母缩写 <b> 字体加粗 <bdo> 可覆盖默认的文本方向 <big> 大号字体加粗 <br> 换行

CSS中的块级元素与行级元素

阅读更多关于 CSS中的块级元素与行级元素

块级元素特点：1.每个块级元素都是独自占一行，其后的元素也只能另起一行，并不能两个元素共用一行。　　　2.元素的高度、宽度、行高和顶底边距都是可以设置的。　　　　　3.元素的宽度如果不设置的话，默认为父元素的宽度。常见的块级元素： div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre HTML5：header、section、article、footer等等，还有一些没有列举的是在日常代码中不是非常常用行级元素特点：1.可以和其他元素处于一行，不用必须另起一行。　　　2.元素的高度、宽度及顶部和底部边距不可设置。　　　3.元素的宽度就是它包含的文字、图片的宽度，不可改变。常见的行级元素： span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））例子： <html> <head> <title>区别</title> <style type="text/css"> .div1{background-color: red;}

订阅块元素