块级元素 |
内联元素(即行内元素) |
总是在新行上开始,独占一行默认情况下,宽度自动填满其父元素 |
相邻的行内元素会排列再同一行里,直到一行排不下,才会换行,宽度随元素的内容而变化 |
可以设置width,height属性 |
设置width,height属性无效 |
可以设置magin,padding属性 |
边距起作用的以下几个,其它不会起作用 margin-left|right|padding-left| right |
对应于display block |
对应于display:inline |
通过display属性对行内元素和块级元素进行切换
block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
inline-block | 行内块元素。(CSS2.1 新增的值) |
块级元素-按字母顺序排列
标签 | 描述 |
---|---|
<address> | 定义地址。 |
<area> | 图像区域 |
<article> | 定义文章。 |
<aside> | 定义页面内容之外的内容。 |
<audio> | 定义声音内容。 |
<br> | 换行 |
<blockquote> | 定义长的引用。 |
<canvas> | 定义图形。 |
<caption> | 定义表格标题。 |
<dd> | 定义定义列表中项目的描述。 |
<div> | 定义文档中的节。 |
<dl> | 定义定义列表。 |
<dt> | 定义定义列表中的项目。 |
<details> | 定义元素的细节。 |
<fieldset> | 定义围绕表单中元素的边框。 |
<figcaption> | 定义 figure 元素的标题。 |
<figure> | 定义媒介内容的分组,以及它们的标题。 |
<footer> | 定义 section 或 page 的页脚。 |
<form> | 定义供用户输入的 HTML 表单。 |
<h1> to <h6> | 定义 HTML 标题。 |
<header> | 定义 section 或 page 的页眉。 |
<hr> | 定义水平线。 |
<keygen> | 定义生成密钥。 |
<legend> | 定义 fieldset 元素的标题。 |
<li> | 定义列表的项目。 |
<menu> | 定义命令的列表或菜单。 |
<meter> | 定义预定义范围内的度量。 |
<map> | 图像区域 |
<nav> | 定义导航链接。 |
<noframes> | 定义针对不支持框架的用户的替代内容。 |
<noscript> | 定义针对不支持客户端脚本的用户的替代内容。 |
<ol> | 定义有序列表。 |
<output> | 定义输出的一些类型。 |
<p> | 定义段落。 |
<pre> | 定义预格式文本。 |
<progress> | 定义任何类型的任务的进度。 |
<section> | 定义 section。 |
<source> | 媒介源 |
<table> | 定义表格。 |
<tbody> | 定义表格中的主体内容。 |
<td> | 定义表格中的单元。 |
<tfoot> | 定义表格中的表注内容(脚注)。 |
<th> | 定义表格中的表头单元格。 |
<thead> | 定义表格中的表头内容。 |
<time> | 定义日期/时间。 |
<track> | 定义用在媒体播放器中的文本轨道。 |
<tr> | 定义表格中的行。 |
<ul> | 定义无序列表。 |
内联元素有
<a> | 定义锚。 |
<abbr> | 定义缩写。 |
<acronym> | 定义只取首字母的缩写。 |
<b> | 定义粗体字 |
<bdo> | 定义文字方向。 |
<big> | 定义大号文本。 |
<br> | 定义简单的折行。 |
<button> | 定义按钮 (push button)。 |
<cite> | 定义引用(citation)。 |
<code> | 定义计算机代码文本。 |
<command> | 定义命令按钮。 |
<dfn> | 定义定义项目。 |
<del> | 定义被删除文本。 |
<em> | 定义强调文本。 |
<embed> | 定义外部交互内容或插件。 |
<i> | 定义斜体字。 |
<img> | 定义图像。 |
<input> | 定义输入控件。 |
<kbd> | 定义键盘文本。 |
<label> | 定义 input 元素的标注。 |
<map> | 定义图像映射。 |
<mark> | 定义有记号的文本。 |
<objec> | 定义内嵌对象。 |
<q> | 定义短的引用。 |
<samp> | 定义计算机代码样本。 |
<summary> | 定义 details 元素的标题。 |
<select> | 定义选择列表(下拉列表)。 |
<small> | 定义小号文本。 |
<span> | 定义文档中的节。 |
<strong> | 定义强调文本。 |
<sub> | 定义下标文本。 |
<sup> | 定义上标文本。 |
<textarea> | 定义多行的文本输入控件。 |
<time> | 定义日期/时间。 |
<tt> | 定义打字机文本。 |
<var> | 定义文本的变量部分。 |
<video> | 定义视频。 |
<wbr> | 定义可能的换行符。 |
替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。
例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看html代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。 html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,例如: <img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" /> 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
不可替换元素 html 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。
例如: <p>段落的内容</p> 段落<p>是一个不可替换元素,文字“段落的内容”全被显示。
demo
<html>
<head>
<style>
#div1{
background-color: red;
border: 1px solid black;
display: inline;
margin: 100px;//内联元素只有左右外边距有效
width: 100px;//内联元素宽高是有内容决定的
height: 100px;//内联元素宽高是有内容决定的,line-height也可以设置高度
}
#div2{
width: 100px;
height: 100px;
background-color: green;
margin: 100px;
}
</style>
</head>
<body>
<div id="div1">12345</div>
<div id="div2">122</div>
</body>
</html>
文章浏览阅读2w次,点赞7次,收藏51次。四个步骤1.创建C++ Win32项目动态库dll 2.在Win32项目动态库中添加 外部依赖项 lib头文件和lib库3.导出C接口4.c#调用c++动态库开始你的表演...①创建一个空白的解决方案,在解决方案中添加 Visual C++ , Win32 项目空白解决方案的创建:添加Visual C++ , Win32 项目这......_c#调用lib
文章浏览阅读4.6k次。苹方字体是苹果系统上的黑体,挺好看的。注重颜值的网站都会使用,例如知乎:font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, W..._ubuntu pingfang
文章浏览阅读159次。表单表单概述表单标签表单域按钮控件demo表单标签表单标签基本语法结构<form action="处理数据程序的url地址“ method=”get|post“ name="表单名称”></form><!--action,当提交表单时,向何处发送表单中的数据,地址可以是相对地址也可以是绝对地址--><!--method将表单中的数据传送给服务器处理,get方式直接显示在url地址中,数据可以被缓存,且长度有限制;而post方式数据隐藏传输,_html表单的处理程序有那些
文章浏览阅读1.2k次。使用说明:开启Google的登陆二步验证(即Google Authenticator服务)后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。下载谷歌验证类库文件放到项目合适位置(我这边放在项目Vender下面)https://github.com/PHPGangsta/GoogleAuthenticatorPHP代码示例://引入谷_php otp 验证器
文章浏览阅读4.3k次,点赞5次,收藏11次。matplotlib.plot画图横坐标混乱及间隔处理_matplotlib更改横轴间距
文章浏览阅读2.2k次。①Storage driver 处理各镜像层及容器层的处理细节,实现了多层数据的堆叠,为用户 提供了多层数据合并后的统一视图②所有 Storage driver 都使用可堆叠图像层和写时复制(CoW)策略③docker info 命令可查看当系统上的 storage driver主要用于测试目的,不建议用于生成环境。_docker 保存容器
文章浏览阅读834次,点赞27次,收藏13次。网络拓扑结构是指计算机网络中各组件(如计算机、服务器、打印机、路由器、交换机等设备)及其连接线路在物理布局或逻辑构型上的排列形式。这种布局不仅描述了设备间的实际物理连接方式,也决定了数据在网络中流动的路径和方式。不同的网络拓扑结构影响着网络的性能、可靠性、可扩展性及管理维护的难易程度。_网络拓扑csdn
文章浏览阅读1.8k次,点赞5次,收藏8次。IOS系统Date的坑要创建一个指定时间的new Date对象时,通常的做法是:new Date("2020-09-21 11:11:00")这行代码在 PC 端和安卓端都是正常的,而在 iOS 端则会提示 Invalid Date 无效日期。在IOS年月日中间的横岗许换成斜杠,也就是new Date("2020/09/21 11:11:00")通常为了兼容IOS的这个坑,需要做一些额外的特殊处理,笔者在开发的时候经常会忘了兼容IOS系统。所以就想试着重写Date函数,一劳永逸,避免每次ne_date.prototype 将所有 ios
文章浏览阅读5.3k次。方法一:用PLSQL Developer工具。 1 在PLSQL Developer的sql window里输入select * from test for update; 2 按F8执行 3 打开锁, 再按一下加号. 鼠标点到第一列的列头,使全列成选中状态,然后粘贴,最后commit提交即可。(前提..._excel导入pl/sql
文章浏览阅读83次。Git常用命令速查手册1、初始化仓库git init2、将文件添加到仓库git add 文件名 # 将工作区的某个文件添加到暂存区 git add -u # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,不处理untracked的文件git add -A # 添加所有被tracked文件中被修改或删除的文件信息到暂存区,包括untracked的文件...
文章浏览阅读202次。分享119个ASP.NET源码总有一个是你想要的_千博二手车源码v2023 build 1120
文章浏览阅读1.8k次。版权声明:转载请注明出处 http://blog.csdn.net/irean_lau。目录(?)[+]1、缺省构造函数。2、缺省拷贝构造函数。3、 缺省析构函数。4、缺省赋值运算符。5、缺省取址运算符。6、 缺省取址运算符 const。[cpp] view plain copy_空类默认产生哪些类成员函数