css3布局

目录

一、移动端自适应

二、CSS3 弹性盒子

1. 弹性盒子的基础知识

2. 弹性布局的属性

三、CSS3 多媒体查询

1. 媒体查询的基本知识

2. CSS3 多媒体类型

3. 媒体查询的实例（根据同的屏幕尺寸，加载不同的css外部文件）

(1)单条件媒体查询

(2) 双条件媒体查询

四、CSS3 多列属性

 五、CSS 选择器

---

​​​​​​​

一、移动端自适应

• 移动端适配标签  meta
• 等比例的伸缩方式

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=3.0,user-scalable=no"/>

其中， viewport  视口， width=device-width--宽等于屏幕的宽，minimum-scale=1.0--最小伸缩比例，maximum-scale=3.0--最大伸缩比例，user-scalable=no--禁止用户缩放。

• 移动端使用自适应布局时  像素单位建议使用rem和em。

二、CSS3 弹性盒子

1. 弹性盒子的基础知识

• 弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。
• 弹性盒子由容器和子元素构成(类似table表格布局)

2. 弹性布局的属性

• 注：flex-wrap: wrap; align-content:space-between;这两个元素一般是搭配使用的。

三、CSS3 多媒体查询

1. 媒体查询的基本知识

• 媒体查询就是根据不同的设备加载不同的代码
• 解决的问题主要时不同分辨率的设备之间的差异 （根据不同写css，或者根据不同写不同的网页布局）

2. CSS3 多媒体类型

3. 媒体查询的实例（根据同的屏幕尺寸，加载不同的css外部文件）

(1)单条件媒体查询

• min时，小-->大

@media screen and (min-width:768px){
   .box{
      background-color: orangered;
     }
}
@media screen and (min-width:1024px){
   .box{
      background-color: deeppink;
     }
}
@media screen and (min-width:1280px){
   .box{
      background-color: blue;
     }
}
@media screen and (min-width:1440px){
    .box{
       background-color: red;
      }
}

•  max时，大-->小

@media screen and (max-width:1680px){
    .box{
        background-color: blanchedalmond;
       }
}
@media screen and (max-width:1440px){
    .box{
        background-color: red;
       }
}
@media screen and (max-width:1280px){
    .box{
        background-color: blue;
       }
}
@media screen and (max-width:1024px){
    .box{
        background-color: deeppink;
       }
}
@media screen and (max-width:768px){
    .box{
        background-color: orangered;
       }
}

(2) 双条件媒体查询

@media screen and (min-width: 1440px) and (max-width: 1680px) {
    .box{
       background-color: blanchedalmond;
     }
}
@media screen and (min-width: 1280px) and (max-width: 1440px) {
    .box{
       background-color: red;
     }
}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
    .box{
       background-color: blue;
     }
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .box{
       background-color: deeppink;
     }
}
@media screen and (max-width: 768px) {
    .box{
       background-color: #37ff8d;
     }
}

​​​​​​​四、CSS3 多列属性

 五、CSS 选择器

• 常见的css选择器