ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

css - 08定位布局

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

标签:定位 -- 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

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

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

ICode9版权所有