• 浮动和渐变色,定位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越大表示越优先显示 只有定位的元素才可以设置该样式

  • 相关阅读:
    计算机组成原理学习总纲图
    USE RED
    既有的问题如何解决
    字符串极值题解
    扩展 KMP
    KMP
    FHQ-Treap
    STL
    iOS内存管理理论知识过一遍
    iOS中Block理论知识过一遍
  • 原文地址:https://www.cnblogs.com/kyhboke/p/11809926.html
Copyright © 2020-2023  润新知