块元素 | 易学教程

CSS 块级元素、内联元素概念

阅读更多关于 CSS 块级元素、内联元素概念

p、h1、或div等元素常常称为块级元素，这些元素显示为一块内容；Strong。span等元素称为行内元素，它们的内容显示在行中，即“行内框”。（可以使用 display=block 将行内元素转换成块元素， display=none 表示生成的元素根本没有框，也既不显示元素，不占用文档中的空间）。 a、行内就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。 b、说白了，行内元素就好像一个单词；块级元素就好像一个段落，如果不另加定义的话，它将独立一行出现。 c、一般的块级元素诸如段落<p>、标题<h1><h2>...、列表。<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body> 等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ d、块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。 e、<span>在CSS定义中属于一个行内元素，而<div>是块级元素。对于学过CSS的人来说一听就能明白。可对于新手来说不易理解，我主要对新手说通熟点吧! 用容器这一词会更容易形象理解它们的存在与用途，行内元素相当一个小容器，而<div>相当于一个大容器，大容器当然可以放一个小容器了。<span

CSS块级元素和行内元素

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

块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。. 内联元素(inline element

行级元素和块级元素

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

行级元素：inline　　内容决定元素的所占位置大小，不能通过css改变宽高　　span　　 strong 　　em　　a　　del 块级元素：block　　独占一行，可以通过css改变宽高　　div　　p　　ul　　li　　ol　　address　　from 行级块元素：inline-block　　内容决定大小，可以通过css代码改变宽高　　img 但凡带有inline的元素，都具有文字的特性，即：都有行间距。比如两个img之间会有距离，间距是四像素　　可以在css代码中改变display的属性　　　　eg：display：inline 　　　　　　display：block　　　　　　　　display：inline-block 来源： https://www.cnblogs.com/xiexiaofei/p/11997108.html

块级元素，行内元素，行内块元素

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

块级元素：　　独占一行，对宽高的属性值生效；如果不给宽度，默认为浏览器的宽度即100% 　　块标签：p、div、ul、ol、li、dl、dt、dd、h1~h6、form 行内元素：　　可以多个标签存在一行，对宽高的属性值不生效，靠内容撑开　　行内标签：a、span、em、strong、b、i、u、label、br 行内块元素：　　结合行内和块级元素的优点，不仅可以设置宽高，还可以多个标签存在一行　　行内块元素： img、input、textarea 以上三个元素可以互相转换，　　块 -》行内　　 display:inline; 　　行内 -》块　　 display:block; 　　转为行内块元素 display:inline-block; 嵌套规则　　块标签可以嵌套行标签，行标签不可以嵌套块标签　　p标签不要套块标签，可以套 a,spam,文本等等来源： https://www.cnblogs.com/knightdreams6/p/11981435.html

css 包含块

阅读更多关于 css 包含块

指出错误观念许多开发者认为一个元素的包含块就是他的父元素的内容区，其实这是错误的（至少不完全正确）！一个元素的尺寸和位置经常受其包含块的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。下面我们看看盒模型：当浏览器展示一个文档的时候，对于每一个元素，它都产生了一个盒子。每一个盒子都被划分为四个区域：内容区内边距区边框区外边距区什么是包含块？包含块有分为根元素包含块和其他元素的包含块。根元素包含块根元素html的包含块是一个矩形,叫做初始化包含块(initial containing block)。可以看到html外面还有空间，这个包含html的块就被称为初始包含块(initial containing block)，它是作为元素绝对定位和固定定位的参照物。对于连续媒体设备（continuous media），初始包含块的大小等于视口viewpor的大小，基点在画布的原点（视口左上角）；对于分页媒体（paged media），初始包含块是页面区域（page area）。初始包含块的direction属性与根元素的相同。其他元素的包含块大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样，下面就来学习如何确定这些元素的包含块。如何确定元素的包含块？确定包含块的过程完全依赖于这个包含块的

CSS内联--与块级元素区别

阅读更多关于 CSS内联--与块级元素区别

内联元素： 1、内联元素(inline)不会独占一行，相邻的内联元素会排在同一行。其宽度随内容的变化而变化。 2、内联元素不可以设置宽高 3、内联元素可以设置margin，padding，但只在水平方向有效。块状元素： 1、块级元素会独占一行，默认情况下宽度自动填满其父元素宽度 2、块级元素可以设置宽高 3、块级元素可以设置margin，padding 内联块状元素inline-block：简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现（可以设置宽高和margin值）。之后的内联对象会被排列在同一内联。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。 4.互相之间的区别区别主要是三个方面:一是排列方式，二是宽高边距设置，三是默认宽度。 (1)块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。 (2)块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。 (3)块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。 ———————————————— 版权声明：本文为CSDN博主「小奶狗」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。原文链接

块级元素和行内元素居中的方式

阅读更多关于块级元素和行内元素居中的方式

一般来说，在页面中需要进行水平居中的元素，大致分为两种，一种是块级元素，即display:block，一种是行内元素display:inline-block; 块级元素包括div，ul，p,以及所有的h类标签。行内元素又叫内联元素，a，img，input是最常见的。这些行内元素，可以通过display:block转换成块级元素。弄明白了哪些是块级元素，哪些是行内元素，我们还要知道其主要区别，两个行内元素可以在一行显示，但是第二个块级元素只能换行显示。让行内元素水平居中显示，我们需要为其父级元素设置text-align:center,一般这个属性是用于将文字水平居中的，我们的行内元素就相当于一行之内的文字了，所以可以使用这个方法。让块级元素，水平居中的办法是为块元素本身添加margin:0 auto;这样块级元素的左右边距就是自动的，也就可以在是水平方向上居中了。不管是inline-block还是block，我们需要理解其居中的原理，是inline-block，就对其父级元素添加text-align:center，是块级元素就对其本身添加margin:0 auto 来源： https://www.cnblogs.com/yydxh/p/11882988.html

CSS(3)---块级标签、行内标签、行内块标签

阅读更多关于 CSS(3)---块级标签、行内标签、行内块标签

CSS(3)---块级标签、行内标签、行内块标签 html中的标签元素三种类型：块级标签、行内标签、行内块标签。一、概述 1、块级标签概念每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。 1)块级标签特点 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行(独自占据一整行或多整行) 2、元素的高度、宽度、行高以及顶和底边距都可设置。 3、宽度缺省是它的容器的100%，除非设定一个宽度。 4、它可以容纳行内标签和其他块级标签。注意只有文字才能组成段落因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt，他们都是文字类块级标签，里面不能放其他块级元素。 2)常见块级标签 div、h1~h6、p、hr、form、ul、dl、ol、li 其中div标签是最典型的块元素。 2、行内标签概念行内标签不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。 1)行内标签特点 1、和相邻行内标签在一行上 2、高，行高及外边距和内边距不可改变； 3、默认宽度就是它本身内容的宽度。 4、设置margin只有左右margin 有效，上下无效。设置padding只有左右padding 有效

ie7下面不支持块级元素使用display:inline-block的问题

阅读更多关于 ie7下面不支持块级元素使用display:inline-block的问题

在ie8以及以上的浏览器中，对块级元素使用了display:inline-block后，会将块级元素转换为行内块元素，但是在ie7和以下的浏览器不支持在ie7和以下的浏览器中使用了display：inline-block会触发ie的layout 解决方法： div{display:inline-block; *zoom:1; *display:inline} 来源： CSDN 作者： kateli1991 链接： https://blog.csdn.net/huahuili/article/details/46237545

详解块级元素与行级元素

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

本文导读　　HTML中的元素可分为两种类型：块级元素和行级元素。这些元素的类型是通过文档类型定义（DTD）来指明。块级元素：显示在一块内，会自动换行，元素会从上到下垂直排列，各自占一行，如p,ul,form,div等标签元素。行内元素：元素在一行内水平排列，高度由元素的内容决定，height属性不起作用，如span,input等元素。块级元素（block element）　　每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。块级元素一般可嵌套块级元素或行内元素；　　块级元素一般作为容器出现，用来组织结构，但并不全是如此。有些块级元素，如<form>只能包含块级元素。其他的块级元素则可以包含行级元素如<P>.也有一些则既可以包含块级，也可以包含行级元素。　　DIV 是最常用的块级元素，元素样式的display:block都是块级元素。它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。块级元素的特点 ①、总是在新行上开始； ②、高度，行高以及外边距和内边距都可控制； ③、宽度缺省是它的容器的100%，除非设定一个宽度。 ④、它可以容纳内联元素和其他块元素行内元素（inline element）　　行内元素一般都是基于语义级

订阅块元素