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

原文地址:https://www.cnblogs.com/kyhboke/p/11809926.html

时间: 2024-11-07 20:53:17

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

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流?

网站布局之------浮动(float)和定位(position)(绝对定位,相对定位,静态固定定位),***什么叫脱离文档流? @参考文档:http://www.cnblogs.com/jenry/archive/2007/07/15/818660.html @什么叫脱离文档流?注意,只有绝对定位absolute和浮动float才会脱离文档流! 答案:CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位. ---部分无视和完全无视

浮动float,定位position理解

浮动,定位可以实现网页的排版 float属性总结使用场景一:实现网页中并排布局特点:实现左右并排时1.当父元素足够宽度足够时,则依次布局2.浮动的元素占据空间的宽度就是内容的宽度 缺点:影响:父元素高度塌陷原因:子元素 清除浮动方法1.可以增加父元素的高度2.可以增加一个空的div,然后让他清除上下左右浮动及clear:both; position属性总结使用场景:定位可以使元素固定在某一位置 1.有绝对定位,相对定位,固定定位3中属性 A.绝对定位(要有一个参照点),最好以最近的一个父类元素为

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

一.浮动 1.三个属性:left.right.none. 2.特点:容易造成父项塌陷,故在父项需要清除浮动 3.父项塌陷现象 4.父项塌陷解决方案(建议使用):清除浮动 .parent:after{ content:""; display: block; clear:both; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

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

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时

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

零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了.例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的.那对于CSS世界中的元素而言,所谓的“冲突”指什

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

简介 在考虑到两个元素可能重叠的情况下,层叠顺序决定了那个元素在前面,那个元素在后面,这是针对普通元素而言.而层叠上下文和块级格式化上下文 (BFC) 一样,基本上也是由一些 CSS 属性创建的,它单独作为一个体系,也就是说内容的层叠顺序是以容器的层叠顺序为基准的,而与容器外部元素的层叠顺序无关,层叠上下文的创建可以分为以下三类: (1) 页面根元素天生具有层叠上下文,称为根层叠上下文 (2) "z-index" 为数值的定位元素拥有自己的层叠上下文,数值越大,层叠顺序越高 (3) 某

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

http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显

CSS层叠上下文、层叠等级、层叠顺序、z-index

以往,由于自己使用z-index的频率不大,所以对这个CSS属性存在比较片面的认识.一直认为z-index就是用来描述定义一个元素在屏幕Z轴上的堆叠顺序.z-index值越大在Z轴 上就越靠上,也就是离屏幕观察者越近.最后才发现这个认识存在很大的问题: 首先,z-index属性值并不是在任何元素上都有效果.它仅在定位元素(定义了position属性,且属性值为非static值的元素)上有效果. 判断元素在Z轴上的堆叠顺序,不仅仅是直接比较两个元素的z-index值的大小,这个堆叠顺序实际由元素的

CSS中的层叠上下文和层叠顺序

copy @ from http://www.zhangxinxu.com 四.务必牢记的层叠准则 下面这两个是层叠领域的黄金准则.当元素发生层叠的时候,其覆盖关系遵循下面2个准则: 谁大谁上:当具有明显的层叠水平标示的时候,如识别的z-indx值,在同一个层叠上下文领域,层叠水平值大的那一个覆盖小的那一个.通俗讲就是官大的压死官小的. 后来居上:当元素的层叠水平一致.层叠顺序相同的时候,在DOM流中处于后面的元素会覆盖前面的元素. 在CSS和HTML领域,只要元素发生了重叠,都离不开上面这两个