HTML初学笔记（五）

南城不春
155 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情

少年与爱从不老去，即便披荆斩棘，丢失怒马鲜衣 ----莫峻

定位

定位=定位模式+边偏移

定位模式

值语义
static(了解，没有边偏移)静态定位
relative（重要，相对于自己原来的位置移动，要添加边偏移，不会脱离标准流，会压住其他标准流盒子）相对定位
absolute（重要，相对于祖先元素移动，如果没有父元素或者父元素没有定位，则根据浏览器来移动，如果父亲没有定位而爷爷有定位，则以爷爷为准（找最近一级有定位的祖先元素），会脱标，不会保留原先的位置）绝对定位
fixed（会脱标，以浏览器可视窗口移动，跟父元素没有关系，不占有原先的位置，子绝父相：只有父元素设置相对定位，子元素的位置才会根据父元素来移动）固定定位

边偏移

边偏移属性示例描述
toptop:80px顶端偏移量，定义元素相对于其父元素上边线的距离
bottombottom:80px底部偏移量，定义元素相对于其父元素下边线的距离
leftleft:80px左侧偏移量，定义元素相对于其父元素左边线的距离
rightright:80px右侧偏移量，定义元素相对于其父元素右边线的距离

示例如下👇👇

相对定位

        .div1{
            height: 100px;
            width: 100px;
            position: relative;
            top: 50px;
            left: 50px;
            background-color: aqua;
            
        }
        .div2{
            height: 200px;
            width: 200px;
            background-color: pink;
        }

image.png

ps:会压住其他标准流盒子

绝对定位

        .div1{
            height: 100px;
            width: 100px;
            position: absolute;
            top: 25px;
            left: 25px;
            background-color: aqua;
            
        }
        .div2{
            height: 200px;
            width: 200px;
            margin: 0 auto;
            position: relative;
            background-color: pink;
        }

image.png

ps:口诀：子绝父相

固定定位

        .div1{
            /* div1是子元素 */
            height: 100px;
            width: 100px;
            position: fixed;
            top: 300px;
            left: 400px;
            background-color: aqua;
            
        }
        .div2{
            /* div2是父元素 */
            height: 200px;
            width: 200px;
            margin: 0 auto;
            background-color: pink;

image.png

ps:固定定位是指该元素会固定在浏览器某一个位置，无论浏览器窗口变大变小，它都不会移动

固定定位小技巧✨✨

  • 固定到版心旁边
    position:fixed;
    left:50%;/*走浏览器宽度的一半*/
    margin-left:400px;/*再走版心盒子宽度的一半*/

ps:走浏览器宽度的一半，再走版心盒子的一半

  • 绝对定位的盒子水平居中

ps:left走50%，margin再走本身盒子的一半

定位叠放次序

    position:absolute;
    left:50%;/*走50%父元素宽度的一半*/
    margin-left:-100px;/*负值 往左边走自己父元素盒子的一半*/

z-index: (数字，可正可负，越大越上)

ps:数字后面不能加单位，只有定位的盒子才有index属性

如果属性值相同，则按照书写顺序（后来居上）

显示和隐藏

隐藏：display: none;（隐藏元素后，位置也不见了）

visibility: hidden;（隐藏元素后，位置不会消失）

overflow: hidden;（把多出来的内容给隐藏起来）

overflow: scroll;（把多出来的内容显示滚动条，不溢出的时候也显示滚动条）

overflow: auto;（只把多出来的内容显示滚动条）

显示：display: block;

visibility: visible;

overflow: visible;

ps: 有定位的盒子尽量不要使用overflow

总结：行内元素添加绝对定位或者固定定位，可以直接设置宽度和高度。块级元素添加绝对定位或者固定定位，如果不给宽度和高度，默认大小是内容大小。脱离标准流的元素不会发生外边距塌陷浮动元素会压住盒子，但是不会压住盒子里面的文字或者图片,但是绝对定位和固定定位会压住下面的所有内容

好啦今天的内容就到这里，辛苦掘金的运营小同学！！✨✨

avatar
文章
阅读
粉丝