浮动居中等笔记

Posted 千喜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浮动居中等笔记相关的知识,希望对你有一定的参考价值。

样式:就近原则

Eg:行内>内部>外部

Border1px solid red;(一个不能拉下)

盒子3D模型:

Border

Content+padding

Background-image

Background-color

Margin

Backgroundurl() 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;(主要用于紧邻后面的元素的清除浮动)

父包含缩成一条时没有用

同时设置width100%(或固定宽度)+overflowhidden;

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"添加的内容";} IE67下不兼容

zoom 缩放

a、触发 IEhaslayout,使元素根据自身内容计算宽高。

bFF 不支持;

回顾:inline-block 特性:

 1、块在一排显示

2、内联支持宽高

3、默认内容撑开宽度

4、标签之间的换行间隙被解析(问题)

5ie6 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~100100完全不透明);

 

父层没有设置float,子层设置了浮动,高度无法扩展

Div最好不要设置高度,不能随内容扩展

 

以上是关于浮动居中等笔记的主要内容,如果未能解决你的问题,请参考以下文章

学习总结Markdown 使用-表格及其居中等格式

php实现excel单元格合并,字体加粗居中等操作

Flex Box 简单弹性布局

Python调用Word的相关问题

Oracle 学习笔记

动态规划 学习笔记