float对内联元素和块元素的影响
来源:互联网 发布:网页编程前景 编辑:程序博客网 时间:2024/05/22 14:23
写在前面:附一篇w3s的关于css float的讲解:http://www.w3school.com.cn/css/css_positioning_floating.asp
float属性还没有彻底了解,因为遇到了float之后会导致width自适应最小化的问题,然后又偶然发现float的内联元素可以自己设置宽高,内外边距等属性了。
一、对于内联元素float之后的改变,找到的解释为:(链接:http://blog.csdn.net/forest_fire/article/details/50944864)
当该属性(display)不等于none引起对象浮动时,对象将被视作块对象(block-level),即display属性等于block。也就是说,浮动对象的display特性将被忽略。float在绝对定位和display为none时不会被应用。对应的脚本特性为stylefloat(ie)或cssfloat(非ie)。(注意这里为stylefloat或cssfloat,而不是float)
因为只有块元素才会有物理属性,在css世界里边,有三种形态的东西,
1. 块元素。 特性:有物理属性,width,height写值起作用,而且要占据一行。
2. 内联元素。 特性:没有物理属性。但是margin,padding值有用。不占据一行,后边可以有兄弟元素。
3. 即是块又是内联,根据兄弟兄弟元素决定。
为什么是float之后才会有物理属性,这就是块与内联元素相互转化的问题。
块元素 -> 内联元素: display:inline;
内联元素 -> 块元素: display:block;
float就是隐性的把内联元素转化为块元素,这是对内部的特性就是有物理特性,但是他不占据一行。对外是内联元素的属性。他有个坏处就是会影响兄弟元素。相当于:display:inline-block;
那为什么不直接display:inline-block;因为这个玩艺在ie6下有几个px的bug。
1. 块元素。 特性:有物理属性,width,height写值起作用,而且要占据一行。
2. 内联元素。 特性:没有物理属性。但是margin,padding值有用。不占据一行,后边可以有兄弟元素。
3. 即是块又是内联,根据兄弟兄弟元素决定。
为什么是float之后才会有物理属性,这就是块与内联元素相互转化的问题。
块元素 -> 内联元素: display:inline;
内联元素 -> 块元素: display:block;
float就是隐性的把内联元素转化为块元素,这是对内部的特性就是有物理特性,但是他不占据一行。对外是内联元素的属性。他有个坏处就是会影响兄弟元素。相当于:display:inline-block;
那为什么不直接display:inline-block;因为这个玩艺在ie6下有几个px的bug。
二、对于块元素float之后的改变(其实和内联元素一样,相当于变成了:inline-block元素,最明显的是宽度自适应发生了变化)
原文链接:https://my.oschina.net/jing31/blog/6601
一直以为float属性不会对div的宽度或高度有什么影响.但是,这两天我发 现在float对div宽度的影响是显著的.
首先div的默认宽度是width:auto;意思是自动调整宽度.
在不带float的情况下,div的宽度会自动调整至最大化,而在带float的情况下则正好相反,它会自动调整至最小化.
测试如下:
<div style="background-color:#0099FF;">sss</div><div style="background-color:#ff0000; float:left;">sss</div>
这个可能是为了clear而设定
第二div的默认高度也是height:auto.带不带float的div都一样,都是自动调整至最小化
第三div带float时,只要宽度不超过网页宽度,则其它元素包括div都要环绕它.或者也可以认为此时的带float的div是一个特殊的 padding
测试如下:
<div style="background-color:#0099FF;">sss</div><div style="background-color:#ff0000; float:left;">sss</div><div style="background-color:#0099FF;">sss</div><div style="background-color:#ff0000; float:left; width:100%;">sss</div><div style="background-color:#0099FF;">sss</div><div style="background-color:#0099FF;">sss</div><div style="background-color:#ff0000; float:left; width:100px; height:50px;">sss</div>ssssssssssssss<br />sssssssssssssssss<br/> ssssssssssssss
从以上你或者已经知道了一个重要的div+css的布局方法: 左右分开的网页,左侧的宽度固定,右侧的宽度随分辨率自动适应,并占满右侧的空间.
方法就是左侧的div用float:left.而右侧的div不带float.这样就可以实现这个效果了.
阅读全文
0 0
- float对内联元素和块元素的影响
- 【初级-个人理解】float是否脱离普通流?是否占据空间?以及浮动对内联和块元素的影响。
- CSS的块元素和内联元素
- HTML的块元素和内联元素
- 内联元素和块元素
- 块元素和内联元素
- 内联元素和块元素
- 块元素和内联元素
- 块元素和内联元素
- 块元素和内联元素
- CSS的内联和块元素
- 块元素和内联元素css中块元素可以同时用float和inline消除ie6下的margin加倍
- css中常见的块级元素和内联元素
- css块级元素和内联元素的区别
- 内联元素和块级元素的区别
- 内联元素和块级元素的定位区别
- js块元素和内联元素的种种恩怨
- html的块级元素和内联元素
- SpringBoot的数据库操作
- C. Vladik and Memorable Trip dp 选择区间
- Java泛型中的命名规则(标识符含义)
- mac下配置jdk,tomcat,maven,mysql环境变量
- 新的开始
- float对内联元素和块元素的影响
- 编程第五十三天
- MSSQL:触发器
- 资源分享 | 摄影视频 | 杨最醉摄影视频(1-7)
- CodeVS 1288 迭代加深 解题报告
- 22 制作安装包,让用户安装程序
- 刷清橙OJ--A1036.分解质因数
- 数据结构之杨辉三角实现
- 04-JDBC学习手册:JDBC中使用transaction(事务)编程和Javabean定义