zoukankan      html  css  js  c++  java
  • CSS(10) Position(定位)

    一、position 属性

    指定了元素的定位类型。

    position 属性的五个值:

    元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除非是先设定position属性。他们也有不同的工作方式,这取决于定位方法。

    1、static 定位

    HTML 元素的默认值,即没有定位,遵循正常的文档流对象。

    静态定位的元素不会受到 top, bottom, left, right影响。

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

    尝试一下 »

    2、fixed 定位

    元素的位置相对于浏览器窗口是固定位置。

    即使窗口是滚动的它也不会移动:

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

    尝试一下 »

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

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

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

    css固定元素位置(position:fixed)

    body{
        background-image:url(about:blank); /* for IE6 */
        background-attachment:fixed; /*必须*/
    }
    
    #ads{
        width:300px;
        height:250px;
        position:fixed;
        right:0;
        bottom:0;
        border:1px solid red;
        _position:absolute; /* for IE6 */
        _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
        
    }

    3、relative 定位

    相对定位元素的定位是相对其正常位置。

    h2.pos_left
    {
        position:relative;
        left:-20px;
    }
    h2.pos_right
    {
        position:relative;
        left:20px;
    }

    尝试一下 »

    移动相对定位元素,但它原本所占的空间不会改变。

    h2.pos_top
    {
        position:relative;
        top:-50px;
    }

    尝试一下 »

    相对定位元素经常被用来作为绝对定位元素的容器块。

    4、absolute 定位

    绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>:

    h2
    {
        position:absolute;
        left:100px;
        top:150px;
    }

    尝试一下 »

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

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

    5、sticky 定位

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

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

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

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

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

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

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

    div.sticky {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        background-color: green;
        border: 2px solid #4CAF50;
    }

    尝试一下 »

    6、重叠的元素:z-index属性

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

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

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

    img
    {
        position:absolute;
        left:0px;
        top:0px;
        z-index:-1;
    }

    尝试一下 »

    具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。

    注意: 如果两个定位元素重叠,没有指定z - index,最后定位在HTML代码中的元素将被显示在最前面。

    二、CSS 布局 - overflow、overflow-x、overflow-y

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

    CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

    overflow属性有以下值:

    • visible:默认值。内容不会被修剪,会呈现在元素框之外。
    • hidden:内容会被修剪,并且其余内容是不可见的。
    • scroll:内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
    • auto:如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
    • inherit:规定应该从父元素继承 overflow 属性的值。

    注意:overflow 属性只工作于指定高度的块元素上。

    注意: 在 OS X Lion ( Mac 系统) 系统上,滚动条默认是隐藏的,使用的时候才会显示 (设置 "overflow:scroll" 也是一样的)。

    overflow: visible

    默认情况下,overflow 的值为 visible, 意思是内容溢出元素框:

    div {
        width: 200px;
        height: 50px;
        background-color: #eee;
        overflow: visible;
    }

    尝试一下 »

    三、CSS Display(显示) 与 Visibility(可见性)

    display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。

    1、隐藏元素 - display:none或visibility:hidden

    隐藏一个元素可以通过把display属性设置为"none",或把visibility属性设置为"hidden"。但是请注意,这两种方法会产生不同的结果。

    visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。

    h1.hidden {visibility:hidden;}

    尝试一下 »

    display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

    h1.hidden {display:none;}

    尝试一下 »

    2、CSS 块和内联元素

    1、块级元素

    块元素是一个元素,占用了全部宽度,在前后都是换行符。总是独占一行。

    宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

    块级元素主要有:

    address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li

    2、内联元素

    内联元素只需要必要的宽度,不强制换行。和相邻的内联元素在同一行;

    宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;

    内联元素主要有:

    a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

    3、可变元素

    (根据上下文关系确定该元素是块元素还是内联元素):

    applet ,button ,del ,iframe , ins ,map ,object , script

    3、CSS中块级、内联元素的应用:

    利用CSS我们可以摆脱上面表格里HTML标签归类的限制,自由地在不同标签/元素上应用我们需要的属性。

    主要用的CSS样式有以下三个:

    • display:block  -- 显示为块级元素
    • display:inline  -- 显示为内联元素
    • display:inline-block -- 显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性

    我们常将<ul>元素加上display:inline-block样式,原本垂直的列表就可以水平显示了。

    4、如何改变一个元素显示

    可以更改内联元素和块元素,反之亦然,可以使页面看起来是以一种特定的方式组合,并仍然遵循web标准。

    下面的示例把列表项显示为内联元素:

    li {display:inline;}

    尝试一下 »

    下面的示例把span元素作为块元素:

    span {display:block;}

    尝试一下 »

    注意:变更元素的显示类型看该元素是如何显示,它是什么样的元素。例如:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

    四、clip

    剪辑一个绝对定位的元素。值:shape、auto、inherit

    裁剪一张图像:

    img
    {
     position:absolute;
     clip:rect(0px,60px,200px,0px);
    }

    尝试一下 »

    044_结果

  • 相关阅读:
    并行计算第一次作业(openmp)
    数据结构入门第二课(浙大mooc笔记)
    数据结构入门第一课(浙大mooc笔记)
    手把手教你用java实现syslog消息的收发,学不会你打我喽!
    单例模式你真的会了吗(上篇)?
    redis分布式锁,面试官请随便问,我都会
    快手面试归来篇一,希望你看后能过
    程序员不会理财,那跟咸鱼有什么区别?
    人生的康波周期,把握住一次,足以改变命运!
    各大公司面试题分类整理
  • 原文地址:https://www.cnblogs.com/springsnow/p/12264865.html
Copyright © 2011-2022 走看看