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

Posted 2020-11-30 kyhboke

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