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 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸张,直到包含它的元 ...
随机推荐
- UE4 分层材质 Layerd Materials
在UE4中最正规的材质制作流程就像: 建立新材质,并将其调整为达至完美. 在内容浏览器中,建立新材质函数,并将所有材质函数节点复制/粘贴到其中. 将网络连接到新的 Make Material Attr ...
- nginx 防火墙、权限问题
1.nginx安装,配置完成之后,尝试访问没有响应,主机可以ping通,/var/log/nginx/access.log日志没有查到任何记录 解决方法:查看linux防火墙,关闭 命令:ipta ...
- 如何判断NSDictionary是否包含某个键
方法一: if([[dictionary allKeys] containsObject:key){ // contains key} 方法二: if([dictionary objectFo ...
- JVM-类加载器
类加载器 对于虚拟机的角度来看,只存在两种类加载器: 启动类加载器(Brootstrap ClassLoader)和"其他类加载器".启动类加载器是由C++写的,属于虚拟机的一部分 ...
- [转]CentOS Apache 性能调试!
查看Apache的并发请求数及其TCP连接状态: netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' 返回结果示例 ...
- linux中操作java进程
通过 ps -ef|grep java 来得到真正运行的线程 通过kill -9 XXXXX来杀死正在运行的线程,其中XXXXX是上面java线程的序号. 另外还有2个指令我也不熟悉,一个是cat,一 ...
- awk处理重复行错误分析
[root@localhost ~]#cat 0712 YRSD2-1-11 YRSD2-2-18 YRSD1-1-8 YRSD1-1-18 YRSD1-1-20 YRSD1-1-25 YRSD1-2 ...
- Struts2中拦截器的使用与配置
一,拦截器是什么? 拦截器是在Action执行之前和之后执行的代码,是一个类似于过滤器的类: 二,拦截器的作用 拦截器拦截Action的请求,在Action之前或之后实现某项功能: 三,拦截器的特点 ...
- 面向对象_03【关键字:final使用】
final关键字:可修饰类.变量名和方法1,final修饰的类不能被继承2,final修饰的变量(成员.局部)是常量,只能赋值一次.3,final修饰的方法不能被子类重写Example:一:修饰类 / ...
- Sql Server的艺术(三) SQL聚合函数的应用
SQL提供的聚合函数有求和,最大值,最小值,平均值,计数函数等. 聚合函数及其功能: 函数名称 函数功能 SUM() 返回选取结果集中所有值的总和 MAX() 返回选取结果集中所有值的最大值 MIN( ...