、

...

、

、
、
• 、

  、

  、

  、、、

  、

  常用的内联块状元素(又叫行内块元素)有：
  、
  内联元素(行内)
  在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了吗? 下一篇：买衣服时，如何快速知道衣服质量好坏?聪明人只看“这个”地方 相关推荐 JavaScript中常用数据类型，你知道几个? 本文首发自「慕课网」，想了解更多IT干货内容，程序员圈内热闻，欢迎关注！作者|慕课网精英讲师Lison这篇文章我们了解一下JavaScript中现有的八个数据类型，当然这并不是JavaScr... 踩坑:前端的z-index 之bug一二（zh1es前端） IE6下浮动元素bug给IE6下的一个div设置元素样式,无论z-index设置多高都不起作用。这种情况发生的条件有三个：1.父标签position属性为relative;2.问题标签无posi... 两栏布局、左边定宽200px、右边自适应如何实现? 一、两栏布局（左定宽，右自动）1.float+margin即固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。举例：HTM... 前端代码需要这样优化才是一个标准的网站 　　网站由前端和后端组成，前端呈现给用户。本文将告诉您前端页面代码的优化，当然仍然是基于seo优化的。　　就前端而言，如果做伪静态处理，基本上是普通的html代码，正常情况下，这些页面内容是通过页面模... 网页设计如何自学（初学网页设计） 1在Dreamweaver中搭建不同的页面，需要掌握HTML的语句了，通过调整各项数值就可以制作出排版漂亮的页面，跟着就可以学习一些可视化设计软件。下面介绍网页设计如何自学，希望可以帮助到各位。Dre... 1、数值类型（数值类型有） 1.1数据类型概览MySQL的数据类型可划分为三大类别：数值类型：旨在存储数字（涵盖整型、浮点型、DECIMAL等）。字符串类型：主要用于存储文本（诸如CHAR、VARCHAR之类）。日期/... 网页设计的布局属性（网页设计的布局属性是什么） 布局属性是网站设计中必不可少的一个重要的环节，主要用来设置网页的元素的布局，主要有以下属性。1、float：该属性设置元素的浮动方式，可以取none，left和right等3个值，分别表示不浮动，浮在... Grid网格布局一种更灵活、更强大的二维布局模型! 当涉及到网页布局时，display:flex;和display:grid;是两个常用的CSS属性，它们都允许创建不同类型的布局，但有着不同的用法和适用场景。使用flex布局的痛点当我们使... React 项目实践——创建一个聊天机器人 作者：FredrikStrandOseberg转发链接：https://www.freecodecamp.org/news/how-to-build-a-chatbot-with-react/前言... 有趣的 CSS 数学函数（css公式） 前言之前一直在玩three.js，接触了很多数学函数，用它们创造过很多特效。于是我思考：能否在CSS中也用上这些数学函数，但发现CSS目前还没有，据说以后的新规范会纳入，估计也要等很久。然... web开发之-前端css(5)（css前端设计） 显示控制一个元素的显示方式，我们可以使用display:block;display:inline-block;display:none;其中布局相关的还有两个很重要的属性:display:flex;和... 2024最新升级–前端内功修炼 5大主流布局系统进阶(分享) 获课：keyouit.xyz/14642/1.前端布局的重要性及发展历程前端布局是网页设计和开发的核心技能之一，它决定了页面元素如何组织和呈现。从早期的静态布局到现代的响应式布局，前端布局技术经历了... 教你轻松制作自动换行的CSS布局，轻松应对不同设备! 在网页设计中，自动换行的CSS布局是非常常见的需求，特别是在响应式设计中。它可以让网页内容自动适应不同屏幕尺寸，保证用户在不同设备上都能够获得良好的浏览体验。本文将介绍几种制作自动换行的CSS布局的方... 晨光微语!一道 CSS 面试题，伴你静享知识治愈时光 当第一缕阳光温柔地爬上窗台，窗外的鸟鸣声清脆悦耳，空气中弥漫着清新的气息。在这宁静美好的清晨与上午时光，泡一杯热气腾腾的咖啡，找一个舒适的角落坐下。前端的小伙伴们，先把工作的疲惫和面试的焦虑放在一边，... 2023 年的响应式设计指南（什么是响应式设计优缺点） 大家好，我是Echa。如今，当大家考虑构建流畅的布局时，没有再写固定宽度和高度数值了。相反，小编今天构建的布局需要适用于几乎任何尺寸的设备。是不是不可思议，小编仍然看到网站遵循自适应设计模式，其中它有... 一周热门 b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢 接口测试遇到500报错?别慌，你的头部可能有点问题 漏洞系列一一看我一招征服漏洞 SSRF Web前端需要学什么?Web前端开发需要学习哪些? 前端Flex布局可视化布局工具介绍，vue和html5快速设计利器 「资讯」为强迫用户使用Edge浏览器，微软又出新招数 HTML 简介（html简介及优缺点） HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端 关于HTML5被简称做H5，你怎么看?（html5缩写） 现在页面实时聊天都使用Websocket技术实现吗? 最近发表 JavaScript中常用数据类型，你知道几个? 踩坑:前端的z-index 之bug一二（zh1es前端） 两栏布局、左边定宽200px、右边自适应如何实现? 前端代码需要这样优化才是一个标准的网站 网页设计如何自学（初学网页设计） 1、数值类型（数值类型有） 网页设计的布局属性（网页设计的布局属性是什么） Grid网格布局一种更灵活、更强大的二维布局模型! React 项目实践——创建一个聊天机器人 有趣的 CSS 数学函数（css公式） 标签列表 HTML 教程 (33) HTML 简介 (35) HTML 实例/测验 (32) HTML 测验 (32) JavaScript 和 HTML DOM 参考手册 (32) HTML 拓展阅读 (30) 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) HTML button formtarget 属性 (30) CSS 水平对齐 (Horizontal Align) (30) 首页 收录 顶部