html+css学习笔记 3[浮动]
inline-block/float(浮动)
回顾:inline-block 特性:
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、标签之间的换行间隙被解析(问题)
5、ie6 ie7不支持块属性标签的inline-block(问题)float浮动:
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、脱离文档流
5、提升层级半层文本流
float:left | right | none | inherit;
文档流是文档中可显示对象在排列时所占用的位置。
浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。
clear:left | right | both | none | inherit;元素的某个方向上不能有浮动元素
clear:both; 在左右两侧均不允许浮动元素。
清除浮动1.加高
问题:扩展性不好2.父级浮动
问题:页面中所有元素都加浮动,margin左右自动失效(floats bad !)3.inline-block 清浮动方法:
问题:margin左右自动失效;4.空标签清浮动
问题:IE6 最小高度 19px;(解决后IE6下还有2px偏差)5.br清浮动
问题:不符合工作中:结构、样式、行为,三者分离的要求。6.after伪类 清浮动方法(现在主流方法)
.clear:after{content:'';display:block;clear:both;}
.clear{zoom:1;}after伪类: 元素内部末尾添加内容;
:after{content"添加的内容";} IE6,7下不兼容
zoom 缩放
a、触发 IE下 haslayout,使元素根据自身内容计算宽高。
b、FF 不支持;7.overflow:hidden 清浮动方法;
问题:需要配合 宽度 或者 zoom 兼容IE6 IE7;overflow: scroll | auto | hidden;
overflow:hidden;溢出隐藏(裁刀!)浮动的兼容性问题
IE6双边距BUG(IE6下块属性标签浮动,并且有横向margin,横向margin加倍。):
a、IE6
b、浮动
c、横向margin
d、块属性标签(加display:inline;)IE6下 li部分兼容性问题:
a、左右两列布局,右边右浮动IE6 IE7下折行;(左边元素浮动)
b、IE6 IE7 li 下元素都浮动 在IE6 IE7下 li 下方会产生4px间隙问题;(加vertical-align:top;)vertival-align / img问题
vertical-align 垂直对齐方式
a、加垂直对齐方式的同排元素都要加垂直对齐方式;
b、垂直对齐方式可以解决元素下方间隙问题;图片下方间隙问题
a、display:block; (改变标签本身特性)
b、overflow:hidden; (必须知道图片高度)
d、vertical-align (暂时最完美的方案)闭合浮动
2)浮动:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(“高度塌陷”现象)。顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。
正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。
也就是内容错进去
这就是要解决浮动产生的问题
.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
.clearfix { *zoom:1; }.
/* For modern browsers */
.cf:before,.cf:after {
content:"";
display:table;
}
.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1; }
Tips:
(情况排除相绝定位情况)
第父元素浮元素浮元素内容填充父元素
第二父元素浮元素浮元素内容填充父元素
第三父元素浮元素浮元素内容填充父元素
第父元素浮元素浮元素内容填充父元素
追问
在IE6下为什么父元素不浮动,子元素浮动,子元素内容可以填充父元素,加了CLEAR:BOTH;之后
回答
加了CLEAR:BOTH;肯定可以填充的
clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
语法:
clear : none | left | right | both
取值:
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
http://www.w3school.com.cn/css/css_positioning_floating.asp
最基本的,定位浮动都是针对本身,没有继承属性的
然后所有位置都是根据父级来的,定位的两个特殊
边距
什么属性可以继承什么属性不能继承
*浮动的时候负值可以改变位置覆盖元素*浮动的时候负值可以改变位置覆盖元素/
------------------------------------------------------------------------------------------------------------
background复合属性
repeat-x
repeat-y
no-repeat 10% 30px;
no-repeat 10% center;
fixed;固定 页面始终固定 不会随着页面拖动而变化
boder:
solid实线
dashed 虚线
dotted点线
boder制作三角形 把宽高去掉就能做出来
padding行不行 内边距会影响盒子大小
可以套两个盒子 然后给 里面盒子margin值就不能撑大盒子了
外边距 上下最大值 左右相加
父级 子级别包含 的时候 margin-top父级 会传递给父级 bug
margin-right:auto
margin-left:auto
隐藏文字-222em
a表情打开方式 target
下载保存
<base target ="_blank">
链接 下载 锚点 连接里面写id名称 起到锚点作用
清除 h标签默认样式
img
属于 inline-block标签
一行内的块
既支持宽高 也支持 一行
特点:
换行间隙被解析
空格是字体的一半
ie6不兼容块属性的 inline-block 支持内联元素的
鼠标
光标类型
cursor
body{height:1500px; cursor:url(hand.cur),pointer;}
面试
额外提示信息
title
js 节点问题 父子级关系
html+css学习笔记 3[浮动]的更多相关文章
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- CSS学习笔记:浮动属性
目录 一.浮动流是什么 二.通过代码实例了解浮动特点 1. 搭建测试框架 2. 添加浮动 3. 浮动元素的排布 4. 给行内元素添加浮动效果 5. 子元素浮动后对父元素的影响 5.1 在父元素中添加o ...
- CSS学习笔记10 相对定位,绝对定位与固定定位
文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记09 简单理解BFC
引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- div+css学习笔记一(转)
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
- 2022-07-10 第五小组 pan小堂 css学习笔记
css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
随机推荐
- 浅谈我眼中的ASP.NET MVC
坦白地说,学习MVC是前一段时间的事情了.但是,我当时虽然也实践过,却也不能很好的说出个所以然来.因此,也 一直没敢写点什么文字总结.最近,开始学习EF,也同时在使用MVC来结合EF实践增删改查.慢慢 ...
- HDU 5437 Alisha’s Party (优先队列)——2015 ACM/ICPC Asia Regional Changchun Online
Problem Description Princess Alisha invites her friends to come to her birthday party. Each of her f ...
- iOS高仿城觅应用客户端项目(开发思路和代码)
这是一款非常完整的一个ios项目,基本实现了我们常用的一些功能了,而且界面设计个人感觉还是挺不错的,是一个不错的学习ios项目,喜欢的朋友可以参考一下吧. 项目展示,由于没有数据,所以所有的cell显 ...
- 多个相同script引用探索
1.页面直接就有,或者document.write页面加载同步输出 其实就是当script是页面初始加载的一部分的情况,script是同步的,只有在上一个加载并执行完才会进行下一个script加载. ...
- bzoj 1042 HAOI2008 硬币购物
这道题思路是在是神. 先dp出没有限制时候的方案数. dp的时候注意 先循环 1..4 再循环 1..maxs 防止重复.边界是f[0] = 1. 这么基础的背包都忘记了=_= 接下来处理有重复的问题 ...
- jquery获取html元素的绝对位置和相对位置
jquery获取html元素的绝对位置坐标和相对父元素的位置坐标方法:绝对位置坐标:$("#elem").offset().top$("#elem").offs ...
- float,double和decimal的精度问题
先标注一个音标,因为我老是读错:decimal ['desɪml] 精度对比: 类型 CTS 类型 描述 有效数字 范围 float System.Single 32-bit single-preci ...
- 【转】使用Memcached提高.NET应用程序的性能
在应用程序运行的过程中总会有一些经常需要访问并且变化不频繁的数据,如果每次获取这些数据都需要从数据库或者外部文件系统中去读取,性能肯定会受到影响,所以通常的做法就是将这部分数据缓存起来,只要数据没有发 ...
- mobileconfig文件的签名和认证(signed、verified)
专题:基于IOS上MDM技术相关资料整理及汇总mobileconfig文件的签名和认证(signed.verified) 一.功能描述: 鉴于我们的设备和MDM server之间已经可以通信,并能完成 ...
- javascript Date 函数的坑
Javascrip中对日期的解析.格式化简直是混乱不堪,各种的坑,攻城狮们多小心. 1. 不要用 Date("yyyy-mm-dd") 构造函数解析字符串. IE.firefo ...