columns多列(瀑布流)
columns:复合属性设置列的宽度和列数
column-width:指定列的宽度
column-count: 指定元素应该被分割的列数。
column-gap:指定列与列之间的间隙
column-rule:复合属性(简写)设置列之间的边框样式
column-rule-width:指定两列间边框的厚度
column-rule-style:指定两列间边框的样式
column-rule-color:指定两列间边框的颜色
column-fill:指定如何填充列(列的高度是否统一)
column-span:指定元素要跨越多少列示列
div{
column-count:3;
column-gap:15px;
column-rule:1px solid #ccc;
}
- 媒体查询(响应式)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>响应式</title>
<!-- 外部引入样式 -->
<!-- <link rel="stylesheet" media="(min-width:639px)" type="text/css" href=""> -->
<style type="text/css">
@media screen and (max-width:639px){
body{background-color:green};
}
@media screen and (min-width:639px) and (max-width:1000px){
body{background-color:#FF9799};
}
@media screen and (min-width:1000px){
body{background-color:#66D9D1};
}
ul{
list-style:none;
padding-left:0px;
display:flex;
flex-direction:row;
}
li:nth-child(1){
background:#39ADD1;
}
li:nth-child(2){
background:#3079AB;
}
li:nth-child(3){
background:#982551;
}
li:nth-child(4){
background:#E15258;
}
li:nth-child(5){
background:#CC6699;
}
li:nth-child(6){
background:#52AC43;
}
li{
text-align:center;
width:100%;
height:40px;
line-height:40px;
}
@media screen and (max-width:768px){
ul{
display:flex;
flex-wrap:wrap;
}
li{
width:50%;
}
}
@media screen and (max-width:480px){
ul{
display:flex;
flex-direction:column;
}
li{
width:100%;
}
}
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>Sass</li>
<li>Ruby</li>
<li>Mongo</li>
</ul>
</body>
</html>