html行级元素和块级元素以及css转换

之前有说过html的标签是有语义的,当然也就有一些默认的样式,比如标题有h1···h6,他们的字体由大至小一次递减,字体比一般字体要加粗。

这样也就有了行级元素和块级元素,下面来看看什么是行级元素什么事块级元素:行级元素指标签不加其他css,两个标签是横向排列;块级元素指标签不加其他css,两个标签是纵向排列。

以下是一些常见的行及元素和块级元素:

行级元素(inline element)

   a - 锚点
  * em - 强调
  * i - 斜体
  * img - 图片
  * input - 输入框
  * label - 表格标签
  * select - 项目选择
  * span - 常用内联容器,定义文本内区块
  * strong - 粗体强调
  * sub - 下标
  * sup - 上标
  * textarea - 多行文本输入框

块级元素(block element)

  * div - 常用块级容易,也是css layout的主要标签
  * dl - 定义列表
  * form - 交互表单
  * h1 - 大标题
  * h2 - 副标题
  * h3 - 3级标题
  * h4 - 4级标题
  * h5 - 5级标题
  * h6 - 6级标题
  * hr - 水平分隔线
  * ol - 排序表单
  * p - 段落
  * table - 表格
  * ul - 非排序列表

块级元素,会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;与之相反,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。

当然元素的块级还是行级是可以通过本页面的css来修改,将display属性设置为“inline”元素就会变成行级元素,设置为“block”元素就会变成块级元素。


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361499.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

EasyCriteria已演变为uaiCriteria。 新名称和更多功能

你好!你好吗? 我很高兴宣布uaiCriteria的发布,EasyCriteria的演进。 确实需要更改框架名称吗? 是的,可悲的是。 我找到了另一个具有相同名称的框架 ,这就是为什么我决定更改名称的原因(我不希…

ajax方式下载文件

在web项目中需要下载文件&#xff0c;由于传递的参数比较多&#xff08;通过参数在服务器端动态下载指定文件&#xff09;&#xff0c;所以希望使用post方式传递参数。通常&#xff0c;在web前端需要下载文件&#xff0c;都是通过指定<a>标签的href属性&#xff0c;访问服…

了解Spring Web应用程序体系结构:经典方法

每个开发人员必须了解两件事&#xff1a; 架构设计是必要的。 花哨的体系结构图没有描述应用程序的真实体系结构。 真正的体系结构是从开发人员编写的代码中找到的&#xff0c;如果不设计应用程序的体系结构&#xff0c;最终将得到一个具有多个体系结构的应用程序。 这是否…

使用unicode

#include <iostream> class 我的类 { public:我的类(int 我的初始化变量){我的成员变量 我的初始化变量;}~我的类(){}int 我的成员变量;void 打印我的变量(){std::cout<<我的成员变量<<std::endl;}; };int main() {我的类 我的实例(1);我的实例.打印我的变量…

springmvc注解小示例(转)

转自&#xff1a;http://www.blogjava.net/pengo/archive/2010/11/28/339229.html 弃用了struts&#xff0c;用spring mvc框架做了几个项目&#xff0c;感觉都不错&#xff0c;而且使用了注解方式&#xff0c;可以省掉一大堆配置文件。本文主要介绍使用注解方式配置的spring mv…

解决maven项目Cannot change version of project facet Dynamic web module to 3.0

1、打开新建的servlet文件例如&#xff08;hibernate.cfg.xml&#xff09;修改头文件为 <?xml version"1.0" encoding"UTF-8"?><!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hibernate Configuration DTD 3.0//EN" &quo…

使用Forge插件在现有Java EE项目上启用Arquillian

技术提示&#xff03;34解释了如何创建可测试的Java EE 7应用程序。 如果要启动新的应用程序&#xff0c;这将很有用。 但是&#xff0c;如果您已经有一个应用程序并启用Arquillian怎么办&#xff1f; 这就是Forge和Forge-Arquillian附加组件派上用场的地方。 这就是我在javae…

HDOJ1166 敌兵布阵【线段树】

Problem : 1166 ( 敌兵布阵 ) Judge Status : AcceptedRunId : 5862942 Language : GCC Author : qq1203456195 #include <stdio.h> #define lson l,m,rt<<1 #define rson m1,r,rt<<1|1 #define maxn 55555 int sum[maxn<<2]; void PushUp(i…

欧拉回路

欧拉回路与欧拉路径 欧拉回路 不重复地结果每条边的回路欧拉路径 不重复地几个每条边地路径欧拉图 存在欧拉回路地图半欧拉图 存在欧拉路径地图在数学中为简单的图的一笔画完问题&#xff0c;但在有向图里&#xff0c;可以应用到单词接龙判断 判断是否存在欧拉回路 无向图有向图…

jQuery文档就绪

很多jQuery代码都有如下片段: $(document).ready(function(){//代码 })作用就是等文档结构加载完成后再去执行function中的代码&#xff0c;功能类似于window.onload事件。 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset"utf-8"…

使用Java EE 7,WildFly和Docker进行连续部署–(第1部分)

此博客是开始一个新的hanginar&#xff08;G 结伴旅游 webi NAR&#xff09;&#xff0c;将突出解决方案&#xff0c;框架&#xff0c;应用服务器&#xff0c;工具&#xff0c;部署和更多的内容集中在Java EE的系列。 这些不是通常的会议风格独白演示&#xff0c;而是交互式ha…

URAL 1013 K-based Numbers. Version 3

URAL_1013 和URAL_1009的思路是一样的&#xff0c;只不过需要高精度&#xff0c;所以就直接用java写了。具体的一些思路可以参考我的URAL_1009的题解&#xff1a;http://www.cnblogs.com/staginner/archive/2012/05/01/2477513.html。 如果N再大一点的话&#xff0c;也可以用二…

爬取w3c课程—Urllib库使用

爬虫原理 浏览器获取网页内容的步骤&#xff1a;浏览器提交请求、下载网页代码、解析成页面&#xff0c;爬虫要做的就是&#xff1a; 模拟浏览器发送请求&#xff1a;通过HTTP库向目标站点发起请求Request&#xff0c;请求可以包含额外的header等信息&#xff0c;等待服务器响应…

关于SSL证书配置、升级的一些问题总结

SSL会成为网站、APP、小程序&#xff08;小程序已经强制使用https&#xff09;等项目的标配。关于SSL证书安装使用的问题今天总结下&#xff0c;以备用。 环境配置&#xff1a;windows server 2008 R2和IIS7.0 1、 安装SSL证书的环境 (温馨提示&#xff1a;安装证书前请先备份…

如何为JBoss Developer Studio 8设置集成和SOA工具

最新的JBoss Developer Studio&#xff08;JBDS&#xff09;的发布带来了有关如何开始使用尚未安装的各种JBoss Integration和BPM产品工具集的问题。 在本系列文章中&#xff0c;我们将为您概述如何安装每套工具并说明它们支持哪些产品。 这将有助于您在着手进行下一个JBoss集…

YUM常用命令介绍

1.列出所有可更新的软件清单命令&#xff1a;yum check-update 2.安装所有更新软件命令&#xff1a;yum update 3.仅安装指定的软件命令&#xff1a;yum install <package_name> 4.仅更新指定的软件命令&#xff1a;yum update <package_name> 5.列出所有可安裝的软…

WildFly 8的Camel子系统集成了Java EE –入门

就在三天前&#xff0c;围绕Thomas Diesler&#xff08; tdiesler &#xff09;的团队发布了WildFly-Camel子系统的2.0.0.CR1版本&#xff0c;它允许您将Camel Routes添加为WildFly配置的一部分。 路由可以部署为JavaEE应用程序的一部分。 JavaEE组件可以访问Camel Core API和各…

jQuery中国各个省份地图分部代码

jQuery中国各个省份地图分部代码 在线演示本地下载更多专业前端知识&#xff0c;请上 【猿2048】www.mk2048.com

封装axios的接口请求数据方法

lib文件夹中http.js文件的内容 包含了数据请求&#xff0c;路由的拦截&#xff0c;同时向外界暴露的是一个方法&#xff0c;方法内有三个参数&#xff0c;分别为请求的方式&#xff0c;地址&#xff0c;数据 1 import axios from axios;2 import qs from qs;3 4 const serverax…

Spring Boot Actuator:自定义端点,其顶部具有MVC层

Spring Boot Actuator端点允许您监视应用程序并与之交互。 Spring Boot包含许多内置端点&#xff0c;您也可以添加自己的端点。 添加自定义端点就像创建一个从org.springframework.boot.actuate.endpoint.AbstractEndpoint扩展的类一样容易。 但是Spring Boot Actuator也提供了…