11-弹性布局常见属性+less
1.练习-过度、2d综合案列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 360px;
height: 240px;
border: 1px solid black;
margin: 100px auto;
position: relative;
transition: all 1s;
overflow: hidden;
}
.box:hover {
transform: rotate(360deg);
}
.box::before {
content: '';
width: 0;
height: 160px;
border: 1px solid white;
border-left: none;
border-right: none;
position: absolute;
/* 第一种居中，这种居中方式的过度会从中间往两侧过度。 */
/*left: 0;*/
/*right: 0;*/
/*top: 0;*/
/*bottom: 0;*/
/*margin: auto;*/
/* 第二种居中，第二种居中从左向右过度。 */
/*left: 50%;*/
/*top: 50%;*/
/*margin-left: -160px;*/
/*margin-top: -100px;*/
/* 第三种居中，第三种居中从右向右左过度。 */
right: 50%;
top: 50%;
margin-right: -160px;
margin-top: -80px;
transition: all 1s 1s;
}
.box:hover::before {
width: 320px;
z-index: 1;
}
.box::after {
content: '';
width: 280px;
height: 0;
border: 1px solid white;
border-top: none;
border-bottom: none;
position: absolute;
bottom: 50%;
left: 50%;
margin-left: -140px;
margin-bottom: -100px;
transition: all 1s 1s;
}
.box:hover::after {
height: 200px;
}
.box img {
transition: all 1s;
}
.box:hover img {
transform: scale(1.2);
}
.box h5 {
width: 206px;
height: 40px;
position: absolute;
font-weight: normal;
font-size: 30px;
left: 0;
right: 0;
top: 50px;
margin: 0 auto;
}
.box span {
position: absolute;
text-align: center;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
opacity: 0;
transition: all 1s 1s;
}
.box:hover span {
opacity: 1;
bottom: 50px;
font-weight: 700;
text-shadow: 1px 1px 1px red;
}
</style>
</head>
<body>
<div class="box">
<img src="img/img_01.jpg" alt="">
<h5>HTML5+CSS3</h5>
<span>前端学习笔记</span>
</div>
</body>
</html>
2.弹性元素在侧轴的位置分布(整体分布)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box1 {
width: 1000px;
height: 600px;
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
/*
1 align-content设置弹性元素在侧轴的整体位置。
stretch，默认值。在换行时，弹性元素没有设置宽度和高度时：如果主轴是水平方向,
则宽度是内容撑开的，高度和当前行的高度一样；如果主轴是垂直方向时，高度是内容撑
开的，宽度和当前行的宽度一样。
flex-start，如果有换行，则居侧轴的上；如果没有设置高度，则高度是内容的高度。
center，如果有换行，则居侧轴的中间；如果没有设置高度，则高度是内容的高度。
flex-end，如果有换行，则居侧轴的下；如果没有设置高度，则高度是内容的高度。
space-around，元素包裹空间，元素距离出开头和结束等分；如果没有设置高度，则高度是内容的高度。
space-between，空间包裹元素；如果没有设置高度，则高度是内容的高度。
space-evenly，元素包裹空间，元素距离等分；如果没有设置高度，则高度是内容的高度。
2 当align-items和align-content同时存在时，align-items失效。
*/
align-content: stretch;
}
.box1 div {
width: 400px;
height: 100px;
background: red;
}
.box1 div:nth-of-type(2) {
background: orange;
}
.box1 div:nth-of-type(3) {
background: pink;
}
.box1 div:nth-of-type(4) {
background: gray;
}
.box1 div:nth-of-type(5) {
background: green;
}
</style>
</head>
<body>
<div class="box1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
3.弹性元素在侧轴的位置分布(设置个人的当前行位置)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box1 {
width: 1000px;
height: 600px;
border: 1px solid red;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.box1 div {
width: 400px;
height: 100px;
background: red;
}
.box1 div:nth-of-type(2) {
background: orange;
/*
1 align-self个人(子元素)在当前行的位置。
flex-start，当前元素居当前行的上。
center，当前元素居当前行的中。
flex-end，当前元素居当前行的下。
stretch，默认值，当前元素居当前行的上。
*/
align-self: flex-start;
}
.box1 div:nth-of-type(3) {
background: pink;
}
.box1 div:nth-of-type(4) {
background: gray;
}
.box1 div:nth-of-type(5) {
background: green;
}
</style>
</head>
<body>
<div class="box1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
4.弹性元素在主轴的份数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box1 {
width: 1000px;
height: 600px;
border: 1px solid red;
display: flex;
flex-direction: row;
}
.box1 div {
background: red;
/*
1 flex-grow设置弹性元素在主轴的份数。
2 在没有设置宽度的时候，可以通过给弹性元素设置flex-grow来将当前行平分。
*/
flex-grow: 1;
}
.box1 div:nth-of-type(2) {
background: orange;
}
.box1 div:nth-of-type(3) {
background: pink;
}
.box1 div:nth-of-type(4) {
background: gray;
}
.box1 div:nth-of-type(5) {
background: green;
}
</style>
</head>
<body>
<div class="box1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
5.弹性元素在主轴的排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box1 {
width: 1000px;
height: 600px;
border: 1px solid red;
display: flex;
flex-direction: row;
}
.box1 div {
width: 400px;
height: 100px;
background: red;
}
.box1 div:nth-of-type(2) {
background: orange;
/*
1 默认弹性元素在主轴的排序顺序为标签书写的顺序。
2 可以通过设置order来改变弹性元素在主轴的顺序。
3 可以将order的默认值理解为0，order越大则当前弹性元素越靠后；
当order相等时，则是按照书写顺序排列。
*/
order: 1;
}
.box1 div:nth-of-type(3) {
background: pink;
}
.box1 div:nth-of-type(4) {
background: gray;
}
.box1 div:nth-of-type(5) {
background: green;
}
</style>
</head>
<body>
<div class="box1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
6.弹性元素的压缩率(收缩因子)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 400px;
height: 200px;
display: flex;
}
.box div {
/*
1 flex-shrink弹性元素的压缩率(收缩因子)，默认值为1。
2 当flex-shrink为0时，表示不进行压缩。即使弹性元素超过父元素的
宽度也不会进行压缩。
*/
/*flex-shrink: 0;*/
}
/*
3 压缩后宽的计算。先计算每份压缩的数值。
每份压缩的数值=超出父元素的宽度(200*3-400=200)/总份数(1+2+3=6)=33.33
元素剩余的宽度=自身宽度-每份压缩的数值*压缩份数。
*/
.one {
width: 200px;
height: 200px;
background: red;
/* 元素剩余的宽度=自身宽度(200)-每份压缩的数值(33.33)*压缩份数(1)=166.66 */
flex-shrink: 1;
}
.two {
width: 200px;
height: 200px;
background: gray;
/* 元素剩余的宽度=自身宽度(200)-每份压缩的数值(33.33)*压缩份数(2)=133.34 */
flex-shrink: 2;
}
.three {
width: 200px;
height: 200px;
background: pink;
/* 元素剩余的宽度=自身宽度(200)-每份压缩的数值(33.33)*压缩份数(3)=100 */
flex-shrink: 3;
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
7.less简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
1 less是css预处理文件，即会先将less编译为css之后，运行css文件。
2 less在css语法的基础上，增加了报错、数字运算、变量和函数。
-->
<link rel="stylesheet" type="text/css" href="css/one.css"/>
</head>
<body>
<div class="box1">
<h1>123</h1>
<h2>456</h2>
</div>
<div class="box2 one">123</div>
</body>
</html>
.box1 {
// less中的单行注释。
/* less中的多行注释。 */
/* less中可以进行计算。 */
width: 100+100px;
height: 100px+100px;
background: red;
/* 元素嵌套写法。编译为css之后就是.box1 h1 {...} */
h1 {
color: orange;
}
/* &表示父级，表示.box1，编译为css之后就是.box1 h2{ ... } */
& h2 {
color: pink;
}
}
.box2 {
/* 编辑为css就是.box2.one。 */
&.one {
font-size: 40px;
}
}
8.em单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.box {
width: 100px;
height: 100px;
background: pink;
/* 1em表示当前一个字号的大小。 */
text-indent: 1em;
}
</style>
</head>
<body>
<div class="box">box</div>
</body>
</html>
9.rem单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
html {
font-size: 100px;
}
/*
1 1rem等于html元素中一个字号的大小。
*/
.box {
/* 1rem=100px*1=100px */
width: 1rem;
height: 100px;
background: pink;
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
box
</div>
</body>
</html>
10.浏览器识别的最小字号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*
1 2020之前浏览器识别的最小字号是12px，如今浏览器识别的最小
字号是1px。
2 相对于谷歌浏览器82版本之后识别的最小字号就是1px。
*/
.box {
width: 100px;
height: 100px;
background: pink;
font-size: 12px;
}
</style>
</head>
<body>
<div class="box">
文本
</div>
默认字体大小16px
</body>
</html>
11.视口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
1 视口，可视化窗口。在PC端，视口就是浏览器窗口大小；移动端浏览器默认是
屏幕大小，视口在移动端就是浏览器屏幕大小。
2 移动设备出厂默认视口的宽度是980px。
3 苹果公司提出，将手机视口的宽度设置和屏幕宽度一样。
4 物理分辨率表示显示分辨率；逻辑分辨率表示屏幕的像素尺寸。
-->
<!--
5 重新定义视口。设置视口的宽度和屏幕的宽度一致。width=device-width，宽度等于设置宽度；
initial-scale=1.0表示不进行等比例缩放。
定义视口快捷键 meta:vp tab
-->
<!-- 6 如果没有定义视口，则在移动端body的宽度默认时980px；如果定义了视口，则body的宽度为屏幕宽度。 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
</body>
</html>
12.vw单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.box1 {
/*
1 1vw等于当前屏幕宽度的1%；100vw等于当前屏幕的宽度。
2 px和vw的单位换算。在750px屏幕下，1vw等于7.5px，100vw等于750px。
通过1vw等于7.5px可以计算出，1px等于0.13333vw，60px=60*0.13333vw=8vw
*/
width: 50vw;
height: 50vw;
background: red;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
13.vw单位和rem单位结合less
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/two.css">
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
.box1 {
/*
1 直接使用vw适配，即不论浏览器屏幕变化总是占用8%(60*0.1333vw=8vm)。
注：0.1333vw是750px屏幕下的1px。当拿到UI图时，UI图宽是750px，就可以
使用60*0.1333vw表示60px宽的盒子。
*/
width: 60*0.1333vw;
height: 8vw;
background: red;
}
html {
/*
3 在html中写font-size: 0.1333vw;会有版本兼容问题。因为2020之前浏览器识别的
最小字体是12px。即如果是750px的屏幕，font-size=0.1333vw，就是font-size=12px，
当设置width为60rem后，width就是60*12=750px，即宽度会充满整个屏幕。
*/
//font-size: 0.1333vw;
/*
4 2020之前最小字体是12px的解决方法。将font-size=0.1333vw扩大40倍，font-size为
5.33332vm，然后将width缩小40倍。
注：扩大40倍的原因：750px的屏幕1px=0.1333vw；375px屏幕0.5px==0.1333vw。
375px的屏幕基本上就是移动端最小的屏幕了。0.5px扩大30倍后是15px，兼容更低浏览器识别
的最小字体是16px，所以使用扩大40倍后是20px。
*/
font-size: 5.33332vw;
}
.box2 {
/*
2 可以使用rem单位来避免写width: 60*0.1333vw;。
1rem表示html中一个字体的大小的像素值。即width=60rem=60rem*0.1333vw=8vw。
*/
width: 60/40rem;
height: 8vw;
background: green;
}
14.移动端练习
- index.html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.css" />
</head>
<body>
<header class="header">
<i class="fa fa-bars"></i>
<span>我要学前端</span>
<i class="fa fa-search"></i>
</header>
<div class="banner">
<ul>
<li>
<a href="#">
<img src="img/banner.jpg">
</a>
</li>
</ul>
</div>
<div class="list01">
<ul>
<li>
<a href="#">
<i class="fa fa-book"></i>
<span>我的课程</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-star"></i>
<span>明星教师</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-bookmark"></i>
<span>我的订阅</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-download"></i>
<span>我的下载</span>
</a>
</li>
</ul>
</div>
<div class="tit">
<h3>最新的课程</h3>
<span>更多+</span>
</div>
<div class="list02">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
- reset.css。
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
display: block;
text-decoration: none;
}
img {
/* 处理图片底部留白问题。 */
display: block;
}
h3 {
font-weight: normal;
}
- index.less。
body{
/* 设置主题色。 */
background: #eff0f4;
}
html,body{
height: 3000px;
}
html{
/*
设置全局字体大小。
750px屏幕，1px=0.13333vw；375px屏幕，1px=0.26666vw，0.5px=0.13333vw。
5.33332vw为0.13333vw扩大40倍的结果，即在375px屏幕下20px=5.33332vw
*/
font-size: 5.33332vw;
}
body{
/* 通过给body设置左右30px的内边距来让版心居中。 */
padding: 0 (30/40rem);
}
.header {
height: (175/40rem);
color: #999;
/* 开启弹性布局。 */
display: flex;
/* 设置主轴为内容包裹元素。 */
justify-content: space-between;
/* 设置侧轴居中。 */
align-items: center;
span {
color: #24253d;
font-size: 1.25rem
}
}
.banner img {
width: 100%;
}
.list01 {
height: (244/40rem);
margin-top: 1rem;
}
.list01 ul {
height: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-content: space-between;
li {
width: (327/40rem);
height: (104/40rem);
background: yellow;
line-height: (104/40rem);
border-radius: (13/40rem);
a {
display: block;
color: #fff;
background-image: linear-gradient( to left, rgb(249,112,83) 56%, rgb(244,120,102) 100%);
box-shadow: 0 5px 8px 0 rgba(187, 187, 187, 0.42);
border-radius: (13/40rem);
i {
margin-left: (36/40rem);
margin-right: (25/40rem);
}
span {
font-size: (30/40rem);
}
}
}
}
.list01 ul li:nth-of-type(2) a {
background-image: linear-gradient( to left, rgb(198,87,255) 56%, rgb(212,132,253) 100%);
}
.list01 ul li:nth-of-type(3) a {
background-image: linear-gradient( to left, rgb(255,57,113) 56%, rgb(254,73,124) 100%);
}
.list01 ul li:nth-of-type(4) a {
background-image: linear-gradient( to left, rgb(29,146,255) 56%, rgb(27,201,251) 100%);
}
.tit {
height: (118/40rem);
display: flex;
justify-content: space-between;
align-items: center;
h3 {
color:#24253d;
font-size: (33/40rem);
border-left: (3/40rem) solid #3a84ff;
padding-left: (17/40rem);
}
span {
font-size: (28/40rem);
color:#656565;
}
}
.list02 {
height: (323/40rem);
/* 超出父元素显示滚动条，保证滚动时当前屏幕不会移动。 */
overflow: scroll;
}
.list02 ul {
width: (2083/40rem);
height: 100%;
display: flex;
background: yellow;
justify-content: space-between;
li {
width: (328/40rem);
height: 100%;
background: #fff;
}
}
15.fontawesome图标字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--
1 fontawesome图标字体网站，https://fontawesome.com.cn/。
-->
<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" />
</head>
<body>
<!--
1 fontawesome图标字体的使用。先使用fa；然后再选择不同的图标，如fa-plane；
然后再设置图标的大小，如fa-2x。
-->
<!-- 不同大小的飞机图标。 -->
<i class="fa fa-plane"></i>
<i class="fa fa-plane fa-2x"></i>
<i class="fa fa-plane fa-3x"></i>
<i class="fa fa-plane fa-4x"></i>
<i class="fa fa-plane fa-5x"></i>
</body>
</html>
浙公网安备 33010602011771号