浮动、居中等笔记
样式:就近原则
Eg:行内>内部>外部
Border:1px solid red;(一个不能拉下)
盒子3D模型:
Border
Content+padding
Background-image
Background-color
Margin
Background:url() 0 0[设置位置] no-repeat;
盒子尺寸=外框+内边距+外边距+content
Class=“content book”[book为追加样式]
盒子不设置高度时,可随内容自适应
第一种居中方法:
块级元素:纵向排列
Margin:0 auto;[列居中,不能同时设置浮动和绝对定位]
Auto:根据浏览器宽度设置外边距
原理:[浏览器宽度-设置宽度]/2=外边距
为父层(class=wrap)设置宽度,子层设置100%(子层会继承父层的宽度及居中)
第二种方法:float(实现横向排列)=left/right/none
特点:仍在文档流中,元素左右移直至触碰到容器边缘为止
元素未设置宽度,而设置了浮动属性,元素的宽度随内容变化而变化
当元素设置浮动属性后,会对相邻元素产生影响(块级元素一行排列)
消除浮动方法:
段落:Clear:both/left/right/none/inherit;(主要用于紧邻后面的元素的清除浮动)
父包含缩成一条时没有用
同时设置width:100%(或固定宽度)+overflow:hidden;
1.加高
问题:扩展性不好
2.父级浮动
问题:页面中所有元素都加浮动,margin左右自动失效(floats bad !)
3.inline-block 清浮动方法:
问题:margin左右auto失效;
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 不支持;
回顾:inline-block 特性:
1、块在一排显示
2、内联支持宽高
3、默认内容撑开宽度
4、标签之间的换行间隙被解析(问题)
5、ie6 ie7不支持块属性标签的inline-block(问题)
绝对定位与相对定位:
position:relative; 相对定位
a、不影响元素本身的特性;
b、不使元素脱离文档流(元素移动之后原始位置会被保留);
c、如果没有定位偏移量,对元素本身没有任何影响;
d、提升层级
定位元素位置控制
top/right/bottom/left 定位元素偏移量。
top:200px;
position:absolute; 绝对定位
a、使元素完全脱离文档流;
b、使内嵌支持宽高;
c、块属性标签内容撑开宽度;
d、如果有定位父级相对于定位父级发生偏移,没有定位父级相对于document发生偏移;
e、相对定位一般都是配合绝对定位元素使用;(在父级元素指定为相对定位)
f、提升层级(会和后面div重合)
z-index:[number]; 定位层级
a、定位元素默认后者层级高于前者;number:1,2
b、建议在兄弟标签之间比较层级,数字高的显示层级高
z-index:[number]; 定位层级
position:fixed; 固定定位
与绝对定位的特性基本一致,的差别是始终相对整个文档进行定位;
问题:IE6不支持固定定位;
定位其他值:
position:static ; 默认值
position:inherit ; 从父元素继承定位属性的值 (不兼容)
(static是静态定位,relative是相对定位,absolute.fixed是绝对定位)
position:relative | absolute | fixed | static | inherit;
position:absolute; 绝对定位元素子级的浮动可以不用写清浮动方法;
position:fixed; 固定定位元素子级的浮动可以不用写清浮动方法;(IE6不兼容)
遮罩弹窗(优酷弹窗)
标准 不透明度: opacity:0~1; (透明度)父级加了透明度,子集也会变透明
IE6.7 下透明度滤镜: filter:alpha(opacity=0~100(100完全不透明);
父层没有设置float,子层设置了浮动,高度无法扩展
Div最好不要设置高度,不能随内容扩展