本文将要为您介绍的是浮动和渐变色,定位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,元素的层叠顺序就为您介绍到这里,感谢您关注懒咪学编程c.lanmit.com.
本文地址:https://c.lanmit.com/Webqianduan/htmlyucss/23323.html