浮动居中等笔记

Posted 2020-08-01 千喜

样式：就近原则

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最好不要设置高度，不能随内容扩展