定位、浮动与清除

1、盒模型:边框、内边距、外边距(border,padding,margin)

     盒子边框:宽、样式、颜色

     内边距:盒子内容与边距的距离,加在声明的盒子宽度上面

     外边距:盒子与盒子之间的距离

2、盒子大小

1)无边框、内外边距,文本与body元素同宽,添加边框,内外边距,内容减少

2)有宽度的盒子:添加边框,内外边距,盒子就会扩展,设定的width代表的是内容区的宽度

3、浮动与清除(将元素从常规文档流里拿出来)

1)实现文本环绕图片——创建多栏式布局,如果浮动的元素不是图片,必须给其设置宽度

2)创建分栏式的布局

p{...}                                                                                                             p{float:left;...}

img{float:left;...}                                                                                           img{float:left;...}

(右边框撑到父元素)                

浮动元素位于“文档流外部”,不被标记的父元素中。

固定浮动的三种方法:

①父元素添加 overflow:hidden(防止包含元素被内容撑大,迫使父元素包含其浮动的子元素)

②同时浮动父元素

③添加非浮动清除元素;或者给父元素添加一个非浮动的子元素,再清除掉

                     (此用法ie6以及更低版本的无法使用,需另外的方法)

注:不能在下拉菜单顶级元素应用overflow:hidden,不能对已经靠自动外边距居中的元素使用“浮动父元素”的方法,没有效果。

4、定位

position:static、relative、absolute、fixed

定位上下文:设置定位后可以使用top、right、left、bottom元素,相对于(另一个元素)移动的位置,绝对定位元素的任何祖先元素都可以是定位上下文。

相对定位:相对于以前在文档流中的位置定位

绝对定位:将元素彻底从文档流中取出来,定位它的上下文,当页面滚动的时候,相应移动

固定定位:定位的上下文为视口,创建不随页面滚动而移动的导航元素等

5、显示属性display

display:inline、block、inline-block

block元素总是在新行上开始,高度,行高以及顶和底边距都可控制

inline就是将元素显示为行内元素,和其他元素都在一行上;高,行高及顶和底边距不可改变;宽度就是它的文字或图片的宽度,不可改变

inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递

6、背景

7、z-index

z-index属性适用于定位元素(position属性值为 relative 或 absolute 或 fixed的对象),用来确定定位元素在垂直于显示屏方向(称为Z轴)上的层叠顺序,也就是说如果元素是没有定位的,对其设置的z-index会是无效的。

z-index具体介绍

原文地址:https://www.cnblogs.com/Z-xl/p/5967315.html