、

...

、

、
、
• 、

  、

  、

  、、、

  、

  常用的内联块状元素(又叫行内块元素)有：
  、
  内联元素(行内)
  在html中,、、、、 、  和就是典型的内联元素(行内元素)(inline)元素。
  当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素,从页使用div元素具有内联元素特点。
  div{display:inline}
  内联元素(行内)特点：
  1、和其他元素都在一行上；
  2、元素的高度、宽度、行高及顶部和底部边距不可设置；(padding可以设置)
  3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
  块级元素
  什么是块级元素？在html中
  、
  、
  、、
   和 
  就是块级元素。
  设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素,从而使a元素具有块状元素特点。
  a{display:block;}
  块级元素特点：
  1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)
  2、元素的高度、宽度、行高以及顶和底边距都可设置。
  3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
  内联块状元素(行内块)
  内联块状元素(inline-block)就是同时具备内联元素、块状元素的特点,
  代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增),、标签就是这种内联块状标签。
  inline-block元素特点：
  1、和其他元素都在一行上；
  2、元素的高度、宽度、行高以及顶和底边距都可设置。
  提示：下一小节是用视频动画来讲解css中的盒模型。
  块元素尽量采用div嵌套, 行内元素尽量采用span嵌套
  显示模式的转换
  块级、行内 、行内块元素三者是可以相互转换的。
  display 显示 的意思
  block 块
  inline 行内
  
  块级 → 行内元素 display: inline;
  行内元素 → 块级元素 display: block;
  行内和块级 → 行内块 display:inline-block;
  span{
      width:100px;
      height:100px;
      background-color:#960;
      didplay:inline-block;
  }
  水平居中设置-行内元素
  如果被设置元素为文本、图片等行内元素时,水平居中是通过给父元素设置text-align:center来实现的。如下代码：
  html代码：
  
  我是文本,哈哈,我想要在父容器中水平居中显示。
  
  css代码：
  水平居中设置-定宽块状元素
  当被设置元素为块状元素时用text-align:center就不起作用了,这时也分两种情况：定宽块状元素和不定宽块状元素。
  满足定宽和块状两个条件的元素是可以通过设置"左右margin"值为"auto"来实现居中的。我们来看个例子就是设置div这个块状元素水平居中：
  第一种方法
  html代码：
  
  我是定宽块状元素,哈哈,我要水平居中显示。
  css代码：
  也可以写成：
  margin-left:auto;
  margin-right:auto;
  注意：元素的"上下margin"是可以随意设置的。这种水平居中的方法两个2个条件缺一不可
  第二种方法
  html代码：
  
  我是定宽块状元素,哈哈,我要水平居中显示。
  css代码：
  水平居中设置-不定宽块状元素
  在实际工作中我们会遇到需要为"不定宽度的块状元素"设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。
  不定宽度的块状元素有三种方法居中(这三种方法目前使用的都比多)：
  加入table标签
  设置display;inline方法
  设置position:relative和left:50%;
  (1)第一种方法：
  第一步：为需要设置的居中的元素外面加入一个table标签(包括

  、、

  )。 第二步：为这个table设置"左右margin auto"(这个和定宽块状元素的方法一样)。举例如下： html代码： 1 2 3 css代码： (2)第二种方法： 改变块级元素的dispaly为inline类型,然后使用text-align:center来实现居中效果。如下例子： html代码： 1 2 3 css代码： 这种方法相比第一种方法的优势是不用增加无语义标签,简化了标签的嵌套深度, 但也存在着一些问题：它将块状元素的display类型改为inline,变成了行内元素,所以少了一些功能,比如设定长度值。 (2)第三种方法： 通过给父元素设置float,然后给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中 代码如下： 1 2 3 css代码： 这种方法可以保留块状元素仍以display:block的形式显示,优点不添加无语议表标签,不增加嵌套深度, 但它的缺点是设置了position:relative,带来了一定的副作用。 这三种方法使用得都非常广泛,各有优缺点,具体选用哪种方法,可以视具体情况而定。 隐性改变display类型 有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none除外)设置以下2个句之一： position:absolute float:left或float:right 元素会自动变为以display:inline-block的方式显示,当然就可以设置元素的width和height了且默认宽度不占满父元素。 如下面的代码,小伙伴们都知道a标签是行内元素,所以设置它的width是没有效果的,但是设置为position:absolute以后,就可以了。 进入课程请单击这里 css代码 如何让一段文字水平居中且垂直居中 水平垂直居中 div{ width:200px;height:200px; /*设置div的大小*/ border:1px solid green; /*边框*/ text-align: center; /*文字水平居中对齐*/ line-height: 200px; /*设置文字行距等于div的高度*/ overflow:hidden; } text-align 和margin auto 区别 text-align 可以让块级元素里面的文字内容居中对齐. 文字内容 == (图片 input 行内元素 行内块元素) 但是对于里面的块级元素无效 让一个块级元素居中对齐 ： margin:0 auto; 【实例】 电子邮箱: 密码: 地址 CSS布局水平居中实战 方法一：margin + width Demo 说明：这个水平居中方法, 我们最熟悉了, 也是最常用的, width可以固定px也可以使用百分比 方法二：table + margin Demo 说明：display: table在表现上类似block元素，但是宽度为内容宽。无需设置父元素样式 (支持 IE 8 及其以上版本) 兼容 IE 8 一下版本需要调整为 方法三：inline-block + text-align Demo 说明：兼容性佳(甚至可以兼容 IE 6 和 IE 7) 方法四：absolute + margin-left Demo 说明：宽度固定相比于使用transform, 有兼容性更好 方法五：absolute + transform Demo 说明：绝对定位脱离文档流, 不会对后续元素的布局造成影响。transform为 CSS3 属性, 有兼容性问题 方法六：flex + justify-content Demo 标签 上一篇：干货 | Index这件小事，你get了吗? 下一篇：买衣服时，如何快速知道衣服质量好坏?聪明人只看“这个”地方 相关推荐 JPA实体类注解，看这篇就全会了 基本注解@Entity标注于实体类声明语句之前，指出该Java类为实体类，将映射到指定的数据库表。name(可选)：实体名称。缺省为实体类的非限定名称。该名称用于引用查询中的实体。不与@Tab... Dify教程02 - Dify+Deepseek零代码赋能，普通人也能开发AI应用 开始今天的教程之前，先解决昨天遇到的一个问题，docker安装Dify的时候有个报错，进入Dify面板的时候会出现“InternalServerError”的提示，log日志报错：S3_USE_A... 用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码 在人体姿态估计领域，传统方法通常将关键点作为基本处理单元，这些关键点在人体骨架结构上代表关节位置（如肘部、膝盖和头部）的空间坐标。现有模型对这些关键点的预测主要采用两种范式：直接通过坐标回归或间接通过... B 客户端流RPC (clientstream Client Stream) 客户端编写一系列消息并将其发送到服务器，同样使用提供的流。一旦客户端写完消息，它就等待服务器读取消息并返回响应gRPC再次保证了单个RPC调用中的消息排序在客户端流RPC模式中，客户端会发送多个请... 我的模型我做主02——训练自己的大模型:简易入门指南 模型训练往往需要较高的配置，为了满足友友们的好奇心，这里我们不要内存，不要gpu，用最简单的方式，让大家感受一下什么是模型训练。基于你的硬件配置，我们可以设计一个完全在CPU上运行的简易模型训练方案。... 开源项目MessageNest打造个性化消息推送平台多种通知方式 今天介绍一个开源项目，MessageNest-可以打造个性化消息推送平台，整合邮件、钉钉、企业微信等多种通知方式。定制你的消息，让通知方式更灵活多样。开源地址：https://github.c... 使用投机规则API加快页面加载速度 当今的网络用户要求快速导航，从一个页面移动到另一个页面时应尽量减少延迟。投机规则应用程序接口（SpeculationRulesAPI）的出现改变了网络应用程序接口（WebAPI）领域的游戏规则。... JSONP安全攻防技术 关于JSONPJSONP全称是JSONwithPadding，是基于JSON格式的为解决跨域请求资源而产生的解决方案。它的基本原理是利用HTML的元素标签，远程调用JSON文件来实现数据传递。如果... 大数据Doris(六):编译 Doris遇到的问题 编译Doris遇到的问题一、js_generator.cc:(.text+0xfc3c):undefinedreferenceto`well_known_types_js’查找Doris... 网页内嵌PDF获取的办法 最近女王大人为了通过某认证考试，交了2000RMB，官方居然没有给线下教材资料，直接给的是在线教材，教材是PDF的但是是内嵌在网页内，可惜却没有给具体的PDF地址，无法下载，看到女王大人一点点的截图保... 印度女孩被邻居家客人性骚扰，父亲上门警告，反被围殴致死 微信的规则进行了调整希望大家看完故事多点“在看”，喜欢的话也点个分享和赞这样事儿君的推送才能继续出现在你的订阅列表里才能继续跟大家分享每个开怀大笑或拍案惊奇的好故事啦~话说只要稍微关注新闻的人，应该... 下周重要财经数据日程一览 (1229-0103) 下周焦点全球制造业PMI美国消费者信心指数美国首申失业救济人数值得注意的是，下周一希腊还将举行第三轮总统选举需要谷歌日历同步及部分智能手机（安卓，iPhone）同步日历功能的朋友请点击此链接，数据公布... PyTorch 深度学习实战(38):注意力机制全面解析 在上一篇文章中，我们探讨了分布式训练实战。本文将深入解析注意力机制的完整发展历程，从最初的Seq2Seq模型到革命性的Transformer架构。我们将使用PyTorch实现2个关键阶段的注意力机制变... 聊聊Spring AI的EmbeddingModel 序本文主要研究一下SpringAI的EmbeddingModelEmbeddingModelspring-ai-core/src/main/java/org/springframework/ai/e... 前端分享-少年了解过iframe么 iframe就像是HTML的「内嵌画布」，允许在页面中加载独立网页，如同在画布上叠加另一幅动态画卷。核心特性包括：独立上下文：每个iframe都拥有独立的DOM/CSS/JS环境（类似浏... 一周热门 b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢 接口测试遇到500报错?别慌，你的头部可能有点问题 漏洞系列一一看我一招征服漏洞 SSRF Web前端需要学什么?Web前端开发需要学习哪些? 前端Flex布局可视化布局工具介绍，vue和html5快速设计利器 「资讯」为强迫用户使用Edge浏览器，微软又出新招数 关于HTML5被简称做H5，你怎么看?（html5缩写） HTML 简介（html简介及优缺点） HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端 现在页面实时聊天都使用Websocket技术实现吗? 最近发表 JPA实体类注解，看这篇就全会了 Dify教程02 - Dify+Deepseek零代码赋能，普通人也能开发AI应用 用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码 B 客户端流RPC (clientstream Client Stream) 我的模型我做主02——训练自己的大模型:简易入门指南 开源项目MessageNest打造个性化消息推送平台多种通知方式 使用投机规则API加快页面加载速度 JSONP安全攻防技术 大数据Doris(六):编译 Doris遇到的问题 网页内嵌PDF获取的办法 标签列表 HTML 教程 (33) HTML 简介 (35) HTML 实例/测验 (32) HTML 测验 (32) HTML 参考手册 (28) JavaScript 和 HTML DOM 参考手册 (32) HTML 拓展阅读 (30) HTML中如何键入空格 (27) HTML常用标签 (29) HTML文本框样式 (31) HTML滚动条样式 (34) HTML5 浏览器支持 (33) HTML5 新元素 (33) HTML5 WebSocket (30) HTML5 代码规范 (32) HTML5 标签 (717) HTML5 标签 (已废弃) (75) HTML5电子书 (32) HTML5开发工具 (34) HTML5小游戏源码 (34) HTML5模板下载 (30) HTTP 状态消息 (33) HTTP 方法：GET 对比 POST (33) 键盘快捷键 (35) 标签 (226) 首页 收录 顶部