浮动和渐变色,定位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越大表示越优先显示 只有定位的元素才可以设置该样式
浮动和渐变色,定位position,元素的层叠顺序的更多相关文章
- CSS 浮动(float)与定位(position)
一.浮动 1.三个属性:left.right.none. 2.特点:容易造成父项塌陷,故在父项需要清除浮动 3.父项塌陷现象 4.父项塌陷解决方案(建议使用):清除浮动 .parent:after{ ...
- 20190409-层叠の层叠上下文、层叠水平、层叠顺序、z-index、伪元素层叠
写在前面乱七八糟的前言: 此"八卦"的源于,在写下图这个圆滚滚的导航布局时,使用元素及其伪元素加上绝对定位完成,但遇到:before或:after伪元素与元素的层叠顺序,就是伪元素 ...
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
- 深入理解CSS中的层叠上下文和层叠顺序
零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...
- CSS基础:层叠顺序和层叠上下文
简介 在考虑到两个元素可能重叠的情况下,层叠顺序决定了那个元素在前面,那个元素在后面,这是针对普通元素而言.而层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单 ...
- [转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
- css之层叠上下文和层叠顺序
大家在写网页的时候会不会经常遇到莫名奇妙的样式问题,比如谁覆盖了谁.也找不出原因,为什么z-index高的却没有覆盖掉z-index低的元素呢? 带着这些疑问.我做了个小实验.代码如下: <st ...
- 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index
前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我 ...
- css 层叠上下文和层叠顺序
层叠上下文是css中的一个三维概念,拥有层叠上下文的元素在z轴上比普通元素要高,而且其内部的所有内容是自成体系的,其后代都是在它的层叠顺序中 哪些元素拥有层叠上下文 1.根元素,也就是html默认拥有 ...
随机推荐
- (转载)基于Linux C的socket抓包程序和Package分析
转载自 https://blog.csdn.net/kleguan/article/details/27538031 1. Linux抓包源程序 在OSI七层模型中,网卡工作在物理层和数据链路层的MA ...
- C#构建可扩展的应用程序(插件)
构建可扩展的应用程序,特别是对于WinForm应用程序是特别有好处的.我们知道,企业的需求是瞬息万变的,企业在使用软件的过程中,很可能对于现有的需求有变动甚至是提出新的需求来,可是我们的软件已经部署在 ...
- Nacos学习
Nacos是阿里开源的一个新框架,在分布式的架构中,Nacos同时扮演着服务注册中心和配置中心的角色.今天主要讲的是Nacos作为服务注册中心. 分布式中著名的CAP理论,任何一种服务注册中心都只能实 ...
- Java多个线程顺序打印数字
要求 启动N个线程, 这N个线程要不间断按顺序打印数字1-N. 将问题简化为3个线程无限循环打印1到3 方法一: 使用synchronized 三个线程无序竞争同步锁, 如果遇上的是自己的数字, 就打 ...
- [转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
- 爬虫urllib2库的基本使用
所谓网页抓取,就是把URL地址中指定的网络资源从网络流中读取出来,保存到本地. 在Python中有很多库可以用来抓取网页,urllib2库基本使用. urllib2 是 Python2.7 自带的模块 ...
- 备忘-VSCODE、apache配置
一个像素点的光标:https://files.cnblogs.com/files/zjfree/mouse.zip VSCODE配置备忘: { "editor.fontLigatures&q ...
- URLDoBase64
import java.io.IOException; import java.io.UnsupportedEncodingException; import java.net.URLDecoder; ...
- (转载)CNN 模型所需的计算力(FLOPs)和参数(parameters)数量计算
FLOPS:注意全大写,是floating point operations per second的缩写,意指每秒浮点运算次数,理解为计算速度.是一个衡量硬件性能的指标. FLOPs:注意s小写,是f ...
- [LeetCode] 199. Binary Tree Right Side View 二叉树的右侧视图
Given a binary tree, imagine yourself standing on the right side of it, return the values of the nod ...