让块元素在同一行显示的方法: float 和inline-block
float:
定义:按照一个指定的方向移动,遇到父级的边界或者相邻的浮动元素就会停下来(不完全脱离文档流)
值: left、right、none
特点:
1、浮动的块元素可以在一行显示,宽度是被内容撑开的
2、浮动的行内元素支持宽高
3、非浮动元素里的内容会留出前面浮动元素的位置(盒模型的位置)
4、浮动的子元素不会撑开其父元素的高度,所以换行、空格也不会影响父元素(要撑开父元素的话需要在父元素最后增加一个清楚左右浮动的子元素clear: both; after伪类清除浮动)
.clearfix:after{
content: '';
display: block;
clear: both;
}
inline、inline-block:
把换行代码解析成一个空格
display:inline-block; 行内块元素
特征:
1、行内块元素支持宽高
2、行内块元素可以在一行显示
3、不给宽高的话,宽度会由内容撑开
4、代码换行会被解析成一个空格
5、IE6、7不支持块元素的inline-block
6、行内块元素没有脱离文档流,所以能撑开父元素
IE6、7不认识inline-block,给行内元素加上这个属性后会触发IE的haslayout特点,会让行内元素具有与inline-block一样的特征,所以它不支持块元素的inline-block
inline-block与float的区别:
如果高度不一至的情况下,想让他们按顺序排列就可以选择inline-block
让块元素在同一行显示的方法: float 和inline-block的更多相关文章
- css布局------块元素水平垂直居中的四种方法
HTML <div class="parent answer-1"> <div></div></div> CSS .parent { ...
- web - 块元素和内嵌元素的特征
块: 1.独占一行 2.支持所有的样式 3.不设置宽度的时候,宽度撑满整行 常用的快标签有: div,section,header,nav,footer,article,aside,ul,ol,li, ...
- 块元素block,内联元素inline; inline-block;
block:块元素的特征 div ol li 等: 1.只有高度不设置宽度的时候默认撑满一行: 2.默认块元素不在一行: 3.支持所以CSS命令: inline:内联元素的特征 span i stro ...
- CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- 关于IE 浏览器的position居中定位的问题和 行块元素的设置问题
这两天在写页面时,遇到一些IE浏览器显示不正常的问题,主要有两个: 1. 在td 中设置span 元素水平垂直居中,在谷歌浏览器中可以正常显示,但是在IE 中却无法显示出想要的结果,即不能实现垂直水平 ...
- CSS 两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行解决办法
我们可以发现:两个行内块元素,宽度相加刚好等于父盒子容器的元素,但第二个元素掉在第二行,这是什么问题呢? 我们先来看一下效果: <!DOCTYPE html> <html lang= ...
- HTML&CSS基础-内联和块元素
HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号
大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏 ...
- html中的块元素(Block)和内联元素(Inline)(转)
我们首先要了解,所有的html元素,都要么是块元素(block).要么是内联元素(inline).下面了解一下块元素.内联元素各自的特点: 块元素(block)的特点: 1.总是在新行上开始:2.高度 ...
随机推荐
- Twitter推广消息可使品牌线下销售额增长三成
新浪科技讯 北京时间8月9日上午消息,Twitter周四宣布,该公司的推广消息(Promoted Tweet)可以让品牌的线下销售增长29%. 此外,Twitter当天还推出了一个新项目,让品牌可以追 ...
- 针对某一网站的UI进行分析
本周课上教学通过对PM(项目经理)的学习,我了解到PM 对项目所有功能的把握, 特别是有关的UI内容.最差的UI, 体现了团队的组织架构:其次, 体现了产品的内部结构:最好, 体现了用户的自然需求. ...
- OpenCV学习笔记——imread、imwrite以及imshow
1.imread Loads an image from a file. 从文件中读取图像. C++: Mat imread(const string& filename, int flags ...
- hdu 1241--入门DFS
Oil Deposits Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tot ...
- HDU 5195 DZY Loves Topological Sorting 拓扑排序
题目链接: hdu:http://acm.hdu.edu.cn/showproblem.php?pid=5195 bc(中文):http://bestcoder.hdu.edu.cn/contests ...
- Alpha 冲刺10
队名:日不落战队 安琪(队长) 今天完成的任务 整理项目. okhttp学习第四弹. 明天的计划 okhttp学习第五弹. 阶段反思. 睡觉. 还剩下的任务 个人信息数据get. 遇到的困难 困难:好 ...
- week1:个人博客作业
1.软件工程课程的希望和目标 老师步置的任务完整的做完,每一步都是自己做的,明白自己做的每一步,和为什么这样做. 期末考试最后为95分以上,最好是100. 每周学习这门课时间 每周2节课(90分钟)+ ...
- iOS- 再谈ARC里内存问题,ARC里数组、对象内存得不到释放?
1.前言 本来以为在改成ARC以后,不再需要考虑内存问题了,可是在实践中还是发现有一些内存问题需要注意,今天我不谈block的循环引用的问题,主要说说一些对象.数组不内存得不到释放的情况. ...
- C语言 aabbcc、abc、fabc、aabc
输入一个字符串,匹配字符串中连续出现的字符串.并且连续个数相等 如输入 aabbcc.abc.fabc.aabc.aabbc 分别输出yes还是no #include<stdio.h>#i ...
- 关于SIGPIPE信号
对一个对端已经关闭的socket调用两次write, 第二次将会生成SIGPIPE信号, 该信号默认结束进程.具体的分析可以结合TCP的"四次握手"关闭. TCP是全双工的信道, ...