本篇文章给大家分享的是有关怎么在CSS中实现inline-block的最小宽度值，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。<style>
本篇文章给大家分享的是有关怎么在CSS中实现inline-block的最小宽度值，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
<style> .ao ,.tu{ display: inline-block; width: 0; font-size: 14px; line-height: 18px; margin: 35px; color: skyblue; } .ao:before, .tu:before{ outline: 2px solid #cd0000; font-family: Consolas, Monaco, monospace; } .ao:before{ content: "love你love"; } .tu{ direction: rtl; } .tu:before{ content: "我love你" } </style></head><body> <div> <span class="ao">我爱mother</span> <span class="tu">不爱你</span> <span>我爱你</span> </div></body>结果演示
代码解读
两个span标签来展示凹凸的效果。span标签是行内元素，如果对三种样式不是很熟悉我在文章的后面都有说明。
首先通过display转换成行内块元素。然后宽度设置为0让span元素能够拥有最小宽度值。
对两个伪元素使用公共的伪元素before，伪元素不同的内容会不同的换行外边框样式为红色并且规定字体样式。
为什么要用伪元素，不用伪元素直接进行设置不行吗？我带着这个疑问又试了一次，发现不用伪元素的时候文字是凹凸显示，但是边框不是，而且文字之间还会叠加和重合。这个原因还没有想明白，大家可以看看讨论一下。
direction: rtl;是为了让文本方向从右到左，凸出来的部分正好对准凹进去的口子。
后面的我爱mother，不爱你会按照行内块元素的最下宽度值在before元素内容之后显示。
标签分类
块级元素
<address> 定义地址
<caption> 定义表格标题
<dd> 定义列表中定义条目
<div> 定义文档中的分区或节
<dl> 定义列表
<dt> 定义列表中的项目
<fieldset> 定义一个框架集
<fORM> 创建 html 表单
<h2> 定义最大的标题
<h3> 定义副标题
<h4> 定义标题
<h5> 定义标题
<h6> 定义标题
<h7> 定义最小的标题
<hr> 创建一条水平线
<legend> 元素为 fieldset 元素定义标题
<li> 标签定义列表项目
<noframes> 为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript> 定义在脚本未被执行时的替代内容
<ol> 定义有序列表
<ul> 定义无序列表
<p> 标签定义段落
<pre> 定义预格式化的文本
<table> 标签定义 HTML 表格
<tbody> 标签表格主体（正文）
<td> 表格中的标准单元格
<tfoot> 定义表格的页脚（脚注或表注）
<th> 定义表头单元格
<thead> 标签定义表格的表头
<tr> 定义表格中的行
行内元素
<a> 标签可定义锚
<abbr> 表示一个缩写形式
<acronym> 定义只取首字母缩写
<b> 字体加粗
<bdo> 可覆盖默认的文本方向
<big> 大号字体加粗
<br> 换行
<cite> 引用进行定义
<code> 定义计算机代码文本
<dfn> 定义一个定义项目
<em> 定义为强调的内容
<i> 斜体文本效果
<img> 向网页中嵌入一幅图像
<input> 输入框
<kbd> 定义键盘文本
<label> 标签为 input 元素定义标注（标记）
<q> 定义短的引用
<samp> 定义样本文本
<select> 创建单选或多选菜单
<small> 呈现小号字体效果
<span> 组合文档中的行内元素//本例子当中用到了span
<strong> 语气更强的强调的内容
<sub> 定义下标文本
<sup> 定义上标文本
<textarea> 多行的文本输入控件
<tt> 打字机或者等宽的文本效果
<var> 定义变量
行内块元素
<button> 按钮
<del> 定义文档中已被删除的文本
<iframe> 创建包含另外一个文档的内联框架（即行内框架）
<ins> 标签定义已经被插入文档中的文本
<map> 客户端图像映射（即热区）
<object> object对象
<script> 客户端脚本
css的全称是Cascading Style Sheets（层叠样式表），它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
以上就是怎么在css中实现inline-block的最小宽度值，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。
--结束END--
本文标题: 怎么在css中实现inline-block的最小宽度值
本文链接: https://www.lsjlt.com/news/252006.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
2024-05-15
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0