内联元素 | 易学教程

块级元素和行内元素

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

块级元素以块显示的元素,高度和宽度都是可以设置的,比如 div , p , ul , li 默认都是属于块级元素.块级元素比较霸道,默认状态下每次都是占据一整行,后面的内容必须新起一行显示. 内联元素文本的显示方式, 比如 a, span, em 都属于内联元素.内联元素的显示特点就是像文本一样的显示,不会独自占据一个行.内联元素没有长度和宽度. 区别内联元素就好像是一个单词;块级元素就好像是一个段落转化方法非块级元素可以通过 css 的 display:block; 将其更改为块级元素块级元素也能变成内联元素,那就是通过 css 的 display:inline;和float来实现.$块元素一般是其他元素的容器,它可以容纳内联元素和其他块元素.form 这个块元素比较特殊,它只能用来容纳其他块元素. 注意:行内元素的置换元素才可以设置宽和高行内置换元素: 大概的意思就是对于置换元素，它的内容不再CSS format model内，比如说img，video，object，i nput,textarea。比如说img元素经常被它的src属性指向的内容所替换。置换元素有着固有的尺寸：默认的长，宽和比例。另一些元素没有明确的尺寸，比如说空元素。浏览器会根据其标签和属性的内容来确定显示的效果 ** 非置换元素不可以设置width和height 原文: 大专栏

内联元素inline-block空隙问题

阅读更多关于内联元素inline-block空隙问题

1.产生的原因当我们使用"display:inline-block"把块集元素转换为内联元素时，每两个内联元素之间有一定的空隙，既不是margin也不是padding，最终发现是由于换行符、制表符（tab）、空格等字符引起的。　　元素被当成行内元素排版的时候，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空隙。这些元素之间的间距会随着字体的大小而变化，当行内元素font-size:16px时，间距为8px 当我学到了节点（node）时，就发现了这个问题产生的正真原因。当我们换行时，会产生一个文本节点，这个文本节点的内容是换行这些是常见的节点以及节点类型值元素节点　　Node.ELEMENT_NODE(1) 属性节点　　Node.ATTRIBUTE_NODE(2) 文本节点　　Node.TEXT_NODE(3) 2.解决办法第一种，不换行既然是换行产生的，那么我们不换行就是了。所以第一种办法就是把所有的代码都写到一行，便不会产生空隙了。 <span>xxxx</span><b>xxxxx</b> 缺点：如果代码太多，写到一行会影响程序可读性，不好看嘛。所以第一办法也不是很可行。第二种，改变字体大小(推荐）

内联元素的padding，margin，border等不起作用

阅读更多关于内联元素的padding，margin，border等不起作用

关于内联元素的上下padding，margin,border ，它们并不是没有作用，而是不会影响元素的 line-height，也不会影响其他相邻的元素，上下padding（或者margin，border）设得再大，它的 line-height 是不变的，所以高度上就看不出什么效果，但是设置元素的背景颜色可看出效果，如下面的代码 [HTML] 纯文本查看复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < title >Title</ title > < style > span{ padding:30px; background:gray; opacity:0.8; } </ style > </ head > < body > < div style = "width:300px;height:300px;" >哈哈哈哈哈哈哈哈哈哈哈哈哈< span >span测试</ span > 哈哈哈哈哈哈哈哈哈哈哈哈哈 </ div > </ body > </ html > 可以看出padding上下左右都变大了（从背景中可以很明显的看出）

Bootstrap中的内联表单

阅读更多关于 Bootstrap中的内联表单

内联表单为 <form> 元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口（viewport）至少在 768px 宽度时（视口宽度再小的话就会使表单折叠）。可能需要手动设置宽度在 Bootstrap 中，输入框和单选/多选框控件默认被设置为 width: 100%; 宽度。在内联表单，我们将这些元素的宽度设置为 width: auto; ，因此，多个控件可以排列在同一行。根据你的布局需求，可能需要一些额外的定制化组件。一定要添加 label 标签如果你没有为每个输入控件设置 label 标签，屏幕阅读器将无法正确识别。对于这些内联表单，你可以通过为 label 设置 .sr-only 类将其隐藏。还有一些辅助技术提供label标签的替代方案，比如 aria-label 、 aria-labelledby 或 title 属性。如果这些都不存在，屏幕阅读器可能会采取使用 placeholder 属性，如果存在的话，使用占位符来替代其他的标记，但要注意，这种方法是不妥当的。 Name Email 复制 <form class= "form-inline" > <div class= "form-group" > <label for= "exampleInputName2" > Name </label>

html

阅读更多关于 html

阅读目录 web标准介绍浏览器介绍开发工具介绍 html介绍 html规范 html结构 html颜色 html标签 html特殊字符回到顶部 web标准介绍 web标准： w3c：万维网联盟组织，用来制定web标准的机构（组织） web标准：制作网页遵循的规范 web标准规范的分类：结构标准、表现标准、行为标准。结构：html。表示：css。行为：Javascript。总结说明：结构标准：相当于人的骨架。html就是用来制作网页的。表现标准：相当于人的衣服。css就是对网页进行美化的。行为标准：相当于人的动作。JS就是让网页动起来，具有生命力的　如果大家还不明白，请看下图回到顶部浏览器介绍浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox)、谷歌（Chrome）、猎豹浏览器、Safari和Opera等浏览器内核：浏览器　内核 IE trident chrome blink 火狐 gecko Safari webkit PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。总结：渲染引擎是兼容性问题出现的根本原因。回到顶部开发工具介绍 Sublime Text的使用 Sublime Text使用技巧 Visual Studio Code编辑器 WebStorm

HTML学习（13）区块元素和内联元素

阅读更多关于 HTML学习（13）区块元素和内联元素

HTML 区块元素大多数 HTML 元素被定义为块级元素或内联元素。块级元素在浏览器显示时，通常会以新行来开始（和结束）。实例: <h1>, <p>, <ul>, <table> HTML 内联元素内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img> HTML 可以通过 <div> 和 <span>将元素组合起来。 HTML <div> 元素 HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。 <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。 HTML <span> 元素 HTML <span> 元素是内联元素，可用作文本的容器 <span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。来源： https://www.cnblogs.com/1016391912pm/p/11529125.html

深入CSS

阅读更多关于深入CSS

元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如<div>和<span>就不同，而<strong>和<p>也不一样。在文档类型定义（DTD）中对不同的元素规定了不同的类型，这也是DTD对文档之所以重要的原因之一。 1. 替换和不可替换元素从元素本身的特点来讲，可以分为替换和不可替换元素。 a) 替换元素替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(X)HTML代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。 (X)HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如： <img src=”cat.jpg” /> <input type="submit" name="Submit" value="提交" /> 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。 b) 不可替换元素 (X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。例如： <p>段落的内容</p>

vue 获取元素高度

阅读更多关于 vue 获取元素高度

1、html <div ref="getheight"></div> <br><br> 2、JavaScript // 获取高度值（内容高+padding+边框） let height= this.$refs.getheight.offsetHeight; // 获取元素样式值（存在单位） let height = window.getComputedStyle(this.$refs.getheight).height; //获取元素内联样式值（非内联样式无法获取） let height = this.$refs.getheight.style.height; // 注意：要在元素渲染出来才能获取元素的高度实例： mounted(){ this.$nextTick(()=>{ // 页面渲染完成后的回调 console.log(this.$refs.getheight.offsetHeight) }) } 来源： https://www.cnblogs.com/xiaozhang666/p/11434492.html

元素分类--内联块状元素

阅读更多关于元素分类--内联块状元素

元素分类--内联块状元素内联块状元素（ inline-block ）就是同时具备内联元素、块状元素的特点，代码 display:inline-block 就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。 inline-block 元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。实例：a在默认的时候是内联元素，内联元素是不可以设置宽和高的。 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>内联块状元素</title> <style type="text/css"> a{ display:inline-block; width:20px;/*在默认情况下宽度不起作用*/ height:20px;/*在默认情况下高度不起作用*/ background:pink;/*设置背景颜色为粉色*/ text-align:center; /*设置文本居中显示*/ } </style> </head> <body> <a>1</a> <a>2</a> <a>3</a> <a>4</a> </body> </html> 来源

元素分类--内联元素

阅读更多关于元素分类--内联元素

元素分类--内联元素在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码 display:inline 将元素设置为内联元素。如下代码就是将块状元素div 转换为内联元素，从而使 div 元素具有内联元素特点。 div{ display:inline; } ...... <div>我要变成内联元素</div> 内联元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度及顶部和底部边距不可设置； 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。实例： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>行内元素标签</title> <style type="text/css"> a,span,em{ background:pink;/*设置a、span、em标签背景颜色都为粉色*/ } </style> </head> <body> <a href="http://www.baidu.com">百度</a> <a href="http://www.imooc.com"

订阅内联元素