目录
1. 单位
2.流式布局
3.弹性布局(flex)
4.网格布局
5.渐变
6.变形与过渡
1. 单位
- px: 绝对单位 像素
- em: 相对单位 基准点为父节点字体大小 若自身定义了font-size按自身来计算(一般浏览器默认16px)
- rem: 相对单位 相对根节点html的字体大小, css3新增属性, 根元素相对设备尺寸自动变换,Chrome/firefox/ie9+支持
- 注意: Chrome强制最小字体为12px, 当html的字体大小设置为10px时, 显示12px, rem计算还是以12px为准
宽高:
- vw/vh: viewpoint width/height, 视窗的宽/高度, 1vw/vh 等于视窗宽度的1%
- vmin/vmax: vw和vh中较小/大的那个
- vw兼容性: ie9-11,opera浏览器不支持
2.流式布局
- 一种等比例缩放布局方式, 在CSS代码中使用百分比来设置宽度, 也称百分比自适应的布局
- 实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下: 目标元素宽度 / 父盒子宽度 = 百分数宽度
<style type="text/css">
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 10vh;
background-color: rgb(250, 223, 223);
}
nav{
height: 5vh;
background-color: rgb(244, 197, 197);
}
section{
overflow: hidden;
}
main{
float: right;
width: 80%;
height: 80vh;
background-color: rgb(235, 175, 175);
}
aside{
float: left;
width: 15%;
height: 80vh;
background-color: rgb(248, 164, 164);
}
footer{
height: 5vh;
background-color: rgb(249, 161, 161);
}
</style>
<body>
<!-- 流式布局
一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。
实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下: 目标元素宽度 / 父盒子宽度 = 百分数宽度-->
<header>header</header>
<nav>nav</nav>
<section>
<main>main</main>
<aside>aside</aside>
</section>
<footer>footer</footer>
</body>3.弹性布局(flex)
- 采用flex布局的元素, 为 flex容器
- display属性: flex(块级flex容器)或 inline-flex(类似 inline-block的行内块级flex容器)
- 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
- 项目(子元素)默认沿主轴排列
- 当一个元素设置了Flex布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效
<style type="text/css">
.main{
/* width: 700px; */
height: 700px;
background-color: rgb(246, 133, 133);
/* flex布局 弹性布局
采用flex布局的元素, 为 flex容器
display属性: flex(块级flex容器)或 inline-flex(类似 inline-block的行内块级flex容器)
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
项目(子元素)默认沿主轴排列
当一个元素设置了Flex布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效
*/
display: flex;
/* 主轴项目排列方式 默认row从左往右 */
flex-direction: row ; /* row-reverse 水平方向从右往左 column沿垂直方向从上到下 column-reverse沿垂直方向从下到上*/
/* 换行方式 */
flex-wrap: wrap; /* 默认nowrap不换行 wrap换行 */
/* 排列及换行简写 */
/* flex-flow: column wrap; */
/* 元素主轴对齐方式 */
/*
flex-start 默认值，左对齐
flex-end 右对齐
center 居中
space-between 两端对齐，项目之间的间隔是相等的
space-around 每个项目两侧的间隔相等
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值
*/
justify-content: space-between;
/* 元素侧轴(纵轴)对齐方式 */
/*
stretch 默认值，项目将被拉伸以适合容器
center 项目位于容器的中央
flex-start 项目位于容器的顶部
flex-end 项目位于容器的底部
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值
*/
align-items: center;
/* 与justify-content属性类似 在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式 */
/*
stretch 默认值，将项目拉伸以占据剩余空间
center 项目在容器内居中排布
flex-start 项目在容器的顶部排列 (如果翻转换行, 则底部对齐 )
flex-end 项目在容器的底部排列
space-between 多行项目均匀分布在容器中，其中第一行分布在容器的顶部，最后一行分布在容器的底部
space-around 多行项目均匀分布在容器中，并且每行的间距（包括离容器边缘的间距）都相等
initial 将此属性设置为属性的默认值
inherit 从父元素继承该属性的值
*/
/* align-content: center; */
}
.main div{
width: 250px;
height: 250px;
background-color: rgb(238, 172, 172);
}
.main div:first-child{
/* 设置项目在容器中出现的顺序 默认为 0*/
order: 0;
/* 为某个项目设置不同于其它项目的对齐方式,可以覆盖 align-items 属性的值*/
/*
auto 默认值，表示元素将继承其父容器的 align-items 属性值，如果没有父容器，则为“stretch”
stretch 项目将被拉伸以适合容器
center 项目位于容器的中央
flex-start 项目位于容器的顶部
flex-end 项目位于容器的底部
baseline 项目与容器的基线对齐
initial 将此属性设置为属性的默认值
inherit 从父元素继承属性的值
*/
align-self: auto;
/* flex-grow、flex-shrink 和 flex-basis 三个属性的简写 */
/*
flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0；
flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1；
flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值） 或者以具体的值加 "%"、"px"、"em" 等单位的形式。
另外，flex 属性还有两个快捷值，分别为 auto（1 1 auto）和 none（0 0 auto
*/
flex: 1; /* 可设置占多少份 */
}
</style>
4.网格布局
display: grid;
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div.gridCls {
display: grid;
/* 设置每一列的宽度 fr占几份 */
grid-template-columns: 1fr 2fr 2fr 1fr;
/* 设置每一行的高度 */
grid-template-rows: 200px 100px;
}
div.gridCls div {
background-color: rgb(240, 178, 178);
text-align: center;
padding: 20px;
border: 2px solid rgb(239, 239, 161);
}
</style>5.渐变
<style>
div{
width: 500px;
height: 200px;
border: 1px solid bisque;
}
div.div1{
/* 线性渐变 */
background-image: linear-gradient(to right, pink, skyblue, rgb(243, 243, 177));
}
div.div2{
/* 对角线渐变 */
background-image: linear-gradient(to top right, pink, skyblue, rgb(243, 243, 177));
}
div.div3{
/* 角度渐变 水平线与渐变线之间的角度, 逆时针计算 */
background-image: linear-gradient(175deg, pink, skyblue, rgb(243, 243, 177));
}
div.div4{
/* 重复性线性渐变 百分比 确定重复多少次*/
background-image: repeating-linear-gradient(75deg, pink, skyblue, rgb(243, 243, 177) 25%);
}
div.div5{
/* 径向渐变 默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落） */
background-image: radial-gradient(circle at 40px, pink 20%, skyblue 60%, rgb(243, 243, 177) 20%)
}
</style>放一个效果图叭(其实我是想拥有一封面嘿嘿嘿~~~)
6.变形与过渡
2D时,通常设置x,y轴两个方向的变化.
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
div:hover{
width: 400px;
/* 移动 */
transform: translate(0, 200px);
/* 旋转 */
transform: rotate(30deg);
/* 放大或缩小 */
transform: scale(2,3);
/* 倾斜 */
transform: skew(30deg, 50deg);
/* 过渡 */
transition: transform 2s, width 4s; /* 转换效果, 2s内完成, 宽度变化4s完成*/
}
</style>PreviousNotes:
https://mp.csdn.net/mp_blog/creation/editor/124712091
![[普及练习场]失踪的7](https://img-blog.csdnimg.cn/c725ff95ac704efd868df586f3cff1a0.png)
