目录
一、常规定位
1.1 种类
- 静态定位:
position:static;
盒子的默认排列方式,顺序排列 - 相对定位:盒子偏移,不压下面元素,不脱标,行内元素可直接设置宽高,块级元素默认内容大小
- 绝对定位:盒子偏移,不压下面元素,脱标,相对最近的有绝对定位的祖先盒子,行内元素可直接设置宽高,块级元素默认内容大小
- 固定定位:相对可视窗口位置固定,脱标
不脱标:原位置保留,移动位置相对于原位置,见相对定位图
调整叠放次序:z-index:3;
,默认:auto,可正可负可零
1.2 相对定位
- 功能:不脱标偏移,或作为绝对定位的父元素(子绝父相)
- 效果
- 代码
<template> <div id="head"> <!-- 默认:静态定位 --> <div class="insider1"></div> <!-- 三个100x100的盒子,此盒子相对定位,不脱标 --> <div class="insider2"></div> <div class="insider3"></div> </div> </template> <style scoped> .insider1 { /* 可用函数计算高度width: calc(100% - 30px):比父盒子小30px */ width: 100px; height: 100px; background-color: black; } .insider2 { /* 定义相对定位 */ position: relative; /* 距insider2原位置左边线50px */ left: 50px; /* 距insider2原位置顶边线50px */ top:50px; width: 100px; height: 100px; background-color:red; } .insider3 { width: 100px; height: 100px; background-color:yellow; } </style>
1.3 绝对定位(被动常用)
-
功能:元素移动位置,相对他的有相对定位的祖先元素,子绝父相
脱标:跟原位置无关,绝对定位所在的坐标系为最近的具有相对定位的祖先元素 -
效果
-
css代码
#head { /* 绝对定位的祖先盒子需有一个相对定位,否则层层向上,最终以浏览器定位 */ position: relative; } .insider1 { /* 可用函数计算高度width: calc(100% - 30px):比父盒子小30px */ width: 100px; height: 100px; background-color: black; } .insider2 { /* 绝对定位:脱标,后面的会占据绝对定位元素的原位置 */ position: absolute; /* 调整本元素盒子的定位:还有right */ left: 50px; /* 调整本元素盒子的定位:还有bottom */ top:50px; width: 100px; height: 100px; background-color:red; } .insider3 { width: 100px; height: 100px; background-color:yellow; }
1.4 固定定位(常用)
- 功能:以浏览器的可视窗口为坐标系,固定在一个位置
- css写法:
position:fixed;
,用left、right、top、bottom调整位置 - 紧贴版心右侧:
left:50%;margin-left:700px;
,不会随页面缩放失真
1.5 粘性定位
- 功能:页面滚动到预设值,则变为固定定位
- css写法:
position:sticky;top:100px;
二、Flex布局(流行布局)
2.1 基本概念
- 适用范围:手机端和网页端应用最多的布局方式,不支持IE版本小于10的浏览器
- 盒子模型示图
- 轴
- 主轴:main axis ,部件排列方向
- 次轴:cross axis,部件副轴
2.2 flex主选项
2.2.1 主轴方向
-
flex-direction示例
注意:默认第一个,
vertical-align会失效
,注意主轴main axis方向
2.2.2 主轴布局
- justify-content示例
- 功能:调整空隙宽度(父盒子宽度
减去
子盒子宽度之和)分配 - 默认:
justify-content : flex-start
,紫色为背景,黄色为flex-item元素 - 图示
- 功能:调整空隙宽度(父盒子宽度
2.2.3 次轴布局
- align-items示例:
默认:flex-start
适用范围:单行,若存在换行,需用align-content
2.3 综合示例
- CSS书写顺序一般可以按照以下方式组织:
- 布局定位属性:display, position, float, clear, visibility等
- 盒模型属性:width, height, margin, padding, border等
- 字体与文本属性:font, line-height, text-align, text-decoration, text-transform, color等
- 背景属性:background, opacity等
- 其他属性(如:cursor, overflow, z-index, animation等)
在同一组属性中,按照字母顺序排列,这样可以方便查找和修改属性。另外,也可以根据项目需求自定义属性的排序,但应保持一致性以方便维护。
- 效果
- 代码
<template> <div class="about"> <div class="box1">盒子1</div> <div class="box2">盒子2</div> <div class="box3">盒子3</div> </div> </template> <style scoped> .about{ /* 粗调盒子:包括父盒子的定位,子盒子定位的标准 此处声明子元素使用flex布局 */ display: flex; width: 1000px; height: 500px; /* .about盒子为body标签子元素,只能用margin调整定位,top等失效 */ margin: 0 auto; background: grey; /* 强制子元素不换行,即使超出父盒子,默认wrap */ flex-wrap: nowrap; /* 设置主轴及排序 */ flex-direction:row-reverse; /* 水平分配空隙:在子元素宽度都固定情况下 */ justify-content: space-evenly; /* 垂直对齐子元素:不一定总是Y向,跟flex-direction有关 */ align-items:flex-end; /* 文字属性 */ font: 30px/1.5 Arial; color:red; /* 柔性盒子阴影 */ box-shadow: 10px 5px 5px red; border-radius: 2%; } /* 子元素写法:未写的属性可参考父盒子 */ .box1{ /* 子盒子水平向分布: 百分数:占父盒子宽度10%, 整数:子盒子按权重分配 */ flex:0.3; height: 200px; background: #000; } .box2{ flex:0.2; height: 300px; background: #000; } .box3{ flex:0.1; height: 400px; background: #000; /* 此属性优先级更高,单独调子盒子属性垂直居中 */ align-self : center; } </style>