css行内元素、块元素、行内块元素的区别

news/2024/11/29 21:41:39/

行内元素的特点:

1.和其他元素在一行显示

2.元素的宽度、高度、行高及底部边距不可编辑

3.元素的宽度就是它包含的文字或图片的宽度,不可改变

4.行内元素只能容纳纯文本或者是其他的行内元素(a标签除外,a里面不能放自己)

5.默认不会换行

注意:行内元素里不能放块元素, 并且和相邻的行内元素在一行上,块元素里可以嵌套行内元素和行内块元素

常见的行内元素:

a b span img input  select  strong button        

块元素的特点:

1.每个块级元素都是从新的一行开始,并且其后的元素也另起一行

2.元素的宽度、高度、行高以及顶部和底边距都可以设置

3.元素的宽高在不设置的情况下,是他本身父容器的100%,除非设定一个宽度

4.多个块状,默认排列从上到小

常见的块元素:

 div p  ul li ol dl dt dd h1 h2 h3 h4 h5 h6

行内块元素的特点:

 行内块元素既具有行内元素特点即不独占一行,又具有块元素特点即可以设置宽高

常见的行内块元素:

 img input 

 行内元素,行内块元素,块元素的转换

display:block ,将元素转换为块级元素

display :  inline ,将元素转换为行内元素

display:inline-block,将元素转换为行内块级元素


http://www.ppmy.cn/news/62725.html

相关文章

Java线程池编码示例

第1步:自定义线程实现类 Java中多线程编码时,定义线程类有两种方式: 继承Thread类实现Runnable接口(由于Java的单继承特性,一般推荐使用此方式) public class BizThread implements Runnable {private int …

k8s基础4——deployment控制器、应用部署、升级、回滚、水平扩容缩容

文章目录 一、基本介绍二、应用程序生命周期2.1 部署应用2.2 应用升级2.2.1 修改YAML文件升级(交互式)2.2.2 命令指定镜像版本升级(免交互式)2.2.3 调用vim升级 2.3 滚动升级2.3.1 升级流程 2.4 应用回滚2.4.1 查看历史发布版本2.…

Lodash学习进程

Lodash是一个流行的JavaScript工具库,提供了许多实用的函数和方法,用于简化JavaScript编程中的常见任务和操作。本文将介绍Lodash的基本用法和一些常见的应用场景。 javascript 安装和导入 可以通过npm或yarn安装Lodash,例如:npm …

前端优化-兼容问题

1.样式兼容 1)ios键盘大写问题 <input type"text" autocapitalize"off"></input> 2&#xff09;h5标签在低版本浏览器兼容 添加html5shiv.js 布局前加入 <!-- [if it ie 9] ><script src"shiv.js"></script>…

循环队列、双端队列

循环队列、双端队列 1. 循环队列1.1 循环队列1.2 代码实现1.3 力扣622. 设计循环队列2. 双端队列 1. 循环队列 1.1 循环队列 特殊的队列&#xff0c;首尾相连&#xff0c;空间可重复利用&#xff1b;环形队列常使用数组实现&#xff0c;且为了方便队列的判空、判满处理&#x…

Yjs + quill:快速实现支持协同编辑的富文本编辑器

大家好&#xff0c;我是前端西瓜哥&#xff0c;这次来看看 Yjs 如何帮助我们实现协同编辑能力的。 Y.js 是一个支持 协同编辑 的开源库。只要我们将自己的数据转换为 Y.js 提供的 Y.Array、Y.Map 类型&#xff0c;Y.js 就会自动帮我们做数据的一致性处理和同步。 一致性问题 …

基于Java的两个通用安全模块的设计与实现

摘 要 本文详细介绍了基于口令的身份认证与文件安全传输两个通用安全模块的设计原理和实现过程,分析了当前口令保存的安全性,提出了运用MD5算法等对口令进行处理,并将处理结果保存在数据库中的方法。同时为了进一步增强认证系统的灵活度,设计了用户注册时的口令模式选择、…

shell函数

shell函数 功能 使用函数可以避免代码重复使用函数可以将大的工程分割为若干小的功能模块&#xff0c;代码的可读性更强 一&#xff1a;函数的定义方法 方法一 function 函数名 { 命令序列 }举例&#xff1a; function user {useradd $nameecho 123456 | passwd --stdin …