ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

css - 08定位布局

2022-04-21 12:04:15  阅读：125  来源： 互联网

标签：定位 -- 08 height width position div css 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位布局</title>
    <style>

        /*正常的html文档流是从上往下、从左往右排列。*/
        /*页面排版时想要元素之间相互影响，使用标准的浮动、文档流即可。*/
        /*定位的元素位置固定，位置不受其它元素影响，定位主要应用于页面中轮播图、叠加元素、菜单，移动端的浮动组件等处。*/

        /*相对定位*/
        /*相对定位是相对于元素原来的位置控制，当元素发生位置偏移时，原位置留白。*/
        /*使用position来定位操作元素，relative进行相对定位，保留该元素原来的空间占位，使用top、bottom、left、right等属性控制相对原来空间位的偏移。*/

        /*绝对定位*/
        /*绝对定位不受文档流影响，就像漂浮在页面中的精灵，绝对定位元素拥有行内块特性。*/
        /*如果父级元素设置了 relative | fixed | sticky ，绝对定位子元素将参照此父元素进行定位。*/
        /*使用position来定位操作元素，absolute进行绝对定位，不保留该元素原来的空间占位，使用top、bottom、right等属性控制偏移时，如果父级元素没有定
        位，则参照文档页面进行偏移；如果父级元素有定位（不论何种定位），则参照父级元素进行定位。*/

        /*补充*/
        /*如果没有为定位元素设置偏移，将受父元素的padding等属性影响。但使用定位一般都会设置偏移位置。*/

        /*1.使用相对定位操作元素*/
        /*div {*/
        /*    width: 500px;*/
        /*    height: 500px;*/
        /*    border: 5px solid blueviolet;*/
        /*    padding: 30px;*/
        /*}*/

        /*div img {*/
        /*    width: 50px;*/
        /*    height: 50px;*/
        /*    position: relative;*/
        /*    !*left: 550px;*!*/
        /*    !*top: -30px;*!*/
        /*    right: 20px;*/
        /*    bottom: -100px;*/
        /*}*/

        /*2.使用绝对定位操作元素*/
        /*div {*/
        /*    width: 500px;*/
        /*    height: 500px;*/
        /*    border: 5px solid blueviolet;*/
        /*    padding: 30px;*/
        /*}*/

        /*div img {*/
        /*    width: 50px;*/
        /*    height: 50px;*/
        /*    position: absolute;*/
        /*    !*left: 600px;*!*/
        /*    !*top: 200px;*!*/
        /*    right: 600px;*/
        /*    bottom: 100px;*/
        /*}*/

        /*3.通过定位设置尺寸*/
        /*绝对定位的div在参照父元素(已经设置了定位)进行定位时，如果没有定义宽高，则可以通过left/top或right/bottom来设置尺寸，也可以通过border-radius等设置形状*/
        /*article {*/
        /*    width: 400px;*/
        /*    height: 400px;*/
        /*    border: solid 10px blueviolet;*/
        /*    margin: 100px;*/
        /*    position: relative;*/
        /*    overflow: hidden;*/
        /*}*/

        /*article div {*/
        /*    background-color: greenyellow;*/
        /*    !*width: 200px;*!*/
        /*    !*height: 200px;*!*/
        /*    position: absolute;*/
        /*    left: 300px;*/
        /*    top: 100px;*/
        /*    right: -100px;*/
        /*    bottom: 100px;*/
        /*    border-radius: 50%;*/
        /*}*/

        /*4.控制元素居中定位的几种方式*/
        /*article {*/
        /*    border: solid 8px blueviolet;*/
        /*    width: 400px;*/
        /*    height: 400px;*/
        /*    margin: 100px;*/
        /*    position: relative;*/
        /*}*/

        /*article div {*/
        /*    background-color: greenyellow;*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    !*方式一: 父宽减自宽除以2为left偏移量，top偏移同*!*/
        /*    !*left: 100px;*!*/
        /*    !*top: 100px;*!*/
        /*    !*方式二: 用left和top均偏移50%把左顶点偏移至中心点，然后通过设置margin把div顶到中心*!*/
        /*    left: 50%;*/
        /*    top: 50%;*/
        /*    margin-left: -100px;*/
        /*    margin-top: -100px;*/
        /*    position: absolute;*/
        /*}*/

        /*5.多级定位的注意事项*/
        /*绝对定位子元素的定位参照只依据离他最近的已经定位的父级元素。*/
        /*article {*/
        /*    border: solid 8px blueviolet;*/
        /*    width: 400px;*/
        /*    height: 400px;*/
        /*    margin: 100px;*/
        /*    position: relative;*/
        /*}*/

        /*article section {*/
        /*    width: 100%;*/
        /*    height: 100%;*/
        /*    background-color: #ddd;*/
        /*    position: relative;*/
        /*    left: 100px;*/
        /*    top: 100px;*/
        /*}*/

        /*article section div {*/
        /*    background-color: greenyellow;*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    left: 50%;*/
        /*    top: 50%;*/
        /*    margin-left: -100px;*/
        /*    margin-top: -100px;*/
        /*    position: absolute;*/
        /*}*/

        /*6.滚动对定位元素的影响*/
        /*绝对定位子元素的其相对定位的父元素设置了overflow: scroll时，子元素会随着页面滚动而移动*/
        /*article {*/
        /*    border: 8px solid blueviolet;*/
        /*    width: 400px;*/
        /*    height: 400px;*/
        /*    margin: 100px;*/
        /*    position: relative;*/
        /*    overflow: scroll;*/
        /*}*/

        /*section {*/
        /*    height: 3000px;*/
        /*    background-color: #ddd;*/
        /*}*/

        /*article section div {*/
        /*    background-color: red;*/
        /*    width: 200px;*/
        /*    height: 200px;*/
        /*    bottom: 0;*/
        /*    left: 0;*/
        /*    position: absolute;*/
        /*}*/

        /*7.图标定位案例操作*/
        /*body {*/
        /*    padding: 100px;*/
        /*}*/

        /*ul {*/
        /*    list-style-type: none;*/
        /*}*/

        /*ul li {*/
        /*    width: 300px;*/
        /*    border: solid 8px blueviolet;*/
        /*    overflow: hidden;*/
        /*    position: relative;*/
        /*}*/

        /*ul li img {*/
        /*    width: 100%;*/
        /*    float: left;*/
        /*}*/

        /*ul li > span {*/
        /*    position: absolute;*/
        /*    width: 30px;*/
        /*    height: 30px;*/
        /*    background-color: blueviolet;*/
        /*    border-radius: 50%;*/
        /*    text-align: center;*/
        /*    font-size: 14px;*/
        /*    color: white;*/
        /*    line-height: 2em;*/
        /*    left: 10px;*/
        /*    top: 10px;*/
        /*    box-shadow: 0 0 10px #333;*/
        /*}*/

        /*8.定位叠加很重要*/
        /*使用z-index:正负数控制定位元素叠加层级，数越大越前景。对绝对定位和相对定位都有效*/
        /*配合hover使用可实现图层变换效果*/
        /** {*/
        /*    padding: 0;*/
        /*    margin: 0;*/
        /*}*/

        /*body {*/
        /*    padding: 100px;*/
        /*}*/

        /*ul {*/
        /*    list-style-type: none;*/
        /*}*/

        /*ul li {*/
        /*    width: 300px;*/
        /*    border: solid 8px blueviolet;*/
        /*    position: relative;*/
        /*    cursor: pointer;*/
        /*    overflow: hidden;*/
        /*}*/

        /*ul li:hover img {*/
        /*    z-index: -2;*/
        /*}*/

        /*ul li img {*/
        /*    width: 100%;*/
        /*    position: relative;*/
        /*    float: left;*/
        /*    z-index: 2;*/
        /*}*/

        /*ul li > span {*/
        /*    position: absolute;*/
        /*    width: 30px;*/
        /*    height: 30px;*/
        /*    background-color: blueviolet;*/
        /*    border-radius: 50%;*/
        /*    text-align: center;*/
        /*    font-size: 14px;*/
        /*    color: white;*/
        /*    line-height: 2em;*/
        /*    left: 10px;*/
        /*    top: 10px;*/
        /*    box-shadow: 0 0 10px #333;*/
        /*    z-index: 3;*/
        /*}*/

        /*ul li div {*/
        /*    width: 100%;*/
        /*    background-color: #ddd;*/
        /*    position: absolute;*/
        /*    z-index: 1;*/
        /*}*/

        /*ul li div h2 {*/
        /*    text-align: center;*/
        /*    line-height: 7em;*/
        /*    color: white;*/
        /*}*/

        /*9.京东商城购物车部件*/
        /** {*/
        /*    padding: 0;*/
        /*    margin: 0;*/
        /*}*/

        /*body {*/
        /*    padding-left: 200px;*/
        /*    padding-top: 200px;*/
        /*}*/

        /*article {*/
        /*    width: 150px;*/
        /*    position: relative;*/
        /*    font-size: 14px;*/
        /*    color: #555;*/
        /*    cursor: pointer;*/
        /*}*/

        /*article div {*/
        /*    height: 50px;*/
        /*    border: 1px solid #ddd;*/
        /*    text-align: center;*/
        /*    line-height: 3.5em;*/
        /*}*/

        /*article:hover div:nth-of-type(1) {*/
        /*    border-bottom: none;*/
        /*    border-color: blueviolet;*/
        /*}*/

        /*article:hover div:nth-of-type(2) {*/
        /*    display: block;*/
        /*    border-color: blueviolet;*/
        /*}*/

        /*article div:nth-of-type(1) {*/
        /*    background-color: #fff;*/
        /*    position: relative;*/
        /*    z-index: 2;*/
        /*}*/

        /*article div:nth-of-type(2) {*/
        /*    width: 300px;*/
        /*    position: absolute;*/
        /*    right: 0;*/
        /*    top: 50px;*/
        /*    display: none;*/
        /*}*/

        /*10.固定定位*/
        /*position: fixed相对于页面进行定位，应用于页面固定位置显示的元素，比如菜单栏，广告位等*/
        /*后出现的元素有相对定位时权重会更高，导致固定定位效果丢失，可通过设置较大数值的z-index解决*/
        /** {*/
        /*    padding: 0;*/
        /*    margin: 0;*/
        /*}*/

        /*div {*/
        /*    position: fixed;*/
        /*    left: 0;*/
        /*    top: 0;*/
        /*    right: 0;*/
        /*    height: 60px;*/
        /*    border-bottom: solid 5px blueviolet;*/
        /*    box-shadow: 0 5px 10px #555;*/
        /*    background-color: white;*/
        /*    !*增加层级*!*/
        /*    z-index: 9999;*/
        /*}*/

        /*article {*/
        /*    !*后出现的定位权重高，把前面的定位盖住*!*/
        /*    position: relative;*/
        /*    height: 3000px;*/
        /*    background-color: greenyellow;*/
        /*    margin-top: 80px;*/
        /*}*/

        /*11.粘性定位*/
        /*position: sticky粘性定位，在最近的祖元素有溢出滚动设置时有效，配合top等设置使用*/
        /*设置粘性的定位的元素如果在同级，则呈现叠加效果；如果在不同级，则前一个会被后一个顶走*/
       /* body {*/
       /*     padding: 50px;*/
       /*     margin: 50px;*/
       /* }*/

       /* div {*/
       /*     width: 400px;*/
       /*     height: 200px;*/
       /*     border: 6px solid cornflowerblue;*/
       /*     overflow: scroll;*/
       /* }*/

       /* div h2:nth-of-type(even) {*/
       /*     background-color: #333;*/
       /* }*/

       /*div h2 {*/
       /*    background-color: blueviolet;*/
       /*    color: white;*/
       /*    position: sticky;*/
       /*    top: 0;*/
       /* }*/

       /*div p {*/
       /*    padding-bottom: 50px;*/
       /*}*/

    </style>
</head>
<body>
<!--1.使用相对定位操作元素-->
<!--<div>-->
<!--    <img src="flower.jpg" alt="flower.jpg" />-->
<!--    Go（又称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 开-->
<!--    发的一种静态强类型、编译型语言。Go 语言语法与 C 相近，但功能上有：内存安全，GC（垃圾回-->
<!--    收），结构形态及 CSP-style 并发计算。罗伯特·格瑞史莫（Robert Griesemer），罗勃·派-->
<!--    克（Rob Pike）及肯·汤普逊（Ken Thompson）于2007年9月开始设计Go，稍后Ian Lance T-->
<!--    aylor、Russ Cox加入项目。Go是基于Inferno操作系统所开发的。Go于2009年11月正式宣布推-->
<!--    出，成为开放源代码项目，并在Linux及Mac OS X平台上进行了实现，后来追加了Windows系统下-->
<!--    的实现。在2016年，Go被软件评价公司TIOBE 选为“TIOBE 2016 年最佳语言”。 目前，Go每半-->
<!--    年发布一个二级版本（即从a.x升级到a.y）。-->
<!--</div>-->

<!--2.使用绝对定位操作元素-->
<!--<div>-->
<!--    <img src="flower.jpg" alt="flower.jpg" />-->
<!--    Go（又称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 开-->
<!--    发的一种静态强类型、编译型语言。Go 语言语法与 C 相近，但功能上有：内存安全，GC（垃圾回-->
<!--    收），结构形态及 CSP-style 并发计算。罗伯特·格瑞史莫（Robert Griesemer），罗勃·派-->
<!--    克（Rob Pike）及肯·汤普逊（Ken Thompson）于2007年9月开始设计Go，稍后Ian Lance T-->
<!--    aylor、Russ Cox加入项目。Go是基于Inferno操作系统所开发的。Go于2009年11月正式宣布推-->
<!--    出，成为开放源代码项目，并在Linux及Mac OS X平台上进行了实现，后来追加了Windows系统下-->
<!--    的实现。在2016年，Go被软件评价公司TIOBE 选为“TIOBE 2016 年最佳语言”。 目前，Go每半-->
<!--    年发布一个二级版本（即从a.x升级到a.y）。-->
<!--</div>-->

<!--3.通过定位设置尺寸-->
<!--<article>-->
<!--    <div></div>-->
<!--</article>-->

<!--4.控制元素居中定位的几种方式-->
<!--<article>-->
<!--    <div></div>-->
<!--</article>-->

<!--5.多级定位的注意事项-->
<!--<article>-->
<!--    <section>-->
<!--        <div></div>-->
<!--    </section>-->
<!--</article>-->

<!--6.滚动对定位元素的影响-->
<!--<article>-->
<!--    <section>-->
<!--        <div></div>-->
<!--    </section>-->
<!--</article>-->

<!--7.图标定位案例操作-->
<!--<ul>-->
<!--    <li>-->
<!--        <span>热</span>-->
<!--        <img src="flower.jpg" alt="flower.jpg">-->
<!--    </li>-->
<!--</ul>-->

<!--8.定位叠加很重要-->
<!--<ul>-->
<!--    <li>-->
<!--        <span>热</span>-->
<!--        <img src="flower.jpg" alt="flower.jpg">-->
<!--        <div>-->
<!--            <h2>定位操作布局</h2>-->
<!--        </div>-->
<!--    </li>-->
<!--</ul>-->

<!--9.京东商城购物车部件-->
<!--<article>-->
<!--    <div>我的购物车</div>-->
<!--    <div>购物车中暂无商品</div>-->
<!--</article>-->

<!--10.固定定位-->
<!--<div></div>-->
<!--<article></article>-->

<!--11.粘性定位-->
<!--<div>-->
<!--    <h2>go语言</h2>-->
<!--    <p>-->
<!--        Go（又称 Golang）是 Google 的 Robert Griesemer，Rob Pike 及 Ken Thompson 开发的一种静态强类型、编译型语言。-->
<!--    </p>-->
<!--    <h2>html语言</h2>-->
<!--    <p>-->
<!--        HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。-->
<!--    </p>-->
<!--    <h2>css语言</h2>-->
<!--    <p>-->
<!--        层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）等文件样式的计算机语言。-->
<!--    </p>-->
<!--    <h2>js语言</h2>-->
<!--    <p>-->
<!--        全面系统的讲解JAVASCRIPT（ES）编程语言，ECMASCRIPT系统课程含盖 es5 / es6 / es7 / es8 等知识点。-->
<!--    </p>-->
<!--</div>-->

</body>
</html>

 

标签：定位,--,08,height,width,position,div,css
来源： https://www.cnblogs.com/LiuChang-blog/p/16173488.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有