简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首页
文章
问答
课程
专题
下载
手游
词典
最近更新

首页  >  文章  >  web前端  >  W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose

W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose

WBOY
WBOY原创
2016-06-24 11:29:041187浏览

CSS 定位 (Positioning) 实例

CSS 实例

  • CSS 背景实例
  • CSS 文本实例
  • CSS 字体(font)实例
  • CSS 边框(border)实例
  • CSS 外边距 (margin) 实例
  • CSS 内边距 (padding) 实例
  • CSS 列表实例
  • CSS 表格实例
  • 轮廓（Outline)实例
  • CSS 尺寸 (Dimension) 实例
  • CSS 分类 (Classification) 实例
  • CSS 定位 (Positioning) 实例
  • CSS 伪类 (Pseudo-classes)实例
  • CSS 伪元素 (Pseudo-elements)实例

    • 01设置元素的形状

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>01设置元素的形状</title>        <style type="text/css">            img {                position:absolute;                clip: rect(0px 100px 300px 0px);            }        </style>    </head>    <body>        <img  src="cc.jpg"    style="max-width:90%" height="730px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >    </body></html>

    02如何使用滚动条来显示元素内溢出的内容

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>02如何使用滚动条来显示元素内溢出的内容</title>        <style type="text/css">            div {                width: 250px;                height: 80px;                background-color: #cc9966;                overflow: scroll;            }        </style>    </head>    <body>        <p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>        <div>            这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。        </div>    </body></html>

    03如何隐藏溢出元素中溢出的内容

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>03如何隐藏溢出元素中溢出的内容</title>        <style type="text/css">            div {                width: 250px;                height: 80px;                background-color: #cc9966;                overflow: hidden;            }        </style>    </head>    <body>        <p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>        <div>            这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。        </div>    </body></html>

    04如何设置浏览器来自动地处理溢出

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>04如何设置浏览器来自动地处理溢出</title>        <style type="text/css">            div {                width: 250px;                height: 80px;                background-color: #cc9966;                overflow: auto;            }        </style>    </head>    <body>        <p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>        <div>            这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。        </div>    </body></html>

    05垂直排列图象

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>05垂直排列图象</title>        <style type="text/css">            img.top {                vertical-align: text-top;            }                        img.bottom {                vertical-align: text-bottom;            }        </style>    </head>    <body>        <p>            这是一副<img  class="top" border="1" src="55.jpg" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >位于段落中的图像。        </p>        <p>            这是一副<img  class="bottom" border="1" src="55.jpg" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >位于段落中的图像。        </p>    </body></html>

    06Z-index

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>06Z-index</title>        <style type="text/css">            img.x {                position: absolute;                top: 30px;                left: 0px;                z-index: -1;            }                        img.y {                position: absolute;                top: 150px;                left: 50px;                z-index: 1;            }        </style>    </head>    <body>        <h1>这是一标题</h1>        <img  class="x" src="55.jpg" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>        <h1>这是二标题</h1>        <img  class="y" src="55.jpg" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>    </body>    </body></html>

    07使用固定值设置图像的上右下左边缘

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>07使用固定值设置图像的上右下左边缘</title>        <style type="text/css">            img.top {                position: absolute;                top: 0px;            }                        img.right {                position: absolute;                right: 0px;            }                        img.bottom {                position: absolute;                bottom: 0px;            }                        img.left {                position: absolute;                left: 100px;            }        </style>    </head>    <body>        <p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>               <img  class="top" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <img  class="right" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <img  class="bottom" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <img  class="left" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >    </body></html>

    08使用百分比设置图像的上右下左边缘

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <title>08使用百分比设置图像的上右下左边缘</title>        <style type="text/css">            img.top {                position: absolute;                top: 5%;            }                        img.right {                position: absolute;                right: 5%;            }                        img.bottom {                position: absolute;                bottom: 5%;            }                        img.left {                position: absolute;                left: 20%;            }        </style>    </head>    <body>        <h1>这是标题</h1>        <img  class="top" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <img  class="right" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <img  class="bottom" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >        <img  class="left" border="1" src="77.jpg"    style="max-width:90%" height="100px" / alt="W3School-CSS 定位 (Positioning) 实例_html/css_WEB-ITnose" >    </body></html>

    CSS 定位 (Positioning)总结

    声明：
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    上一篇：CSS3 网格布局(grid-layout)基础知识下一篇：预加载系列二：让File Prefetching丝丝润滑无痛无痒_html/css_WEB-ITnose

    相关文章

    查看更多