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

浮动和渐变色,定位position,元素的层叠顺序的更多相关文章

  1. CSS 浮动(float)与定位(position)

    一.浮动 1.三个属性:left.right.none. 2.特点:容易造成父项塌陷,故在父项需要清除浮动 3.父项塌陷现象 4.父项塌陷解决方案(建议使用):清除浮动 .parent:after{ ...

  2. 20190409-层叠の层叠上下文、层叠水平、层叠顺序、z-index、伪元素层叠

    写在前面乱七八糟的前言: 此"八卦"的源于,在写下图这个圆滚滚的导航布局时,使用元素及其伪元素加上绝对定位完成,但遇到:before或:after伪元素与元素的层叠顺序,就是伪元素 ...

  3. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  4. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  5. CSS基础:层叠顺序和层叠上下文

    简介 在考虑到两个元素可能重叠的情况下,层叠顺序决定了那个元素在前面,那个元素在后面,这是针对普通元素而言.而层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单 ...

  6. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

  7. css之层叠上下文和层叠顺序

    大家在写网页的时候会不会经常遇到莫名奇妙的样式问题,比如谁覆盖了谁.也找不出原因,为什么z-index高的却没有覆盖掉z-index低的元素呢? 带着这些疑问.我做了个小实验.代码如下: <st ...

  8. 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index

    前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...

  9. css 层叠上下文和层叠顺序

    层叠上下文是css中的一个三维概念,拥有层叠上下文的元素在z轴上比普通元素要高,而且其内部的所有内容是自成体系的,其后代都是在它的层叠顺序中 哪些元素拥有层叠上下文 1.根元素,也就是html默认拥有 ...

随机推荐

  1. Servlet使用反射机制

    传统servlet存在的问题 每一个不同的请求都要写Servlet,导致整个项目servlet过多,不易维护 解决方案 同一个模块只写一个Servlet,然后每一个请求传一个参数,后台根据参数取调用不 ...

  2. RPC接口测试(一)什么是 RPC 框架

    什么是 RPC 框架 RPC 框架----- 远程过程调用协议RPC(Remote Procedure Call Protocol)-----允许像调用本地服务一样调用远程服务. RPC是指远程过程调 ...

  3. QTP测试学习笔记

    QuickTest Professional(简称QTP)功能自动化测试,原属于Mercury Interactive公司产品,2006年7月被惠普公司收购了,通过安装文件目录可以看到,都是默认放在C ...

  4. JVM探究之 —— OOM异常

    在Java虚拟机规范的描述中,除了程序计数器外,虚拟机内存的其他几个运行时区域都有发生OutOfMemoryError(下文称OOM)异常的可能.本节探究主要基于jdk1.8的内存结构. 1. Jav ...

  5. 随便贴两个漏洞,如 Apache JServ协议服务

    1.Apache JServ协议服务 描述:Apache JServ协议(AJP)是一种二进制协议,可以将来自Web服务器的入站请求代理到 位于Web服务器后面的应用程序服务器.不建议在互联网上公开使 ...

  6. too many positional arguments错误

    在window下mongodb默认安装在c盘的Program Files文件下 这个文件名中间有个空格    就导致了接下来too many positional arguments错误的产生

  7. [转]npm 遇到 write access的问题怎么办

    ubuntu下使用 npm install -g 可能会遇到这个问题. 链接地址:https://www.jianshu.com/p/31744aa44824

  8. precommit那些事儿

    一.使用背景 我们有将 lint 命令添加进 npm scripts 中,但是很多人在提交代码时都会忘记或者没有习惯去执行检查,结果就是导致不符合规范的代码被上传到远端代码仓库. 二.问题分析 我们可 ...

  9. LODOP打印维护适应不同的客户端

    之前的博文:Lodop打印设计.维护.预览.直接打印简单介绍,介绍了打印设计.打印维护.打印预览,直接打印等的区别和使用. 如上面以前博文描述的,打印维护是针对客户端进行调整的,开放打印维护给客户端, ...

  10. linux查看磁盘是否SSD盘

    命令: cat /sys/block/sda/queue/rotational 注意: 命令中的sba是你的磁盘名称,可以通过df命令查看磁盘,然后修改成你要的 结果: 返回0:SSD盘 返回1:SA ...