CSS 的块级元素和行内元素

CSS 的块级元素和行内元素

常见的块级元素:h1 - h6pdivulolli

常见的行内元素:astrongbemispan

块级元素的特点

  • 独占一行
  • 高度, 宽度, 内外边距, 行高都可以控制.
  • 宽度默认是和父元素一样宽
  • 是一个容器(盒子), 里面可以放行内和块级元素

注:文字类的元素内不能使用块级元素,例子p标签主要用于存放文字, 内部不能放块级元素, 比如div标签

行内元素的特点

  • 不独占一行,一行可以显示多个
  • 无法设置高度,宽度,行高
  • 左右外边距有效(上下无效),内边距有效
  • 默认宽度就是本身的内容
  • 行内元素通常只能容纳文本和其他行内元素,不能放块级元素

注:a 标签中不能再放 a 标签;a标签是行内元素,但是可以放块级元素,不过更建议先把 a 转换成块级元素

行内元素和块级元素的区别

  1. 块级元素独占一行,行内元素不独占一行
  2. 块级元素可以设置宽高,行内元素不能设置宽高
  3. 块级元素四个方向都能设置内外边距,行内元素垂直方向不能设置

行内元素和块级元素的相互转化

使用display属性进行修改,可以把div等块级元素变成行内元素,也可以把 a ,span等变成块级元素

display: block; 将行内元素改成块级元素(常用)
display: inline; 将块级元素改成行内元素(几乎不用)
display: inline-block; 将选中元素改成行内块元素

示例代码

a标签行内元素改成块级元素

运行效果

更改前效果:

更改后效果:

margin: auto;块级元素水平居中
text-align: center; 是让行内元素或者行内块元素居中的

去除浏览器默认样式,保证代码在不同的浏览器上都能按照统一的样式显示

css 复制代码
* {
    marign: 0;
    padding: 0;
}
相关推荐
编程之路从0到15 分钟前
JSI入门指南
前端·c++·react native
开始学java6 分钟前
别再写“一锅端”的 useEffect!聊聊 React 副作用的逻辑分离
前端
百度地图汽车版11 分钟前
【智图译站】基于异步时空图卷积网络的不规则交通预测
前端·后端
qq_124987075314 分钟前
基于Spring Boot的“味蕾探索”线上零食购物平台的设计与实现(源码+论文+部署+安装)
java·前端·数据库·spring boot·后端·小程序
编程之路从0到116 分钟前
React Native 之Android端 Bolts库
android·前端·react native
小酒星小杜16 分钟前
在AI时代,技术人应该每天都要花两小时来构建一个自身的构建系统 - Build 篇
前端·vue.js·架构
奔跑的web.19 分钟前
TypeScript 全面详解:对象类型的语法规则
开发语言·前端·javascript·typescript·vue
江上月51323 分钟前
JMeter中级指南:从数据提取到断言校验全流程掌握
java·前端·数据库
代码猎人25 分钟前
forEach和map方法有哪些区别
前端
恋猫de小郭26 分钟前
Google DeepMind :RAG 已死,无限上下文是伪命题?RLM 如何用“代码思维”终结 AI 的记忆焦虑
前端·flutter·ai编程