一、多列
1、column-count:设置分栏的个数
2、column-width:设置分栏的宽度
3、column-gap:分栏的间距
4、column-rule:分栏的边框
5、column-span:all/none 设置内容是否横跨所有列
6、column-fill:auto(列高度自适应内容)/balance(所有的列以其中最高的一列为统一)
设置列的高度是否统一
7、break-inside:avoid 避免中断
二、媒体查询
1、语法:@media all(默认值为all,也可以是screen) and (min-width/max-width) {
要改变样式的标签名{
属性名:属性值;
}
}
2、练习:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
section{
display: flex;
}
div:nth-child(1){
width: 700px;
height: 300px;
background: skyblue;
flex-grow: 1;
}
div:nth-child(2){
width: 300px;
height: 300px;
background: greenyellow;
flex-grow: 1;
}
div:nth-child(3){
width: 300px;
height: 300px;
background: pink;
flex-grow: 1;
}
@media screen and (max-width:800px) {
section{
flex-wrap: wrap;
justify-content: space-between;
}
div:nth-child(2),div:nth-child(3){
flex-grow: 0;
width: 240px;
}
}
</style>
</head>
<body>
<section>
<div>1</div>
<div>2</div>
<div>3</div>
</section>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
section{
width: 100%;
height: 800px;
background: gray;
display: flex;
position: relative;
}
section div:nth-child(1){
width: 800px;
height: 100%;
background: skyblue;
}
section div:nth-child(2){
width: 500px;
height: 100%;
background: springgreen;
}
@media screen and (max-width:800px) {
section div:nth-child(2){
position: absolute;
right: 0;
width: 100px;
height: 100px;
}
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
</section>
</body>
</html>