对display主要属性的探究,以及vertical-aligin
display
首先要简单说明一下display的主要3个主要属性,分别为block,inline-block,inline,这里只提及主要,关于其他的inherit,none等可以自行了解
inline:不可定义宽高,内容决定位置
inline-block:可定义宽高,内容决定位置
block:可定义宽高,独占一行
三种属性都可以设定padding,margin但是识别空间各有不同
block,上下会形成margin合并,取最大的margin值
inline-block,它与block不会形成上下margin合并
inline,它确实是可以设定margin和padding,但是但其进行排列的时候,只会识别它的左右margin+padding的空间,上下的margin和padding的空间会被忽视,具体如下
首先,这是一个定义了margin+padding的inline,默认与inline-block进行文本对齐
这是取消inline-block后,可以发现其上方padding和margin被忽视
这是给其上下加了两个block后,效果不言而喻
以上均为个人摸索而来,如有不到请指正
vertical-aligin
关于vertical-aligin,个人实践所得效果,它是用在inllne-block上的,但是并不控制inline-block,对其内部元素也没有影响,而是控制和他相邻的inline元素的对齐方式,例如:
如果一个inline-block前后有inline元素,我在inline-block上设定vertical-align: middle;就会出现以下效果
多余的请自行实验,由于网上看到的对此写的很多,这里给大家简单指明一下它的用法
也是个人探究得来,不到请指正
对display主要属性的探究,以及vertical-aligin的更多相关文章
- vue -webkit-box-orient: vertical webpack打包后被过滤掉了 线上没有这行代码
(1)方法一:加上绿色注释,跳过webpack的css打包 .word-overflow-{ overflow:hidden; text-overflow:ellipsis; display:-web ...
- 超出字数部分省略(主要解决不兼容;display: -webkit-box;的浏览器)
注明:内容于http://www.cnblogs.com/chentongtong/p/5474553.html进一步整理. 1.现webkit内核的浏览器支持display: -webkit-box ...
- 多行文字超出字数部分省略(主要解决不兼容;display: -webkit-box;的浏览器)
注明:内容来处https://www.cnblogs.com/ss977/p/5846176.html 1.现webkit内核的浏览器支持display: -webkit-box;属性, 所以网页中显 ...
- Display controller
Field of the Invention The present invention relates to a display controller. Background to the inve ...
- 小技巧!CSS 整块文本溢出省略特性探究
今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节. 文本超长打点 我们都知道,到今天(2020/03/06),CSS 提供了两种方式便于我们进行文本超长的打点省略. 对于单行文本,使用 ...
- 谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- JS实现文字截取(雾)
今天在跳板群那里看到一个神奇的样式,效果: 感觉十分神奇,因为一开始以为他是只有一个P元素包着文字然后最后一个自动截取文字,而且最后一行还可以提前截取???这怎么做到的,然后想了一下css怎么做,好像 ...
- 【转】web移动端一些常用知识
1.去掉 a,input 在移动端浏览器中的默认样式(半透明灰色遮罩阴影) a,button,input,optgroup,select,textarea { -webkit-tap-highligh ...
- CSS实现单行与多行文字省略(truncation)
在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...
随机推荐
- 解决关于ios访问相机闪退问题
在mac上的ionic3项目打包成苹果app,系统版本是10.3.3 . 当调用相机的时候出现闪退情况,这是调试出现的问题: This app has crashed because it attem ...
- list源码4(参考STL源码--侯捷):transfer、splice、merge、reverse、sort
list源码1(参考STL源码--侯捷):list节点.迭代器.数据结构 list源码2(参考STL源码--侯捷):constructor.push_back.insert list源码3(参考STL ...
- sql server 备份与恢复系列四 大容量模式下的备份与还原
一. 概述 在sql server 备份与恢复系列的第一篇里,有讲到大容量模式下备份与还原的相关知识.这篇重点来演示在大容量模式下常用的备份与还原模式“完整备份+差异备份+日志备份”. 在大容量恢复模 ...
- Gradle安装使用以及基本操作
这两天看到越来越多的在接触Gradle,然后发现我之前没有做过记录,而且之后下个月的一些有关SpringBoot的东西也需要用到,所以这里就来记录一下,方便以后使用. 简单介绍 Gradle是一个好用 ...
- 13 Tensorflow机制(翻译)
代码: tensorflow/examples/tutorials/mnist/ 本文的目的是来展示如何使用Tensorflow训练和评估手写数字识别问题.本文的观众是那些对使用Tensorflow进 ...
- IDEA远程仓库版本回滚
访问我的博客 使用 git 进行项目的版本控制时,肯定会遇到回滚版本的情况,回滚有两种,一种是本地仓库回滚,另外一种是远程仓库回滚.以下详细讲解两种回滚方式,本文主要讲解远程回滚,以及常见使用误区. ...
- Ubuntu环境下mysql常见的操作
1 启动mysql服务:Service mysql start 再次启动:service mysql restart 停止mysql服务:service mysql stop 确定mysql是否 ...
- 谈谈 JAVA 的对象序列化
所谓的『JAVA 对象序列化』就是指,将一个 JAVA 对象所描述的所有内容以文件 IO 的方式写入二进制文件的一个过程.关于序列化,主要涉及两个流,ObjectInputStream 和 Objec ...
- Spring Boot (四)模板引擎Thymeleaf集成
一.Thymeleaf介绍 Thymeleaf是一种Java XML / XHTML / HTML5模板引擎,可以在Web和非Web环境中使用.它更适合在基于MVC的Web应用程序的视图层提供XHTM ...
- 给HTML页面指定元素添加属性,添加父元素
给HTML页面指定元素添加属性,添加父元素 下面拿一个给富文本中所有的图片增加layer弹窗效果. 思路: 给富文本父元素设置属性. 获取父元素里所有的img 此处用到querySelectorA ...