• 浮动和渐变色,定位position,元素的层叠顺序


    浮动: float
    是我们网页布局的一种

    浮动 可以有 left 左浮动 right 右浮动 两种

    浮动的特点:
    脱离正常的文档流,原本的空间不占据,浮动的标签都具有块级标签的一些特点,可以手动设置宽高

    如果有相邻的多个浮动的元素,那么后面浮动的元素会停靠在前面浮动元素的后面,如果剩余空间不够,则会另起一行显示

    如果一个元素中所有的内容都浮动了,那么这个元素本身高度则没有了,如果想要让这个元素高度还在,需要自己手动设置高度


    清除浮动: 不是说把浮动的元素清理掉,而是清除浮动元素对其他元素的影响
    1 给父元素直接设置一个高度
    2. 设置 clear:both;

    设置背景的渐变色:

    线性渐变:
    background-image: linear-gradient(to bottom,#DA4601,#FEEEB6,#E46410);
    径向渐变:
    background-image: radial-gradient(red,blue,green 80%);

    定位:position

    相对定位 relative
    参照物是自己原来的位置,不会脱离正常文档流,也就是说原本的位置依旧存在

    所有的定位都可以给两个值
    水平偏移位置: left 或 right
    垂直偏移位置: top 或 bottom

    绝对定位 absolute 子绝父相
    参照物是有定位的距离元素最近的祖级元素,如果所有的祖级元素都没有定位,参照物是初始包含块
    会脱离正常文档流,原本空间不存在

    什么是初始包含块: 就是浏览器一打开,用户能看到的窗口页面

    固定定位 fixed
    参照物是视口(视口就是眼睛所看到的的这个窗口)
    会脱离正常文档流,也就是说原本的位置不存在了
    粘性定位(了解内容)sticky


    设置定位元素的层叠顺序:
    z-index:number; number越大表示越优先显示 只有定位的元素才可以设置该样式

  • 相关阅读:
    ThreadPoolExecutor线程池参数设置技巧
    CountDownLatch与join的区别和联系
    数据库的隔离级别
    Spring事务管理的demo
    Java中isAssignableFrom的用法
    Java注解的基本概念和原理及其简单实用
    System.getProperty("line.separator") 是什么意思?
    关于“100g文件全是数组,取最大的100个数”解决方法汇总
    Intellij IDEA 添加jar包的三种方式
    亿级Web系统搭建 Web负载均衡的几种实现方式(阿里)
  • 原文地址:https://www.cnblogs.com/kyhboke/p/11809926.html
Copyright © 2020-2023  润新知