• day53——浮动影响的解决办法、定位、溢出属性、z-index


    今日内容

    1. 解决浮动带来的影响
    2. 溢出属性
    3. 定位
    4. 验证浮动和定位是否脱离文档流
    5. z-index模态框
    6. 透明度opacity
    7. 简单博客园首页的搭建
    8. JavaScript编程语言初始

    一、解决浮动带来的影响

    • 浮动带来的影响

      会造成父标签塌陷的问题

    • 初步解决办法

      直接在父标签内加一个div标签,给该div加一个高度,高度大于等于子标签最高的高度,这样将父标签撑起来。

    • 设置clear属性解决

      #dd {
      clear:left  #该标签左边(空中或者地面不能有浮动的元素)
      }
      
    • 通用解决办法(推荐)

      在写html页面前,先写好处理浮动带来的影响的 css代码,写一个命为clearfix的选择器,哪个标签出现了塌陷问题就给其加上clearfix属性。

    .clearfix {
    display:bloack;
    content:"";
    clear:both;
    }
    
    
    <div class='clearfix'...>  #标签出现塌陷问题直接加属性即可
    

    二、溢出属性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            p {
                height: 100px;
                 50px;
                border: 3px solid red;
                /*overflow: visible;  !*默认就是可见 溢出还是展示*!*/
                /*overflow: hidden;  !*溢出部分直接隐藏*!*/
                /*overflow: scroll;  !*设置成上下滚动条的形式*!*/
                /*overflow: auto;*/  
            }
        </style>
    
    </head>
    <body>
        <p>
        大家好我叫喳喳辉,是兄弟就来啃我!
        大家好我叫喳喳辉,是兄弟就来啃我!
        大家好我叫喳喳辉,是兄弟就来啃我!
        大家好我叫喳喳辉,是兄弟就来啃我!
        大家好我叫喳喳辉,是兄弟就来啃我!
        大家好我叫喳喳辉,是兄弟就来啃我!
        大家好我叫喳喳辉,是兄弟就来啃我!
        大家好我叫喳喳辉,是兄弟就来啃我!
        大家好我叫喳喳辉,是兄弟就来啃我!
        大家好我叫喳喳辉,是兄弟就来啃我!
        大家好我叫喳喳辉,是兄弟就来啃我!
        大家好我叫喳喳辉,是兄弟就来啃我!
        </p>
    </body>
    </html>
    

    总结:当标签内的内容超过标签的大小的时候,设置overflow属性,可将超出的部分隐藏,或者做出滚动条。

    溢出应用

    做一个圆形的图片头像

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                margin:0;
                background-color: #2b2b2b
            }
            div {
                100px;
                height:100px;
                border:red 4px solid;
                border-radius: 50%;
                overflow:hidden; /*图片超出部分隐藏*/
                margin:0 auto;  /*图片居中*/
            }
            div>img{
                 100%; /*占标签100%比例*/
            }
    
        </style>
    </head>
    <body>
    <div>
        <img src="111.jpg" alt="">
    </div>
    </body>
    </html>
    

    定位

    • 静态

      所有的标签默认情况下都是静止(static)的,不能改变位置

    • 相对定位

      相对与标签原来的位置移动relative

    • 绝对定位

      相对于已经定位的父标签做移动,没有父标签就以body标签做参考

      eg:小米网站购物车

    • 固定定位

      相对与浏览器页面固定在某个位置

      eg:右侧小广告

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                margin: 0;
            }
            #d1 {
                height: 100px;
                 100px;
                background-color: red;
                left: 50px;  /*从左往右   如果是负数 方向则相反*/
                top: 50px;  /*从上往下    如果是负数 方向则相反*/
                /*position: static;  !*默认是static无法修改位置*!*/
                position: relative;
                /*相对定位
                标签由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标签
                虽然你哪怕没有动 但是你的性质也已经改变了
                */
            }
    
            #d2 {
                height: 100px;
                 200px;
                background-color: red;
                position: relative;  /*已经定位过了*/
            }
            #d3 {
                height: 200px;
                 400px;
                background-color: yellowgreen;
                position: absolute;
                left: 200px;
                top: 100px;
            }
    
            #d4 {
                position: fixed;  /*写了fixed之后 定位就是依据浏览器窗口*/
                bottom: 10px;
                right: 20px;
    
                height: 50px;
                 100px;
                background-color: white;
                border: 3px solid black;
            }
        </style>
    </head>
    <body>
    <!--    <div id="d1"></div>-->
    
    <!--<div id="d2">-->
    <!--    <div id="d3"></div>-->
    <!--</div>-->
    
    <div style="height: 500px;background-color: red"></div>
    <div style="height: 500px;background-color: greenyellow"></div>
    <div style="height: 500px;background-color: blue"></div>
    <div id="d4">回到顶部</div>
    
    </body>
    </html>
    

    ps:浏览器优先展示的是文本内容

    四、验证浮动和定位是否脱离文档流

    (原来的位置是否还保留)

    • 不脱离文档流

      1)相对定位

      <body>
      <!--<div style="height: 100px; 200px;background-color: red;"></div>-->
      
      <div style="height: 100px; 200px;background-color: red;position: relative;left: 500px"></div>
      
      <div style="height: 100px; 200px;background-color: greenyellow"></div>
      </body>
      

      相对移动后标签原来的位置还在。

    • 脱离文档流

      便签原来的位置不再了,位置被其他标签占据。

      1. 浮动

        <!--<div style="height: 100px; 200px;background-color: red;"></div>-->
        
        <div style="height: 100px; 200px;background-color: red;float:right"></div>
        
        <div style="height: 100px; 200px;background-color: greenyellow"></div>
        
      2. 绝对定位

        <div style="height: 100px; 200px;background-color: red;"></div>
        
        <!--<div style="height: 100px; 200px;background-color: greenyellow"></div>-->
        
        <div style="height: 100px; 200px;background-color: greenyellow;position: absolute;left: 500px"></div>
        <!--当没有父标签做到位 就参照与body-->
        
        <div style="height: 100px; 200px;background-color: blue;"></div>
        
      3. 固定定位

        <div style="height: 100px; 200px;background-color: red;"></div>
        
        <!--<div style="height: 100px; 200px;background-color: greenyellow;"></div>-->
        
        <div style="height: 100px; 200px;background-color: greenyellow;position: fixed;bottom: 10px;right: 20px"></div>
        
        <div style="height: 100px; 200px;background-color: blue;"></div>
        
        

    五、z-index模态框

    浏览器页面的坐标轴其实是一个立体的坐标轴,其中轴指向的是用户,z轴值越大意味着离用户越近。

    eg:百度的登录页面,其实是三层的结构

    1. 最底部的是正常的内容(z=0) 离用户最远
    2. 第二层黑色透明区(z=99) 中间层
    3. 白色的注册窗口(z=100) 离用户最近

    登录界面简单版代码实现

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body {
                margin:0
            }
    
            .cover {
                position:fixed;
                left:0;
                right: 0;
                top:0;
                bottom:0;
                background-color: rgba(217,217,217,0.5);
                z-index:99;
            }
            #d1 {
                flood-color: #4e4e4e;
            }
            #d2 {
                background-color: yellow;
                400px;
                height:400px;
                z-index: 100;
                position:fixed;
                top:50%;
                left: 50%;
                margin-top: 100px;
                margin-left: 100px;
            }
        </style>
    </head>
    <body>
    
    </body>
    <div id="d1">这是底部的页面</div>
    <div class="cover"></div>
    <div id="d2">
        <h1>登录界面
            <p>username:<input type="text"></p>
            <p>password:<input type="text"></p>
            <button>点我点我</button>
        </h1>
    </div>
    </html>
    

    六、透明度opacity

    # 它不单单可以修改颜色的透明度还同时修改字体的透明度
    rgba只能影响颜色 
    而opacity可以修改颜色和字体
    opacity: 0.5;
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #d1 {
                background-color: rgba(0,0,0,0.5);
            }
            #d2 {
                background-color: red;
                opacity:0.5;
                color:blue;
            }
        </style>
    </head>
    <body>
     <p id="d1">111</p>
        <p id="d2">22asdasdasd2</p>
    </body>
    </html>
    

    七、简易博客园首页搭建

    八、初识JS

    ps:JS的全称是JavaScript,我们可能想JS和Java可能是有关系的,难道是又Java洐生而来的?其实JS和Java一点关系都没有,只是为了蹭当时Java的热点,这个热度明显是蹭的很成功的。

    JS简介

    • JS也是一门语言,它也是可以写后端代码的需要用到node.js,它支持js代码在后端服务器上运行。
    • ECMAScript和JavaScript的关系:因此ECMAScript和JavaScript的关系是,前者是后者的规格,后者是前者的一种实现。
    • 主要用5.1和6.0版本
    • 跟python一样是脚本语言
    • 是一种轻量级编程语言
    • 是可插入HTML页面的编程语言
    • 学习难度相对较小

    JS的注释

    // 单行注释
    
    /*
    多行注释
    多行注释
    多行注释
    */   
    # 多行注释和css的多行注释相同
    

    JS的两种引入方式

    • script便签内部直接书写JS代码
    • script便签src属性引入外部JS代码

    JS的语法的结束符

    JS以分号作为语句的结束符,和SQL语句的结束符相同,如果不写分号结束符,也能正常工作,但是它就相当于没有结束符。

    变量

    """
    在js中 首次定义一个变量名的时候需要用关键字声明
    	1.关键字var
    		var name='jason'
    	2.es6推出的新语法
    		let name='jason'
    		如果你的编辑器支持的版本是5.1那么无法使用let
    		如果是6.0则向下兼容 var let
    """
    # var与let的区别
    n = 10
    for n in range(5):
      print(n)
    print(n)  
    # var 5		let 10
    
    """
    var在for循环里面定义也会影响到全局
    let在局部定义只会在局部生效
    """
    

    常量

    python中没有常量的概念,全大写表示常量只是程序员约定俗成的一种表示常量的方法,而在JS中有真正的常量,定义一个常量之后修改值会报错。

    const pi = 3.14
    
  • 相关阅读:
    mysql索引的选择
    A、B两个线程交替打印1 -- 100
    dubbo服务暴露
    1
    java无锁化编程一:目录
    如何实现自定义同步组件
    服务器的性能监控
    关于shiro安全框架实现同一用户同一时刻仅可在一个地址登录的技术实现
    关于Spring的Quartz定时器设定
    JAVA之Mybatis基础入门二 -- 新增、更新、删除
  • 原文地址:https://www.cnblogs.com/zhangtieshan/p/12892210.html
Copyright © 2020-2023  润新知