CSS学习第6 & 7天

最新推荐文章于 2024-05-22 19:36:03 发布

Labef_Peppa

最新推荐文章于 2024-05-22 19:36:03 发布

阅读量253

点赞数 1

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/N374471906/article/details/108857351

版权

笔记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

第6天：
今天主要学习了css当中定位相关的内容
定位：把盒子定在某一位置，自由的漂在其他盒子（包括标准流和浮动）的上面。
定位=定位模式+边偏移（top-bottom-left-right）
定位包括四种：
1.static静态定位，默认的定位也就是无定位的意思，一般不用；
2.relative相对定位，指相对于自己原来位置的定位，会保留自己的位置
3.absolute绝对定位，指元素以带有定位的父级元素（祖先中第一个有定位的元素）来移动位置，如果其所有的父级元素都是无定位的，就依照浏览器标准来定位，绝对定位是完全脱标的，不保留原来的位置。
4.fixed固定定位，和父级元素毫无关系，不随着滚动条滚动而变化，是在浏览器的可视窗口根据边偏移属性确定的。（固定定位其实是绝对定位的一种特例）。

一般使用定位的方式：子绝父相，即孩子为绝对定位，父亲为相对定位，这样一来可以实现孩子在盒子中位置自由的设置，又不会因为父级无定位而以浏览器为标准，父亲因为是相对定位所以可以设为左上边偏移0保证和没设置定位的位置一致。
绝对定位居中：margin：auto；无效，需要用left：50%； margin-left：-（自身宽度一半）px；来设置。
一个行内盒子，如果加了浮动、绝对定位和相对定位的属性，那么直接就相当于display转换为了inline-block行内块了，可直接设置高宽，而且不会有外边距塌陷（margin合并）的问题。
width：100%；为设置宽度通栏！！！
z-index用来设置定位元素的覆盖优先级，为整数，可为负，值越大覆盖越上。

第6天代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #0f0;
        }
        .ding{
            width: 200px;
            height: 200px;
            background-color: #f00;
            /* 定位 = 定位模式+边偏移 */
            /* 相对定位是指相对于自己原来的位置，如果有外边距同样是相对于加了外边距的位置，而且相对定位移走之后块原来标准流的位置仍然会保留 
            并且后面的盒子仍然以标准流的方式来对待它*/
            position: relative;
            top: 100px;
            left: 100px;
        }

        .father-d{
            width: 200px;
            height: 200px;
            margin: 100px;
            position: relative;
            background-color: #f00;
        }
        .son-d{
            width: 50px;
            height: 50px;
            /* 绝对定位：父级元素没有定位那么就以浏览器为准来定位 */
            /* 绝对定位 以离自己最近的有定位的父级元素为准来定位
            举例：如果父级有定位那么就以父亲准来定位 如果上一级父级没有定位，上上级有那么就以上上级为准*/
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: #00f;
        }

        .juedui{
            width: 1000px;
            height: 100px;
            /* 子绝父相，如果这里父亲也用绝对定位那么父亲就会脱标，自己的位置就会不保留 就类似浮动，所以父级要设置成相对避免这种情况发生 */
            position: relative;
            background-color: #f00;
        }

        .son1{
            width: 30px;
            height: 50px;
            position: absolute;
           top: 25px;
            background-color: #0f0;
        }
        .son2{
            width: 30px;
            height: 50px;
            position: absolute;
           top: 25px;
           /* 绝对定位的margin:auto水平居中无效，需要用先相对于父盒子左的50%再向左移动自身的一半 */
           /* 先移动到父盒子的50%位置但是移多了 */
           left: 50%;
           /* 再反过来移动自身的一半 */
           margin-left: -15px;
            background-color: #0f0;
        }

        .jue{
            width: 1000px;
            height: 200px;
            background-color: #00f;
        }

        .fixed{
            width: 50px;
            height: 50px;
            /* 固定盒子，和父级完全无关系，不随滚动条滚动 只认浏览器的可视窗口 */
            position: fixed;
            top: 0;
            left: 0;
            background-color: #33aa33;
        }

        .mao{
            position: relative;
            background-color: #fff;
        }
        .damao{
            /* 如果不设置z-index那么就是后来者居上，设置了之后z-index值只能为整数而且数越大位置越上 */
            z-index: 2;
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }

        .ermao
        {
            z-index: 1;
            position: absolute;
            top: 25px;
            left: 25px;
            width: 100px;
            height: 100px;
            background-color: #0f0;

        }

        .sanmao
        {
            z-index: 0;
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: #00f;
        }

    </style>
</head>
<body>
    <div></div>
    <div class="ding"></div>
    <div></div>

    <div class="father-d">
        这是父亲
        <div class="son-d">
            这是儿子
        </div>
    </div>

    <div class="juedui">
        <div class="son1">
            绝对定位儿子1
        </div>
        <div class="son2">
            绝对定位儿子2
        </div>
    </div>
    <div class="jue">

    </div>

    <div class="fixed">
        固定盒子
    </div>
    <div class="mao">
        <div class="damao">

        </div>
        <div class="ermao"></div>
        <div class="sanmao"></div>
    </div>
   
</body>
</html>

效果图：
在这里插入图片描述

在这里插入图片描述
css学习第7天：
今天主要学习了css的高级技巧：
1.元素的显示与隐藏
三种方法：
①display：none；设置隐藏并且不保留位置，如果再设置display：block；就意味着又设置成显示了
②visibility：hidden；设置成隐藏且保留位置；
③overflow：hidden；隐藏超出盒子大小的部分。
2.css用户界面样式
①cursor属性设置鼠标的样式如cursor：pointer设置鼠标为一只小手
②outline：none；设置input边框为没有，取消轮廓线
③textarea标签的resize：none；设置以防止用户拖拽文本域
④vertical-align只针对行内元素和行内块元素起作用，如设置middle可以让图片和文字同样高，这个属性是按照文本线对齐来设定的，设置为top可以解决图片在盒子里面的时候底部会有空白缝隙的情况。该元素对块内元素不起作用
⑤溢出文字省略号显示：三步曲：一white-space：nowrap；强制在一行内显示文本；二overflow：hidden；隐藏溢出文字；三text-overflow：ellipsis；溢出文字用省略号来代替。

3.精灵技术：把多个小图片融合在一张大图片中，调用的时候直接用background-position：x x；来切割图片引用，这两个x是用来移动整个图片用的，所以一般为负值。精灵技术的目的是为了有效地减少服务器发送和请求的次数，提高页面的加载速度（很多张图片融成一张，就只用下载一次，不用多次访问），精灵图片一定是用作背景图片的（background），不能用作插入图片！！

4.滑动门技术
一般就是a标签内包含一个span标签，a设置背景左侧（左门），span设置背景右侧（右门），两边都需要用padding来撑开适合的宽度，剩下的让文字来撑开，从而实现了滑动门的状态（随文字长短自由变化）。

5.用css写三角形，具体见代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        /* 精灵图切片技术 */
        .icon1 {
            display: inline-block;
            width: 111px;
            height: 111px;
            background: url(abcd.jpg);
            background-position: -257px -277px;
        }

        .icon2 {
            display: inline-block;
            width: 105px;
            height: 108px;
            background: url(abcd.jpg);
            background-position: -100px -142px;
        }

        .icon3 {
            display: inline-block;
            width: 133px;
            height: 107px;
            background: url(abcd.jpg);
            background-position: -119px -563px;
        }

        .hezi {
            float: left;
            width: 200px;
            height: 300px;
            border: 1px solid #ddd;
            margin-left: -1px;
            margin-top: -1px;
            z-index: 0;
        }

        /* div包括很多标签都可以带hover */
        /* 要想实现鼠标经过盒子整个边框全部换色不被掩盖，就把经过的盒子换成定位类型 */
        /* 定位>浮动>标准流 覆盖顺序，定位最高，所以换成定位就会把旁边还是浮动的盒子给覆盖 */
        /* 为了实现这个功能只能用相对定位，因为相对定位还会占位置，绝对定位会不占位置后面的边框会重叠 */
        .hezi:hover {
            position: relative;
            border-color: orange;

        }

        .sanjiao {
            width: 0;
            height: 0;
            border: 10px solid;
            border-color: transparent transparent transparent red;
        }

        .jiantou{
            position: relative;
            width: 60px;
            height: 60px;
            background-color: #f00;
        }

        .jiantou div{
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px;
            border-color: transparent transparent #f00 transparent;
            left: 50%;
            margin-left: -10px;
            top: -20px;
            
        }
    </style>
</head>

<body>
    <div class="ddd">
        <div class="icon1">
        </div>
        <div class="icon2"></div>
        <div class="icon3"></div>
    </div>
    <div class="clearfix">
        <div class="hezi"></div>
        <div class="hezi"></div>
        <div class="hezi"></div>
        <div class="hezi"></div>
        <div class="hezi"></div>
        <div class="hezi"></div>
        <div class="hezi"></div>
        <div class="hezi"></div>
        <div class="hezi"></div>
        <div class="hezi"></div>
    </div>

    <div class="sanjiao">

    </div>

    <div class="jiantou">
        <div></div>
    </div>
</body>

</html>

其中在设置鼠标移动到方块显示橙色边框部分，还有一种写法就是把没有鼠标移动到的初始边框设置成相对定位，然后再div:hover里面设置z-index值较大，也可以实现橙色不被覆盖。

效果图：
在这里插入图片描述
三角形：

滑动门技术代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动门</title>
    <style>
        div{
            background-color: #212020;
        }
        a{
            /* a和span都是行内元素，都要先设置成行内块再进行高度设置 */
            display: inline-block;
            height: 33px;
            background: url(to.png) no-repeat;
            padding-left:10px;

        }
        span{
            display: inline-block;
            height: 33px;
            line-height: 33px;
            /* 注意span是设置右门的，插入背景图片默认是左上角的位置，所以要加上right top显示右上 */
            background: url(to.png) no-repeat right top;
            padding-right: 10px;
            color: #fff;
        }

        a:hover{
            background: url(ao.png) no-repeat;
        }
        a:hover span{
            background: url(ao.png) no-repeat right top;
        }
    </style>
</head>
<body>
<div>
    <a href="#">
        <span>
            123
        </span>
    </a>

    <a href="#">
        <span>
            每天都要加油！
        </span>
    </a>
    <a href="#">
        <span>
            网页版
        </span>
    </a>
</div>
</body>
</html>