display: inline、block、inline-block、flex和inline-flex
inline
共享一行
不能修改width、height属性,大小由内容撑开
padding属性 top、right、bottom、left设置都有效;margin属性只有left、right设置有效
block
独占一行,默认与父元素同宽
可以修改width、height属性
padding、margin四个方向的值设置均有效
inline-block
共享一行
可以修改width、height属性
padding、margin四个方向的值设置均有效
flex
独占一行
将对象作为弹性伸缩盒显示
inline-flex
共享一行
将对象作为内联块级弹性伸缩盒显示
display: inline、block、inline-block、flex和inline-flex的更多相关文章
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- CSS中的display属性(none,block,inline,inline-block,inherit)
css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...
- 关于display的属性:block和inline-block以及inline的区别,float相关说明
首先是block和inline的区别,说通俗点block就是让其形成块级元素,而且其前后都会有换行符:而inline的话就是让元素设置为内联样式(对其设置的宽高都没有什么卵用,不产生效果,但是颜色效果 ...
- 当inline元素包裹block元素时会发生什么
经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...
- Initialization failed for block pool Block pool(转载)
2014-06-18 20:34:59,622 FATAL org.apache.hadoop.hdfs.server.datanode.DataNode: Initialization failed ...
- html中的块元素(Block)和内联元素(Inline)(转)
我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
- flex:1和flex:auto详解
flex:1和flex:auto详解 首先明确一点是, flex 是 flex-grow.flex-shrink.flex-basis的缩写. flex-grow属性定义项目的放大比例,默认为0,即如 ...
- inline元素、block元素
inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...
- 块元素block,内联元素inline; inline-block;
block:块元素的特征 div ol li 等: 1.只有高度不设置宽度的时候默认撑满一行: 2.默认块元素不在一行: 3.支持所以CSS命令: inline:内联元素的特征 span i stro ...
随机推荐
- Vagrant基本知识、基本操作
Vagrant基本知识.基本操作 一.介绍 二.安装Vagrant 三.安装到Windows 四.准备Boxes 五.基本操作 六.Vagrant常用命令 七.Vagrantfile 7.1 box ...
- KVM(虚拟机的迁移)
- 子网划分、变长子网掩码和TCP/IP排错__散知识点
1.IP零子网(ip subnet-zero):这个命令可以允许你在自己的网络设计中使用第一个和最后一个子网.例如,C类掩码192通常只可以提供子网64和128,但在使用了ip subnet-zero ...
- 快速导出jekyll博客文件进行上传部署
快速导出jekyll博客文件进行上传部署 在使用markdown书写jekyll博客时,经常需要写一个头部信息用以让jekyll读取博文信息,这是一件比较麻烦的事,因此我使用HTML实现了一个快速导出 ...
- UVA 10294 项链与手镯 (置换)
Burnside引理:对于一个置换\(f\), 若一个着色方案\(s\)经过置换后不变,称\(s\)为\(f\)的不动点.将\(f\)的不动点数目记为\(C(f)\), 则可以证明等价类数目为\(C( ...
- CF Hello 2020 E.New Year and Castle Construction
E.New Year and Castle Construction 题意 给定n个点,对于每个点\(p\),求出4-point 子集(该子集有四个点,并且围成的圈包含\(p\))的个数 数据给的点中 ...
- AtCoder - agc043_a 和 POJ - 2336 dp
题意: 给你一个n行m列由'#'和'.'构成的矩阵,你需要从(1,1)点走到(n,m)点,你每次只能向右或者向下走,且只能走'.'的位置. 你可以执行操作改变矩阵: 你可以选取两个点,r0,c0;r1 ...
- HDU - 2825 Wireless Password (AC自动机+状压DP)
题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=2825 题意:给一些字符串,构造出长度为n的字符串,它至少包含k个所给字符串,求能构造出的个数. 题解: ...
- Codeforces Round #646 (Div. 2) E. Tree Shuffling dfs
题意: 给你n个节点,这n个节点构成了一颗以1为树根的树.每一个节点有一个初始值bi,从任意节点 i 的子树中选择任意k个节点,并按他的意愿随机排列这些节点中的数字,从而产生k⋅ai 的成本.对于一个 ...
- hdu517 Triple
Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Submissio ...