css的浮动与定位
显示与隐藏
标签 |
属性 |
值 |
效果 |
区别 |
css的style |
display |
none |
元素不可见 |
不占页面空间 |
css的style |
visibility |
hidden |
元素不可见 |
占页面空间 |
display的三个属性值显示效果
属性 |
值 |
效果 |
display |
inline |
显示为内联元素 |
display |
block |
显示为块级元素 |
display |
inline-block |
显示为行内块级元素 |
overflow内容溢出
属性 |
值 |
效果 |
overflow |
visible |
可见 |
overflow |
hidden |
隐藏 |
overflow |
scroll |
滚动 |
overflow |
auto |
自动(最优) |
float浮动
属性 |
值 |
效果 |
float |
none |
不浮动 |
float |
left |
向左浮动 |
float |
right |
向右浮动 |
子元素浮动不能超出父元素的范围
兄弟元素设置相同浮动效果时,会自动进行排列,排列超出页面最大宽度会自动换行
兄弟元素前一个未设置浮动,而后一个设置,后面元素浮动不能超过前面兄弟元素
高度塌陷
*
块级元素高度
=
所有子元素高度
+
padding + border* 由于没有给父级元素设置高度 ,当子级元素设置浮动时 , 脱离了文档流 , 导致父级元素高度丢失效果称为高度塌陷
* 高度塌陷问题解决 —— 开启BFC (block formatting context)块级格式化上下文环境
* BFC特性:
- 文档流中的元素不会被浮动的元素所覆盖
- 子元素设置外边距时,不会传递给父元素
- 元素可以包含浮动的子元素
* 怎样开启BFC:
- 设置浮动(float)
- 设置元素显示为行内块级元素(inline-block)
- 将元素内容溢出设置为非visible值(hidden)
- 设置元素为绝对定位(position)
- 在所有子元素后设置一个子元素,并设置clear属性为both
position
属性 |
值 |
定位位置 (相对偏移量) |
效果说明 |
position |
static |
默认 |
静态定位 |
position |
absolute |
top/right/bottom/left |
绝对定位 |
position |
relative |
top/right/bottom/left |
相对定位 |
position |
fixed |
top/right/bottom/left |
固定定位 |
区别
类型 |
是否脱离文档流 |
情况描述 |
绝对定位 |
√ |
1.父级为body,相对于页面 2.父级不为body,父级未开启定位,子级相对于页面 3.父级不为body,父级开启定位,子级相对于父级 |
相对定位 |
X |
相对于元素本身位置,与父级无关 |
固定定位 |
√ |
相对于页面,一种特殊的绝对定位 |
css的浮动与定位的更多相关文章
- 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...
- CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
---恢复内容开始--- 一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是 ...
- CSS的浮动和定位
一.CSS中的浮动 1.定义和用法 float 属性定义元素在哪个方向浮动.在 CSS 中,任何元素都可以浮动.浮动会使原元素变成一个行级元素,而不论它本身是何种元素.如果浮动非替换元素,则要指定一个 ...
- CSS布局浮动和定位属性的区别
float: left|right; 可以自动排列自动折行, 但需要clear来配合清除浮动;display: inline-block 有些时候可以替代float实现相同的效果. position: ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- CSS中的浮动和定位
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...
- css清除浮动定位造成的异常
清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...
- CSS区块、浮动、定位、溢出、滚动条
CSS中区块的使用 CSS中浮动的使用 CSS中定位的使用 CSS中溢出的使用 CSS中滚动条的使用 17.1 CSS中区块的使用 属性名称 属性值 ...
- CSS 设计彻底研究(四)盒子的浮动与定位
第四章 盒子的浮动与定位 本章的重点和难点是深刻地理解”浮动“和”定位“这两个重要的性质,对于复杂页面的排版至关重要. 4.1 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸张,直到包含它的元 ...
随机推荐
- dede首页调用分类信息
格兰斯-与你共同开创门窗定制5G时代 5G战略--明确的,没有歧义的明亮奥尼克斯的观点与追求 {dede:channelartlist row=1} {dede:arclistsg r ...
- dede从www跟目录迁移,网站空间
图集缩略图表名dede_uploads 字段url; 图集文章内部的图片表名dede_addonimages 字段imgurls 频道文章列表的图片 ...
- Bootstrap中data-src无法显示图片,但是src可以
在学习bootstrap时,书中的源码是用的data-src来定义图像位置,但是我在使用的时候无法显示图片:data-src可以在img标签中使用来显示图片吗?我使用src可以,而是用data-src ...
- dede文章插入分页符不起作用,编辑器中出现分页符,导致文章显示不全
文章来源:小灰博客| 时间:2013-10-30 13:40:21| 作者:Leo | 1 条评论 文章分类:IT技术分享.PHP 标签: dedecms 今天偶尔发现给一篇dede下的长文章 ...
- 数据库 MySQL进阶之索引
数据库的索引非常重要,基本面试数据库的问题都在索引上,所以这里小编整理出来,一方面为了自己复习,一方面也方便大家. 一,索引前传 在了解数据库索引之前,首先有必要了解一下数据库索引的数据结构基础,那么 ...
- Struts2获取Session的三种方式
1.Map<String,Object> session = ActionContext.getContext().getSession(); session.put("cod ...
- Linux IO时事检测工具iostat
Linux IO时事检测工具iostat iostat命令用于检测linux系统io设备的负载情况,运行iostat将显示自上次运行该命令以后的统计信息.用户可以通过指定统计的次数和时间来获得所需的统 ...
- CentOS 7安装Tomcat8
一.安装环境 tomcat的安装依赖于Java JDK,需要先安装配置正确的JDK http://www.cnblogs.com/VoiceOfDreams/p/8376978.html 二.安装包准 ...
- 要学的东西太多了,还想学习opencv
资料先放这里,以后好好学 http://m.blog.csdn.net/column/details?alias=opencv-tutorial eclipse加载opencv库成功! B站视频教程资 ...
- python_怎么格式化字符串?
案例: 如何对下面字典的key左对齐 {'dhqbl': 30, 'psfgj': 40, 'ontpqsb': 90, 'mrean': 110, 'klespjtr': 60, 'lprnkqhb ...