CSS学习第6 & 7天_Labef_Peppa的博客-程序员秘密

技术标签： css 笔记

第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>

效果图：
在这里插入图片描述
鼠标放在中间选项后：

明天要开始做整个大网页啦，加油加油！！！

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

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Python如何把字典写入到CSV文件_将字典写入csv_王小王-123的博客-程序员秘密

在实际数据分析过程中，我们分析用Python来处理数据（海量的数据），我们都是把这个数据转换为Python的对象的，比如最为常见的字典。比如现在有几十万份数据（当然一般这么大的数据，会用到数据库的概念，不会去在CPU内存里面运行），我们不可以在Excel里面用函数进行计算一些值把，这样是不现实的。Excel只适合处理比较少的数据，具有方便快速的优势那么我们假设是这么多数据，现在我要对这个数据进行解析，转换，最后数据分析，处理，然后写入数据到CSV文件，这样才达到要求，那么如何把数据字典写入到CSV文

exec dbms_stats.gather_schema_stats 手动优化统计_weixin_34220623的博客-程序员秘密

Oracle10g或以上版本。exec dbms_stats.gather_schema_stats(ownname => 'DFMS', options => 'GATHER AUTO',estimate_percent => dbms_stats.auto_sample_size, -- -- 11g取样值比较大，可以使用samplesize,10g好像是5~20%，可以根...

windows系统，安装cuda11.0+cudnn8.0记录_消灭BUG鸭的博客-程序员秘密

@windows系统安装cuda11.0+cudnn8.0记录前提：在nvidia官网下载好cuda11.0和cudnn对应的安装包：安装cuda11.0记录1.参考网址链接: 安装cuda11.0.step1:下载完成后，双击 cuda安装包 (cuda_11.0.2_451.48_win10.exe)。首先会询问你，要把安装文件解压到哪个位置，然后点击ok，开始解压安装文件。step2:解压完毕后，弹出安装程序。第一步显示的是cuda的用户协议，点击同意并继续进入到第二步。st

使用Qt ActiveX生成Ocx 避坑指南（一）_vs+qt生成ocx时头文件内容被改写_sundynes的博客-程序员秘密

最近做项目用Qt生成Ocx供MFC调用，经历坎坷，问题不断。。这下面详细给出Qt生成ocx的避坑指南,一、Qt生成OCX本人使用的是Qt5.9 + VS2015 ,用VS生成比较简单，VS上装上Qt的插件，然后新建项目->选择Qt5 Projects 选择最后一个ActiveQt Server,然后就可以生成如下图：编译就会生成Ocx.二、Qt使用OCXQt使用ocx有两种方法:一...

(caffe入门)windows caffe 之 mnist 训练_caffe windows mnist_pomodoro_m的博客-程序员秘密

文章目录1. mnist 数据集下载2. mnist 数据集转换3. 修改 lenet_train_test.prototxt 和lenet_solver.prototxt 文件4. 开始训练上一篇博客写了在 win7 下配置 caffe，本篇博客就记录一下如何训练 mnist 数据集。1. mnist 数据集下载http://yann.lecun.com/exdb/mnist/解压并将...

java实现汉字转拼音_xiaojimanman的博客-程序员秘密

汉字转化为对应的拼音或者获取汉字拼音的首字母，这些都是在开发中经常遇到的问题，在获取汉字的拼音或者拼音的首字母之后，我们在推荐或者搜索部门可以很大程度提高用户的体验