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

浮动: float
是咱们网页布局的一种浏览器

浮动 能够有 left 左浮动 right 右浮动 两种布局

浮动的特色:
脱离正常的文档流,本来的空间不占据,浮动的标签都具备块级标签的一些特色,能够手动设置宽高文档

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

 

若是一个元素中全部的内容都浮动了,那么这个元素自己高度则没有了,若是想要让这个元素高度还在,须要本身手动设置高度io


清除浮动: 不是说把浮动的元素清理掉,而是清除浮动元素对其余元素的影响
1 给父元素直接设置一个高度
2. 设置 clear:both;float

设置背景的渐变色:im

线性渐变:
background-image: linear-gradient(to bottom,#DA4601,#FEEEB6,#E46410);
径向渐变:
background-image: radial-gradient(red,blue,green 80%);样式

 

定位:positiontop

相对定位 relative
参照物是本身原来的位置,不会脱离正常文档流,也就是说本来的位置依旧存在di

全部的定位均可以给两个值
水平偏移位置: left 或 right
垂直偏移位置: top 或 bottom

绝对定位 absolute 子绝父相
参照物是有定位的距离元素最近的祖级元素,若是全部的祖级元素都没有定位,参照物是初始包含块
会脱离正常文档流,本来空间不存在

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

固定定位 fixed
参照物是视口(视口就是眼睛所看到的的这个窗口)
会脱离正常文档流,也就是说本来的位置不存在了
粘性定位(了解内容)sticky

设置定位元素的层叠顺序: z-index:number; number越大表示越优先显示 只有定位的元素才能够设置该样式

相关文章
相关标签/搜索