找到父子关系，设置display: flex 弹性布局
确定主轴方向 flex-direction: row 水平 column 垂直
使用flex设置主轴方向的大小 auto项目既可以放大也可以缩小 none 项目不可以缩小 默认值 不会放大，但会缩小 数字
主轴对齐方式 justify-content
侧轴对齐方式 align-items（单行） 默认stretch(不设置高，侧轴会被拉伸)
display:flex布局· 给父盒子设置，父盒子就变成容器，子盒子就变成项目了
flex布局·主轴和侧轴始终保持垂直（项目永远跟随主轴的方向排列）
布局五步（1.找父盒子设置flex布局 2.确定主轴方向flex-direction row水平默认值 column垂直 row-reverse行，从右向左 column-reverse列，从下向上 3.是否要自适应 flex：默认值没有名字不会放大可以缩小 auto可放大也可缩小 none项目不可以缩放 纯数字等比例缩放 4.定义主轴方向 justify-content：center所有项目都居中 flex-start默认值从起点到终点进行排列 flex-end从终点到起点进行排列 space-between空白在相邻项目中间 space-around空白在项目两侧 space-evenly空白在项目两侧 5.侧轴对齐方式：center侧轴方向项目居中 stretch项目不设置高时，项目在侧轴方向被拉满容器 flex-start侧轴方向项目靠近起点 flex-end侧轴方向项目靠近终点）
rem布局：1.将flexible.js通过script标签引入到页面 2.将设计稿尺寸除以2在除37.5
媒体查询：@media 设备类型 and | not | only (设备特性){
css代码
}
link rel="stylesheet" media="设备类型and | not | only (设备特性)"href="xxx.css"
设备类型有 print（打印机） screen（屏幕）
and且 not非 only仅
设备特性 width/宽 max-width最大宽 / min-width最小困 设备高height 设备方向：portrait竖屏模式 landscape横屏模式
媒体查询
<style>
li {
list-style: none;
display: none;
}
@media screen and (max-width:400px) {
li:nth-child(1) {
height: 20px;
font-size: 10px;
background-color: blue;
display: block;
}
}
@media screen and (min-width:400px) and (max-width:600px) {
li:nth-child(2) {
height: 20px;
font-size: 10px;
background-color: pink;
display: block;
}
}
@media screen and (min-width:600px) {
li:nth-child(3) {
height: 20px;
font-size: 10px;
background-color: red;
display: block;
}
}
</style>
</head>
<body>
<ul>
<li>第一个li</li>
<li>第二个li</li>
<li>第三个li</li>
</ul>
</body>
扫一扫
5003
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
