Flex

弹性盒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 800px;
            border: 10px red solid;
            display: flex;

            /* 
                flex-direction指定容器中弹性元素的排列方式
                    可选值
                        row 默认值 ,弹性元素在容器中水平排列(左向右)
                        row-reverse 弹性元素在容器中反向水平排列(右向左)
                        Column 弹性元素纵向排列(自上向下)
                        column-reverse 弹性元素反向纵向排列(自下向上)
                 
                    主轴:
                        弹性元素的排列方向称为主轴
                    侧轴:
                        与主轴垂直方向的称为侧轴
                */
            flex-direction: column;      
          }

        li{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            /* 
                弹性元素的属性
                    flex-grow指定弹性元素的伸展的系数
                    -当父元素有多余的空间时,子元素如何伸展
                    -父元素的剩余空间,会按照比例进行分配
                    flex-shrink指定弹性元素的收缩系数
                    -当父元素中的空间不足以容纳所有的子元素时,就会对子元素进行收缩
             */
             /* flex-grow: 1; */
             flex-shrink: 0;
        }

        li:nth-child(2){
            background-color: pink;

        }

        li:nth-child(3){
            background-color: orange;
        }

    </style>
</head>
<body>
    <!-- 
        flex(弹性盒,伸缩盒)
            -是css中的又一种布局手段,它主要用来代替浮动来完成页面的布局
            -flex可以使元素具有弹性,让元素跟随页面的大小改变而改变
            -弹性容器
                -要使用弹性盒,必须先将一个元素设置为弹性容器
                -我们通过display来设置弹性容器
                    display:flex 设置为块级的弹性容器
                    display:inline-flex设置为行内的弹性容器
            -弹性元素
                -弹性容器的子元素是弹性元素(弹性项)
                -一个元素可以同时是弹性容器和弹性元素
     -->
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
</body>
</html>

弹性容器的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 800px;
            border: 10px red solid;
            display: flex;
            /* flex-direction: column;       */
            /* 
             flex-wrap :
                    设置弹性元素是否在弹性容器中自动换行
                    可选值
                        newwrap 默认值 元素不会自动换行
                        wrap 元素沿着辅轴方向自动换行
                        wrap-reverse 元素沿着辅轴方向反方向自动换行
                        
                flex-flow :wrap和direction的简写属性

                justify-content
                    -如何分配主轴上的空白空间(主轴上的元素如何排列)
                    -可选值
                        flex-start元素沿着主轴起边排列
                        flex-end 元素沿着主轴中变排列
                        center 元素居中排列
                        space-around 空白分布到元素的两侧
                        space-between 空白均匀分布到元素中间
                        space-evenly 空白分布到元素的单侧

                align-items:
                    -元素在辅轴上如何对齐
                    -元素间的关系
                        -可选值:
                            stretch默认值 将元素的长度设置为相同的值
                            flex-start 元素不会拉伸,沿着辐轴起边对齐
                            flex-end 沿着辐轴的终边对齐
                            center 居中对齐
                            baseline 基线对齐

                align-content 辅轴空白空间的分布
                align=self 用来覆盖当前元素上的align-items
            */
          
          }

        li{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
           
        }

        li:nth-child(2){
            background-color: pink;

        }

        li:nth-child(3){
            background-color: orange;
        }

    </style>
</head>
<body>
   
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
</body>
</html>

弹性元素的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul{
            width: 800px;
            border: 10px red solid;
            display: flex;
          
          }

        li{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;

            /* 弹性的增长系数 */
            /* flex-grow: 1; */

            /* 
            弹性元素的缩减系数
                - 缩减系数的计算方式比较复杂
                - 缩减多少是根据缩减系数和元素大小来计算的
            */
            flex-shrink: 1;

            /* 
            元素的基础长度
                指定元素在主轴上的基础长度
                如果主轴是横向的,则该值指定的是元素的宽度
                如果主轴是纵向的,则该值指定的是元素的高度
                -默认值 auto 表示参考元素自身的高度或宽度
                -如果传递了一个具体的数值,则以该值为准    
            
            */
            flex-basis:auto;
            /* 
            flex可以设定弹性元素所有的三个样式
                flex 增长 缩减 基础;
                    initial “flex 0 1 auto"
                    auto "flex 1 1 auto"
                    none"flex 0 0 auto"元素没有弹性
            */
            
            /* 
                order 决定元素的排列顺序
            */
           
        }

        li:nth-child(2){
            background-color: pink;

        }

        li:nth-child(3){
            background-color: orange;
        }

    </style>
</head>
<body>
   
     <ul>
         <li>1</li>
         <li>2</li>
         <li>3</li>
     </ul>
</body>
</html>

像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <!-- 
            像素
                -屏幕是由一个一个发光的小点构成的,这一个一个小点就是像素
                -分辨率 1920*1080 说的就是屏幕中小点的数量
                -在前端开发中,像素分两种情况:css像素和物理像素
                -物理像素:上述所说的小点点就是物理像素
                -css像素:编写网页时,我们所用的像素就是css像素
                    -浏览器在显示网页时,需要将css像素转换为物理像素然后再显示
                    -一个css像素最终由几个物理像素显示,由浏览器决定,默认情况下在pc端,一个css像素=一个物理像素

            视口(viewport)
                -视口就是屏幕中用来显示网页的区域
                -可以通过查看视口的大小,来观察csss像素和物理像素的比值
                -默认情况下:
                    视口宽度 :1920px(css像素)
                              1920px(物理像素)
                              1:1
                    物理像素永远不会改变

     -->
</body>
</html>

移动端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            width: 900px;
            height: 100px;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <!-- 
        在不同的屏幕中,单位像素的大小是不同的,像素越小屏幕会越清晰
        智能手机的像素点 远远小于计算机的像素点
        默认情况下,移动端的网页都会将视口设置为980像素(css像素)
            以确保pc段的网页可以在移动端正常访问,但如果网页宽度超过了980,
                移动端的浏览器会自动对网页进行缩放以完整显示网页

        所以基本上大部分的pc端网站都可以在移动端中正常浏览,但往往都不会有一个好的体验
            为了解决这个问题,大部分网站都会为移动端专门设计一个网页
     -->
     <div class="box1"></div>
</body>
</html>

移动端的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 设置视口大小  device-width表示设备的宽度(完美视口)-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!--
        移动端默认的视口大小是980px(css像素)
            默认情况下,移动端的像素比就是980/移动端宽度
            如果我们直接在网页中编写移动端代码,这样在980的视口下,像素比是非常不好的,
                导致网页中的内容非常非常小
            编写移动页面时,必须要确保有一个比较合理的像素比:
                1css像素对应2个物理像素
                1css像素对应3个物理像素

            - 可以通过mata标签来设置视口大小

            -每一款移动设备设计时,都会有一个最佳的像素比
                一般我们只需要将像素比设置为该值即可以得到一个最佳效果
                将元素设置为最佳像素比的视口大小我们称其为完美视口

            将网页的视口设置为完美视口
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            
            结论 以后再写移动端的页面,就把上面这个先写上

     -->
    <div class="box1"></div>
</body>
</html>

视口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 100vw;
            height: 100px;
            background-color: #bfa;
        }
    </style>
</head>
<body>
    <!-- 
        不同的设备,完美视口大小不一样

        由于不同设备视口和像素比不同,所以同样的375个元素在不同设备下意义是不一样的
        所以在移动端开发时,就不能再使用px来进行布局了

        vw是一个css单位,表示视口的宽度(viewport width)
            - 100vw =一个视口的宽度
            - 1vw=1%视口的宽度

            vw这个单位永远相当于视口的宽度进行计算
     -->
     <div class="box1"></div>
</body>
</html>

vw适配

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            /*
                 网页中字体大小最小是12px,不能设置比12 像素还小的字体 
                    如果我们设置了一个小于12像素的字体,则字体自动设置为12像素
                
            */
            font-size: 100px;
        }

        .box1{
            /* 
            rem
                1rem=1html的字体大小 */
            width: 6.4vw;
            height: 4.667vw;
            background-color: #bfa;

        }
    </style>
</head>
<body>
    <!-- 
        48x35
     -->
     <div class="box1"></div>
</body>
</html>

响应式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        使用媒体查询
            语法:@media 查询规则{}
            媒体类型:
                all 所有设备
                print 打印机
                screen 带屏幕的设备
                speech 屏幕阅读器
                -可以使用,连接多个媒体类型,这样他们之间就是一个或的关系

            可以在媒体类型前添加一个only,表示只有。
                only的使用主要是为了兼容一些老版本的浏览器
        */
     /* @media screen{
         body{
          background-color: red;
         } */
         @media only screen{
         body{
          background-color: red;
         }
      }
    </style>
</head>
<body>
    <!-- 
        响应式布局
            -网页可以根据不同的设备或窗口大小呈现不同效果
            -使用响应式布局,可以使一个网页适用于所有设备
            -响应布局的关键就是媒体查询
            -通过媒体查询,可以为不同的设备,或设备不同状态来分别设置样式
     -->
</body>
</html>

媒体查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            媒体特性:
                width 视口的宽度
                height 视口的高度

                min-width视口的最小宽度(视口大于指定宽度时生效)
                max-width 视口的最大宽度(视口小于指定宽度时生效)
        */
        @media( min-width:500px),(max-width:700px){
            body{
                background-color: #bfa;
            }
            /* 
                样式切换的分界点,我们称其为断电,也就是网页的样式会在这个点发生变化
                    一般比较常用的断点

                小于768 超小屏幕 max-width=768px
                大于768 小屏幕 min-width=768px
                大于992 中型屏幕 min-width=992px
                大于1200 大屏幕 min-width=1200px
            */
        }
    </style>
</head>
<body>
    
</body>
</html>

Q.E.D.