CSS基础之补充

最新推荐文章于 2024-07-15 22:52:34 发布

Lia------Li

最新推荐文章于 2024-07-15 22:52:34 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/qq_36974981/article/details/79149908

版权

一般准则

一般情况下，宽度给父元素设置，高度给子元素设置。
宽度给父元素：如果子元素是块级元素，宽度继承的是父级元素的宽度
高度给子元素：对于块级元素来说，不设置高度，那他的高度是靠子元素的高度撑开的，所以你给子元素设置高度，父元素会自动撑开，就有了高度
要想横向排列，加浮动
左浮动 : fl 右浮动: fr
```
.fl{float: left;}
.fr{float: right;}
```
要想谁盖在谁身上，加定位

Position定位

position:abcolute; 绝对定位
添加绝对定位后，元素会脱离正常文档流。
通过 left top bottom right 来设置元素具体的位置

默认是相对于窗口左上角定位的，要想让元素相对于某个”上级元素”定位，给该”上级元素”设置相对定位position:relative;
position:relative; 相对定位
不会脱离正常的文档流的
position:fixed 固定定位
不会随着滚动条滚动
绝对定位与固定定位后，宽度就不是100%，所以有些时候需要重新设置宽度

z-index 层级

适用于定位的元素，控制在z轴方向的层级，值越大，层级越高

实例

首字下沉:
        <style>
           p:first-letter{
                float:left;
                font-size:40px;
                font-weight:bold;
                font-family:"宋体";
            }
        </style>
        <body>
            <p>就看倒数第二个桶吧，C[4]=4，说明截止这里（包括这个元素），已经有4个原数组中值被算进去了，那么请问这里这个元素应该放在第几个位置？答案当然是第4个位置（index为3，因为数组以0开始），创建一个新数组（和原数组A一样长），把4+min（4+min表示A中元素，别忘了我们之前说C中A[i]-min=index）放到第4个位置就行了，这就是它最终呆的位置。</p>
        </body>

定位与层级:
<!doctype.html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>锤子</title>
        <style>
            body{margin:0;}
            ul{margin:0;padding-left:0;}
            li{list-style-type:none;}
            a{color:#333;text-decoration:none; }
            .container{
                position:relative;/*相对定位*/
                width:800px;
                margin: 100px auto;
                height:2440px;
                z-index:1;
            }


            .container img{
               width:100%;

            }
            .container a{
                display:block;
                width: 30px;
                height:50px;
                background-color: rgba(0,0,0,.5);
                color: #fff;
                font-size: 30px;
                font-family: "宋体";
                text-align: center;
                line-height: 50px;

                position: absolute;/*绝对定位*/

                top:200px;
            }
            .arrow-left{
                left: 0;
            }
            .arrow-right{right: 0;}
            .nav{
                /*position:absolute;*/
                position:fixed;
                left: 0;
                top: 0;
                width: 100%;
                height: 80px;
                background: #f00;
                z-index:1;
            }
            .to-top{
                position: fixed;
                right: 20px;
                bottom: 30px;
                padding: 10px 20px;
                background-color: #ccc; 
            }
        </style>
    </head>
    <body>
        <div class="nav"></div>
        <div class="container">
            <img src="大众车4.jpg" title="02" alt="02" />
            <a class="arrow-left">&lt;</a>
            <a class="arrow-right">&gt;</a>
        </div>
        <a class="to-top" href="#">返回顶部</a>
    </body>
</html>