如何实现左右两边有小竖线，但是高度比中间的字短？

用line-height，把line-height设置得跟height一样大，同时把font-size设置比line-height大即可

line-height的更多相关文章

  1. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  2. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  3. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  4. 真正的能理解CSS中的line-height，height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  5. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  6. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

  7. 微信小程序demo2

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现   ...

  8. 模仿东京首页banner轮播，京东新闻上下滚动动画实现（动画实现）

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...

  9. 想着模仿京东微信首页呢，banner滚动搞定了，写到了一半了

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞 ...

  10. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

随机推荐

  1. MATLAB R2017a 进入主界面以后一直处于初始化状态的解决办法

    自从前几天更新了win10系统,结果发现matlab不能用了,进入主界面一直初始化,没完没了. 网上说可能是许可证等问题,但经过尝试发现仍然无法解决问题. 仔细一想,发现win10系统的防火墙默默把它 ...

  2. SpringMVC表单验证与Velocity整合

    阅读本文约“1.2分钟” 定义表单类 以Login为例,有username和password两个字段 import javax.validation.constraints.NotNull; impo ...

  3. C#设计模式之二十职责链模式（Chain of Responsibility Pattern）【行为型】

    一.引言 今天我们开始讲“行为型”设计模式的第八个模式,该模式是[职责链模式],英文名称是:Chain of Responsibility Pattern.让我们看看现实生活中的例子吧,理解起来可能更 ...

  4. 28-30 js 文本全选

    要点:使用select(); 上代码: if (e.keyCode === 27){ document.getElementById('input').select() } //当点击键盘esc键时候 ...

  5. vue-awesome-swiper 水平滚动异常

    使用教程:https://github.com/cynthiawupore/vue-awesome-swiper 实例: <template> <div class="in ...

  6. vue从入门到进阶：指令与事件（二）

    一.插值 v-once 通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新.但请留心这会影响到该节点上所有的数据绑定: span v-once>这个将不会改 ...

  7. HTML5效果：实现树叶飘落

    实现如图所示的东西效果(落叶下落): html代码: <!DOCTYPE html> <html> <head> <title>HTML5树叶飘落动画& ...

  8. 大数据时代，Wyn Enterprise和您一起探讨CIO的困境和出路 ZT

    这是一篇知识分享帖,如果您致力于成为一名CIO,希望您能够阅读完,信息虽然简略,但我们依然希望可以帮到您. CIO:首席信息官 CIO是干什么的 一.经典的CIO主要负责什么 1.IT战略规划.IT预 ...

  9. 10.Odoo产品分析 (二) – 商业板块(5) –日历(1)

    查看Odoo产品分析系列--目录 日历模板也可以理解为一个日历视图,在分析"销售"模块的日历视图时做过介绍.在这里做一下详细的介绍:  从页面上,它横向分为两个部分,左边的80%显 ...

  10. Android为TV端助力 deep link(深度链接)与自定义协议！

    此自定义仅供参考! 首先打开androidManifest.xml 在MainActivity中添加如下内容: <activity android:name=".MainActivit ...