【前端系列教程之CSS3】04_CSS定位和浮动详解

CSS3从入门到精通视频直通车：

        CSS3从入门到精通，超多案例实践，轻松上手，通俗易懂！

一、CSS 定位(重点)

CSS 定位属性

        position 属性指定了元素的定位类型。

        position 属性的五个值：

static 静态定位,无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。

relative 相对定位,对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

fixed 固定定位,对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。

absolute 绝对定位,对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。

sticky 粘性定位

        元素具备了定位属性之后，可以使用的顶部top，底部bottom，左侧left和右侧right属性定位。(static除外)。他们也有不同的工作方式，这取决于定位方法。

属性	说明
position	指定元素的定位类型。
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。

什么是文档流？

        将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

        只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。

static 定位

        static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。

div.static {
    position: static;
    border: 3px solid #73AD21;
}

fixed 定位

        fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动;

p.pos_fixed
{
    position:fixed;
    top:30px;
    right:5px;
}

        注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。

        Fixed定位使元素的位置与文档流无关，因此不占据空间。

        Fixed定位的元素和其他元素重叠。

relative 定位

        relative定位，又称为相对定位，从字面上来解析，我们就可以看出该属性的主要特性：相对。但是它相对的又是相对于什么地方而言的呢？这个是个重点，也是最让我迷糊的一个地方，现在让我们来做个测试，我想大家都会明白的：

(1) 初始未定位

    
    
    
     


 
    
 first
 
    
second
 

        初始原图：

 (2) 我们修改first元素的position属性：

偏移20px后：

        -- 虚线是初始的位置空间

        现在看明白了吧，相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，可以说它是static到absoult的一个中间过渡属性，最重要的是它还占有文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据虚线位置( top / left / right / bottom 等属性生效之前)进行的定位，这点一定要理解。

        那好，我们知道了top / right / left / bottom 属性是不会对relative定位的元素所占据的文档空间产生偏移，那么margin / padding会让该文档空间产生偏移吗？答案是肯定的，我们一起来做个试验吧：

(3) 添加margin属性：

设置margin：20px后：

         对比一下，是不是就很清晰了，我们先将first元素外边距设为20px，那么second元素就得向下偏移40px，所以margin是占据文档空间！同理，大家可以自己动手测下padding的效果吧！

absolute 定位

        absoulte定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于"相对"一词，为什么这么讲呢？原来，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的， 举个例子，a元素使用absoulte定位，它会从父类开始找起，寻找以position非static方式定位的祖先类元素(注意，一定要是直系祖先才算哦~），直到标签为止，这里还需要注意的是，relative和static方式在最外层时是以标签为定位原点的，而absoulte方式在无父级是position非static定位时是以作为原点定位。和元素相差9px左右。

        我们来看下效果：

添加absoulte属性：

 
 

 
    
relative
 
    
absoult
 
 

 

效果图：

        哈哈，看了上面的代码后，细心的朋友肯定要问了，为什么absoulte定位要加 top:0; left:0; 属性，这不是多此一举呢？

        其实加上这两个属性是完全必要的，因为我们如果使用absoulte或fixed定位的话，必须指定 left、right、 top、 bottom 属性中的至少一个，否则left/right/top/bottom属性会使用它们的默认值 auto ，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递，简单讲就是都变成relative，会占用文档空间，这点非常重要，很多人使用absolute定位后发现没有脱离文档流就是这个原因，这里要特别注意~~~

        少了left/right/top/bottom属性不行，那如果我们多设了呢？例如，我们同时设置了top和bottom的属性值，那元素又该往哪偏移好呢？记住下面的规则：

        如果top和bottom一同存在的话，那么只有top生效。

        如果left和right一同存在的话，那么只有left生效。

        既然absoulte是根据祖先类中的position非static元素进行定位的，那么祖先类中的margin/padding会不会对position产生影响呢？看个例子先：

在absoulte定位中添加margin / padding属性：

    
    
    
    



    
first 
        
second
 
    
 

        看懂了，祖先类的margin会让子类的absoulte跟着偏移，而padding却不会让子类的absoulte发生偏移。总结一下，就是absoulte是根据祖先类的border进行的定位。

sticky 定位

        sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

        position: sticky; 基于用户的滚动位置来定位。

        粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

        它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

        元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

        这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

        注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

粘性定位实例:

    
尝试滚动页面。
    
注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。

    
我是粘性定位!

    

        
滚动我
        
来回滚动我
        
滚动我
        
来回滚动我
        
滚动我
        
来回滚动我
    

绝对定位和相对定位的区别：

        1、绝对定位不会占据原本的位置,相对定位会占据原来位置

        2、绝对定位相对于父元素定位,相对定位是相对于原本的位置定位

CSS元素堆叠顺序

        元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

        z-index属性指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面）

        一个元素可以有正数或负数的堆叠顺序：

属性	说明
z-index	设置元素的堆叠顺序

        拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

        注释：元素可拥有负的 z-index 属性值。

        z-index 仅能在定位元素上奏效(重点)

CSS溢出处理

        CSS overflow 属性用于控制内容溢出元素框时显示的方式。

属性	说明
overflow	设置当元素的内容溢出其区域时发生的事情。
overflow-y	指定如何处理顶部/底部边缘的内容溢出元素的内容区域
overflow-x	指定如何处理右边/左边边缘的内容溢出元素的内容区域

        如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。

        这三个样式属性有四个共同的值:

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

        设置不同 overflow 属性值：

div.ex1 {
    overflow: scroll;
}
 
div.ex2 {
    overflow: hidden;
}
 
div.ex3 {
    overflow: auto;
}
 
div.ex4 {
    overflow: visible;
}

CSS裁剪

        如果图像大于包含它的元素，会发生什么？-clip属性，让你指定一个绝对定位的元素，该尺寸应该是可见的，该元素被剪裁成这种形状并显示。

        注意：: 如果先有"overflow：visible"，clip属性不起作用。

属性值

值	描述
shape	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto	默认值。不应用任何剪裁。

裁剪一张图像：

二、CSS浮动(重点)

CSS元素浮动

        CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

        Float（浮动），往往是用于图像，但它在布局时一样非常有用。

元素怎样浮动：

        元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

        一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

        浮动元素之后的元素将围绕它（主要指的是图片）。

        浮动元素之前的元素将不会受到影响。

        如果图像是右浮动，下面的文本流将环绕在它左边：

img{
    float:right;
}

浮动层：给元素的float属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框。

而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。

彼此相邻的浮动元素：

        如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

        在这里，我们对图片廊使用 float 属性：

 
 




图片库
试着调整窗口,看看当图片没有足够的空间会发生什么。

float案例：

 
 





  
主页
  
新闻
  
联系我们
  
关于我们



  

    

      
The Flight
      
The City
      
The Island
      
The Food
      
The People
      
The History
      
The Oceans
    
  

  

    

      
The City
    
    
Chania
    
Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.
    
You will learn more about responsive web pages in a later chapter.
  



  
底部文本

CSS清除浮动

        clear属性指定元素的左侧或右侧不允许浮动的元素。

        “float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！”

        元素盒子的边不能和前面的浮动元素相邻，那么就是自己下移。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。

CSS清除浮动影响的方式

        清除浮动是每一个 web前端设计师必须掌握的技能。

        浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。

        下面总结5种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法只做了解就可以了）：

给父级元素单独定义高度（height）

    
Left
    
Right


    div2

        原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

        优点：简单、代码少、容易掌握

        缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

        建议：不推荐使用，只建议高度固定的布局时使用

在标签结尾处(前)加空div标签 clear:both

    
Left
    
Right
    



    div2

        原理：添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度

        优点：简单、代码少、浏览器支持好、不容易出现怪问题

        缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

        建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

父级div定义 伪元素:after 和 zoom

    
Left
    
Right


    div2

        原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE专有属性)可解决ie6,ie7浮动问题

        优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

        缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

        建议：推荐使用，建议定义公共类，以减少CSS代码。

父级div定义 overflow:hidden

    
Left
    
Right


    div2

        原理：使用overflow:hidden时，浏览器会自动检查浮动区域的高度

        优点：简单、代码少、浏览器支持好

        缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

        建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

父级div定义 overflow:auto

    
Left
    
Right


    div2

        原理：使用overflow:auto时，浏览器会自动检查浮动区域的高度

        优点：简单、代码少、浏览器支持好

        缺点：内部宽高超过父级div时，会出现滚动条。

        建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

三、CSS对齐方式

元素居中对齐

        要水平居中对齐一个元素(如

), 可以使用 margin: auto;或margin:0 auto。

        设置到元素的宽度将防止它溢出到容器的边缘。

        元素通过指定宽度，并将两边的空外边距平均分配：

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

文本居中对齐

        如果仅仅是为了文本在元素内居中对齐，可以使用 text-align: center;

.center {
    text-align: center;
    border: 3px solid green;
}

左右对齐 - 使用定位方式

        我们可以使用 position: absolute; 属性来对齐元素:

.right {
    position: absolute;
    right: 0px;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

        注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

左右对齐 - 使用 float 方式

        我们也可以使用 float 属性来对齐元素:

.right {
    float: right;
    width: 300px;
    border: 3px solid #73AD21;
    padding: 10px;
}

        当像这样对齐元素时，对 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

文本垂直居中对齐 - 使用 padding

        CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部底部使用 padding:

.center {
    padding: 70px 0;
    border: 3px solid green;
}

        如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

文本垂直居中 - 使用 line-height

        line-height和height保持一致即可；

.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}
/* 如果文本有多行，添加以下代码: */
.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}

垂直居中 - 使用 position 和 transform

        除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:

居中
以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：


  
我是水平和垂直居中的。


注意: IE8 及更早版本不支持 transform 属性。

四、CSS精灵截图技术

什么是css sprites

        css sprites直译过来就是CSS精灵。通常被解释为“CSS图像拼合”或“CSS贴图定位”。

        其实就是通过将多个图片融合到一张图里面，然后通过CSS background背景定位技术技巧布局网页背景。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。

        css sprites是什么通俗解释：

        CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片在布局盒子对象位置。

适用场合

1、适合：一般小图标素材:

        小的图标ico类素材，一般图标很小十多像素几十像素的宽度高度，这种适合拼合成一张图实现sprites background背景定位布局。多小ico太多自然加载网页时瞬间会消耗些http iis链接数，但很快加载完又会释放。

        ICO是Windows的图标文件格式，图标文件可以存储单个图案、多尺寸、多色板的图标文件。一个图标实际上是多张不同格式的图片的集合体，并且还包含了一定的透明区域。

2、不适合：大图大背景:

        大背景一般用于网页背景，拼合时，设置为网页背景时所有背景都会显示出来。大图拼接拼合会增大图片大小，网络带宽不好的访问者访问时由于背景图大文件大会加载稍慢些，所以大图不推荐拼接拼合来使用css sprites背景定位布局。

3、sprites适合推荐小结:

        一般此sprites拼合布局用于局部小盒子布局不适合大背景大布局背景使用。比如小局部布局小图标背景、小导航背景等DIVCSS布局。

css sprites优势与缺点劣势

1、sprites优势：

        若干小图标拼合成一张图后布局，减少http请求数，对于大战大流量网站来说隐形优势很显然的，从而隐形地提升了网站性能。对于大流量网站来说本来http请求数比较宝贵，使用DIV+CSS Sprites这样可以大大的提高了页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因，同时也减少图片文件数目。

2、sprites缺点

        在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好只够的空间，防止板块内不会出现不必要的背景，如果留空间或拼合位置不合适，在布局时容易出现布局这个盒子对象时，设置背景出现拼合相邻图片，干扰图片的情况;

        CSS Sprites在开发的时候比较麻烦，你要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐;

        CSS Sprites在维护的时候比较麻烦，sprites是一般双刃剑，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，有只能（最好）往下加图片，这样图片的字节就增加了，因为每次的图片改动都得往这个图片删除或添加内容，显得稍微繁琐，而且重新算图片的位置（尤其是这种上千px的图）也是一件颇为不爽的事情。

        由于图片的位置需要固定为某个绝对数值，这就失去了诸如center之类的灵活性。

3、推荐小结

        由于拼接图片需要一定经验技巧（做实践即可快速掌握）、测量定位数值、修改不是那么灵活等原因，一般小网站站、小流量网站、一般企业网站不是很推荐使用CSS Sprites，因为使用CSS Sprites会比普通单个背景图片布局要耗费时间和精力，所以不是很推荐小站。

        但这个布局技巧也必须要学会掌握灵活布局才是目的。小站HTTP请求数丰富这点拼接其实也起不来什么优势反而会浪费宝贵时间。相反大网站大流量网站推荐使用，这样比较值得。

实例教程

素材与要实现效果截图(拼合ico图标素材实现列表不同图标效果截图)

sprites实例教程解释介绍

        首先这些图标素材是放在同一张图片上（PS拼合），然后实现成列表类布局，列表每个前图标不同。使用div css sprites实现此布局（其实使用background样式实现）。

        首先此列表布局我们使用ul li列表布局，每个li站一行排版，对ul设置padding实现四周内容与边框一定间距效果，因为每个li前面图标不同，但此背景图片是拼合在一张图片上，所以这里做li里开始使用span标签实现这个不同图标效果，每个图标不同为了区别span所以对span设置不同class，不同class对应设置定位相应的图标。

实例教程

sprites案例图片素材:

 实例代码：

    
    



    
付款图标
    
删除图标
    
存款图标
    
粘贴图标
    
笑脸图标
    
编辑图标

sprites实例效果：

        说明：背景background-position有两个数值，前一个代表靠左距离值（可为正可为负），第二个数值代表靠上距离值（可为正可为负）。当为正数时，代表背景图片作为对象盒子背景图片时靠左和靠上多少距离多少开始显示背景图片；当为负数时代表背景图片作为盒子对象背景图片，将背景图片拖动超出盒子对象左边多远，拖动超出盒子对象上边多远开始显示此背景图片。