CSS基础知识真难啊-浮动
无浮动
<ul style="width: 440px;">
<li id="myli" style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;">
<img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/>
</li>
</ul>
其中图片高度180px,此时li的高度alert为183。↑↑↑↑↑
接下来,在li中加上float属性:↓↓↓↓↓
<ul style="width: 440px;">
<li id="myli" style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;float:left">
<img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/>
</li>
</ul>
此时li的高度alert为。↑↑↑↑↑
接下来,在img中加上float属性:↓↓↓↓↓
<ul style="width: 440px;">
<li id="myli" style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;">
<img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" style="float:left"/>
</li>
</ul>
此时li的高度alert为0。↑↑↑↑↑
------------------------dispaly:inline-block与float:left--------------------------------
<ul style="width: 440px;">
<li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;display:inline-block">
<img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/>
</li>
<li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;">
<img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/>
</li>
</ul>
<ul style="width: 440px;">
<li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;float:left">
<img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/>
</li>
<li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;">
<img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/>
</li>
</ul>
浮动破坏了inline box,也就是破坏了高度,所以这里含有浮动属性的li元素实际上是没有高度的。所以呢,要是后面还有同样的li标签的话,就会水平对齐排列的
-------------------清除浮动的方法----------------------------
IE下清除浮动准则很简单,使元素haslayout就可以了。如宽度值,高度值,绝对定位,zoom,浮动本身都可以让元素haslayout。显然,首选zoom:1;不会干扰任何样式。
非IE浏览器常用的是overflow属性,overflow:hidden;或是overflow:scroll都可以,由于后者经常一不小心出现滚动条,所以前者用的更多些。
由于现代浏览器都支持after伪类伪元素,所以常常也会用after写入一个clear属性的元素清除浮动。当然,最投机取巧的方法就是直接一个<div style="clear:both;"></div>
放到当作最后一个子标签放到父标签那儿。
1. 投机取巧法
<div style="clear:both;"></div>
放到当作最后一个子标签放到父标签那儿,此方法屡试不爽,兼容性强,使用方便,是初学时使用的上佳之选。<div style="width:440px; border:4px solid; border-color: blue red green yellow;">
<div style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" /></div>
<div style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" /></div>
<div style="clear:both;"></div>
</div>
未加之前,整个div的高度为0
加了之后<div style="clear:both;"></div>,高度为188
2. overflow + zoom方法
.fix{overflow:hidden; zoom:1;}
此方法优点在于代码简洁,涵盖所有浏览器,可谓不错的选择啊。
不过也是有问题的,就是这个overflow:hidden;是个小炸蛋,要是里面的元素要是想来个margin负值定位或是负的绝对定位,岂不是直接被裁掉了,所以此方法是有不小的局限性的。一般不用这个方法,只是有时候顺便去除浮动时用用。
3. after + zoom方法
content:'clear both';
没问题,或是content:'张鑫旭'
也是ok的。于是有:.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}
这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了,不会影响任何其他样式,通用性强,覆盖面广。
------------------------------------
JavaScript可以改变CSS的属性。float貌似是JavaScript中的一个关键字,不能使用obj.style.float="left";
这样的句子。得使用其他写法。
obj.style.styleFloat = "left";
其他浏览器:
obj.style.cssFloat = "left";
来源:http://www.zhangxinxu.com/wordpress/?p=594
--------------------------除了float外的让两个div并排的方法------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
.box{background: #09c;padding: 50px;width:39%;border:1px solid #f5f5f5;height: 300px;}
.mgr20{margin-right:20px}
</style>
</head> <body>
<div style="padding:20px 0">
<div class="box mgr20" style="position:absolute">aaaaaaaaaa</div>
<div class="box" style="margin-left:49%"></div>
</div>
<div style="background:red;height:50px;">sssssssssss</div>
</body></html>
用float会让高度塌陷,而position:absolute同样,那么第九行的padding-bottom:20px会不起作用,(见下下个例子),所以本例中需要设定一个高度值(或是足以撑开高度的值)
这样用http://www.zhangxinxu.com/wordpress/?p=1152
其中的例子http://www.zhangxinxu.com/study/201010/mini-blog-no-width.html实验过后更有感触
里面提到的三无准则,不明觉厉!
--------------------------微博例子-------------------------------------------------
<html>
<head>
<style type="text/css">
body{color:#333;background:#ddf3f7;}
.body_class{width:800px;margin:0 auto;clear:both;}
p{padding:0;margin:0;}
#blog{background:#fff;width:600px;}
#myBlog{padding:10px 25px 30px 20px;}
#bolg_head{position:absolute;}
#head_img{border:1px solid #ccc}
#bolg_content{padding:0 0 25px 76px;border-bottom:1px dotted #222;}
#bolg_content p{font-size:14px;line-height:22px;padding-bottom:6px;}
</style>
</head> <body class="body_class">
<div id="blog">
<div id="myBlog">
<div id="bolg_head"><img src="a.jpg" id="head_img" /></div>
<div id="bolg_content">
<p>徐若瑄VIVIAN<img src="http://timg.sjs.sinajs.cn/t3/style/images/common/transparent.gif"/>:一個人的晚餐!茶泡飯!飯、飯、飯… 今日不減肥,先把病治好再說! 我認真吃完這,燒就會退了吧?! 開動啦~~~~~~~~~~~~~~~~~~</p>
<div><img src="b.jpg"/></div>
</div>
</div>
</div>
</body>
</html>
这是上述的图a图b
两个方法实现博客容器宽度变大时布局不乱:一个是第9行的position:absolute;一个第9行的改为float:left;
------------------------------------------------------------------
<html>
<head>
<style type="text/css">
.div { padding:20px; margin:10px 0 0 10px; background-color:#f0f3f9; float:left; }
.abs { position:absolute; }
</style>
</head> <body class="body_class">
<div class="div">
<img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" />
<p>图片无absolute</p>
</div>
<div class="div">
<img class="abs" src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" />
<p>图片absolute后</p>
</div>
</body>
</html>
完了完了,这个absolute的例子又让我感觉。。凌乱了,可能是因为它把属性加在了img上?
先把效果放上来,
-----------------------CSS 浮动的16条规则-------------------------------------------------
1.浮动元素会从文档正常流中删除,但它仍会影响布局
2.浮动非替换元素必须为其指定width,否则元素的width会趋于0而导致浮动元素不能完整显示
3.一旦元素具有了浮动属性,它便成为了一个块级元素。
4.浮动元素的左右外边界不能超出包含块的左右内边界
5.浮动元素永不会重叠
6.浮动元素不会超过容器的上padding
7.后浮动的元素永不会超过先浮动元素的顶端
8.浮动元素会尽可能高地放置,便这个高受限于规则6和规则7
9.浮动元素的下边界没有要求,因此当容器不足以容下浮动元素时,浮动元素会向下延伸。但部分浏览器会采取增大容器高度以容下浮动元素
,而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是:让容器也浮动
10.浮动元素向下延伸时,不会影响正常文本的显示,文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住
11.如果浮动元素设置了负的外边距、这将破坏规则4、6、7
12.当浮动元素的width>容器的width时,这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定)
13.浮动重叠规则:行内框(如strong)与浮动元素重叠时,其边框、背景、内容均位于浮动元素之上;块框与浮动元素重叠时,其边框、背景在
浮动元素之下,而内容在浮动元素之上。
14.对某个元素应用clear:left,意味着这个元素的左边不能有浮动元素。
15.clear不能用于非块级元素,比如<br/>,在大多数浏览器看来它是一个非块级元素,因此如果对br应用clear来清除浮动不会有任何效果,
除非改变br的display:block。
16.如果某元素应用clear清除浮动,则此元素设置的上外边距值会被忽略,但会有一个重新计算的上外边距值(甚至可能为0).如果希望此元素
与浮动元素之间有一个明确的间隔,可以在浮动元素上设置下外边距。
CSS基础知识真难啊-浮动的更多相关文章
- CSS基础知识真难啊
CSS层叠样式表Cascading Style Sheets CSS派生选择器(上下文选择器): 后代选择器:h1 strong {color:red;}第一个参数和第二个参数之间的代数是可以无限的 ...
- CSS基础知识真难啊-font
不吐不快啊!!!! 上午测试还好好的,下午再写一次准备发出来就出错了!! 传说中程序媛三大错觉:我肯定没错,刚才还好好的,一定是有人改了我代码.. 我的口头禅都快变成“刚刚还好好的”了! 事情是这样的 ...
- CSS基础知识真难啊-background-渐变
文章参考 http://www.zhangxinxu.com/wordpress/?p=727 http://www.uqu8.com/html/2014/html-css_1105/176.html ...
- CSS基础知识真难啊-position-relative-absolute
http://blog.csdn.net/libertea/article/details/11662661 -----------position:relative:生成相对定位的元素,相对于其正常 ...
- CSS基础知识(定位、浮动)
12.浮动 特点:将当前元素脱离文档流 float: left 即左浮动 float: right 即右浮动 注:*父与子元素,设置子元素浮动不能超出父元素的范围 *多个元素均设置为浮动时,将 ...
- CSS基础知识之position
最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...
- CSS基础知识之float
前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...
随机推荐
- Collections和Arrays常用方法
Collections:常见方法: 1, 对list进行二分查找: 前提该集合一定要有序. int binarySearch(list,key); //必须根据元素自然顺序对列表进行升级排序 //要求 ...
- 我理解的Hanlder--android消息传递机制
每一个学习Android的同学都会觉得Handler是一个神奇的东西,我也一样,开始我以为我懂了Handler的机制,后来发现自己是一知半解,昨天想想,我能否自己实现一个Handler,让子线程与Ac ...
- Theano3.2-练习之数据集及目标函数介绍
来自http://deeplearning.net/tutorial/gettingstarted.html#gettingstarted 一.下载 在后续的每个学习算法上,都需要下载对应的文档,如果 ...
- ASP.NT运行原理和页面生命周期详解及其应用
ASP.NT运行原理和页面生命周期详解及其应用 1. 下面是我画的一张关于asp.net运行原理和页面生命周期的一张详解图.如果你对具体不太了解,请参照博客园其他帖子.在这里我主要讲解它的实际应用. ...
- idea配置。
1.project Structure — 修改project(1.name,sdk,level(6-@Override in interface)) 修改modules(点击web,加上source ...
- Bootstrap系列 -- 3. 段落
一. 段落基本用法 1. 段落使用<p>标签 2. 段落全局使用font-size=14px字体 ..... 更多请使用Firefox 查看 <p> 华盛顿大学和清华大学共同在 ...
- C#实现清理系统内存
金山内存整理工具.360内存清理工具非常好用,可以将系统内存最小化,提升系统运行速度.其实这些事情C#也可以做到,原理就是对系统进程中的进程内存进行逐个优化. 网上大多推荐使用系统的SetProces ...
- 日志记录类库log4net的使用总结
log4net是一个开源的日志记录类库,经过配置后可以自动抓取程序中的错误.异常信息,并写入磁盘,也可以在异常发生时执行其他指定的操作,比如:通知某人右键.写入数据库等.这里写个ASP.NET MVC ...
- SQL中的内连接与外连接
关于关系代数连接运算的介绍请查看下面链接 http://www.cnblogs.com/xidongyu/articles/5980407.html 连接运算格式 链接运算由两部分构成:连接类型和连接 ...
- SQL语言概述
功能概述 DDL,数据库定义语言,创建,修改,删除数据库,表,视图,索引,约束条件等 DML,数据库操纵语言,对数据库中的数据进行增,删,改,查 DCL,数据库定义语言,对数据库总数据的访问设置权限 ...