下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:浮动和渐变色,定位position,元素的层叠顺序

作者:九幽无泪     来源: https://www.cnblogs.com/kyhboke/p/11809926.html点击数:647发布时间: 2020-03-11 10:26:38

标签: 网页设计position前端

Web开发

  position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

  浮动:float

  是我们网页设计布局的一种

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

  浮动的特点:

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

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

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

  清除浮动:不是说把浮动的元素清理掉,而是清除浮动元素对其他元素的影响

  1给父元素直接设置一个高度

  2.设置clear:both;

  设置背景的渐变色:

  线性渐变:

  background-image:linear-gradient(tobottom,#DA4601,#FEEEB6,#E46410);

  径向渐变:

  background-image:radial-gradient(red,blue,green80%);

  定位:position

  相对定位relative

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

  所有的定位都可以给两个值

  水平偏移位置:left或right

  垂直偏移位置:top或bottom

  绝对定位absolute子绝父相

  参照物是有定位的距离元素最近的祖级元素,如果所有的祖级元素都没有定位,参照物是初始包含块

  会脱离正常文档流,原本空间不存在

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

  固定定位fixed

  参照物是视口(视口就是眼睛所看到的的这个窗口)

  会脱离正常文档流,也就是说原本的位置不存在了

  粘性定位(了解内容)sticky

  设置定位元素的层叠顺序:

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

  static是position的默认值,一般不设置position属性时,会按照正常的文档流进行排列。

赞(14)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程