HTML与CSS中的定位我的分享

时间 2019-12-08

标签 html css 定位我的分享栏目 HTML 繁體版

原文原文链接

定位

static - 默认值 (几乎不用,了解就能够)

absolute - 绝对定位,不为元素预留空间,脱离文档流:

若是当前元素的父级元素是<body>元素的话 -> 是相对于当前页面的定位
若是当前元素的父级不是<body>元素的话,父级元素没有开启定位 -> 则是相对于页面的定位
若是当前元素的父级不是<body>元素的话,父级元素开启定位 -> 则是相对于父级元素定位

<style>
        body {
            margin: 0;/* 去掉浏览器默认的外边距8px */
        }
        div {
            width: 200px;
            height: 200px;
            background-color: cyan;
            /*
                开启绝对定位
                1.当前元素脱离文档流
                2.若是不设置位置的偏移量的话，位置不会有任何变化的
             */
            position: absolute;
            /*
                设置定位的偏移量:
                 * 水平方向正值 - 向右移动
                 * 水平方向负值 - 向左移动
                 * 垂直方向正值 - 向下移动
                 * 垂直方向负值 - 向上移动
            */
            top: 100px;
            left: 100px;
        }

    </style>
</head>
<body>
<div></div>
</body>

fixed - 固定定位,不为元素预留空间:

是相对于窗口来定位元素位置,脱离文档流

<style>
        body {
            margin: 0;
            height: 1000px;
        }
        #d1 {
            width: 200px;
            height: 200px;
            background-color: #83c44e;
            /* 开启固定定位 - 相对于浏览器窗口的定位 */
            position: fixed;

            left: 100px;
            top: 100px;
        }
        #d2 {
            width: 200px;
            height: 200px;
            background-color: cyan;

            position: absolute;

            left: 500px;
            top: 100px;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

relative - 相对定位,不脱离文档流

相对定位是相对于自身元素原来的位置的定位

<style>
        body{
            margin: 0;
        }
        #d1{
            width: 200px;
            height: 200px;
            background-color: cyan;
            /* 外边距 */
            margin: 100px;
        }
        #d2{
            width: 100px;
            height: 100px;
            background-color: #ffac13;
            /* 外边距 */
            margin-left: 100px;
            /* 相对定位是相对于自身元素原来的位置的定位 */
            position: relative;
            left: 100px;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>
</body>

定位的方式解析图:
浏览器

堆叠

z-index属性值大的在上方,小的在下方,就是所z-index属性值大的覆盖小的

<style>
        body{
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
        }
        #d1{

            background-color: cyan;
            /* 开启绝对定位 */
            position: absolute;
            /* 开启定位后设置偏移量 */
            left: 150px;
            top: 150px;
            z-index: 2323;
        }
        #d2{
            background-color: #ffac13;

            /* 开启相对定位 */
            position: relative;
            /* 开启定位后设置偏移量 */
            left: 50px;
            top:50px;
            z-index:1;
        }
        /*
            必须是当前元素开启定位的状况下,z-index属性才会有效
                当多个属性设置z-index属性时 - 值大的会覆盖值小的
         */
    </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>

堆叠分析图:
布局

继承于层叠

继承

继承就是父级元素的属性,子级元素使用能够不用设置直接使用
注意: CSS属性中不是所用属性均可以继承
CSS的样式属性:

可继承的属性 - 指定元素的样式,同时做用其后代元素
不可继承的属性 - 只能做用在指定的元素

备注: 继承中有一个inherit值 - 就是是继承于祖先元素属性的意思,当子级元素的属性设置inherit值时表明继承父级元素使用的属性值.字体

<style>
        /*
            CSS的样式属性:
             1. 可继承的属性 - 指定元素的样式,同时做用其后代元素
             2. 不可继承的属性 - 只能做用在指定的元素
         */
        body{
            /*
                页面中的默认的字体大小为 16px
                页面中的默认的颜色为黑色
             */
            font-size: 148px;
            color: cyan;
        }
        p{
            /*
                inherit值 - 是继承于祖先元素属性的意思
                当前样式属性的值是继承于祖先元素
             */
            font-size: inherit;
        }
    </style>
</head>
<body>
<p>一花一世界,一叶一孤城</p>
</body>

继承于层叠分析图spa

层叠

就是选择器的优先级别,当为某个选择器设置 !important 时该选择器优先级别最大
注意: 为某个选择器设置!important时会打乱本来选择器的优先级别的规则可能会影响整个页面布局,因此能不用就不用,知道有这个东西就行