css和html第四部分

/* 弹性容器 */
        /* flex(弹性盒、伸缩盒)
            - 是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局
            - flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变
            - 弹性容器
                - 要使用弹性盒，必须先将一个元素设置为弹性容器
                - 我们通过 display 来设置弹性容器
                    display:flex  设置为块级弹性容器
                    display:inline-flex 设置为行内的弹性容器

            - 弹性元素
                - 弹性容器的子元素是弹性元素（弹性项）
                - 弹性元素可以同时是弹性容器
         */
            ul{
            width: 500px;
            border: 10px red solid;
            /* 将ul设置为弹性容器 */
            display: flex;

                    /* 
                    flex-direction 指定容器中弹性元素的排列方式
                        可选值：
                            row 默认值，弹性元素在容器中水平排列（左向右）
                                - 主轴 自左向右
                            row-reverse 弹性元素在容器中反向水平排列（右向左）
                                - 主轴 自右向左
                            column 弹性元素纵向排列（自上向下）
                            column-reverse 弹性元素方向纵向排列（自下向上）

                        主轴：
                            弹性元素的排列方向称为主轴
                        侧轴：
                            与主轴垂直方向的称为侧轴

                    */

                    flex-direction: row;
                }

                li{
                    width: 200px;
                    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(1){
                    flex-grow: 0;
                    flex-shrink: 1;
                }

                li:nth-child(2){
                    background-color: pink;
                    /* flex-grow: 2; */
                    flex-shrink: 2;
                }

                li:nth-child(3){
                    background-color: orange;
                    /* flex-grow: 3; */
                    flex-shrink: 3;
                }




                ul{
            width: 800px;
            border: 10px red solid;
          /* 设置ul为弹性容器 */
            display: flex;
                    flex-direction: column;
                    flex-wrap: wrap;
            /* flex-direction: column; */

            /* flex-wrap: 
                设置弹性元素是否在弹性容器中自动换行
                可选值：
                    nowrap 默认值，元素不会自动换行
                    wrap 元素沿着辅轴方向自动换行
                    wrap-reverse 元素沿着辅轴反方向换行
            */

            /* flex-wrap: wrap-reverse; */

            /* flex-flow:  wrap 和 direction 的简写属性 */
            /* flex-flow: row wrap; */


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

            */
            /* justify-content: center; */

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

             /* justify-content: center; */
             align-items: flex-start;


             /* align-content: 辅轴空白空间的分布 */
             align-content: space-between;
        }

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


            
        }
        li:nth-child(1){
            /* align-self: 用来覆盖当前弹性元素上的align-items */
            align-self: stretch;
        }
        /* li:nth-child(1){
        } */

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

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





        ul{
            width: 900px;
            border: 10px red solid;
            /* 设置弹性盒 */
            display: flex;
        
        }

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

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

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

            /* 
                元素基础长度

                flex-basis 指定的是元素在主轴上的基础长度
                    如果主轴是 横向的 则 该值指定的就是元素的宽度
                    如果主轴是 纵向的 则 该值指定的是就是元素的高度
                    - 默认值是 auto，表示参考元素自身的高度或宽度
                    - 如果传递了一个具体的数值，则以该值为准
            */
            /* flex-basis: auto; */

            /* 
                flex 可以设置弹性元素所有的三个样式
                    flex 增长 缩减 基础;
                        initial "flex: 0 1 auto".
                        auto  "flex: 1 1 auto"
                        none "flex: 0 0 auto" 弹性元素没有弹性
            */
            flex: initial;

            
        }
        li:nth-child(1){
            /* order 决定弹性元素的排列顺序 */
            order: 2;
        }

        li:nth-child(2){
            background-color: pink;
            /* flex-grow: 2; */
            order: 3;
        }

        li:nth-child(3){
            background-color: orange;
            /* flex-grow: 3; */
            order: 1;
        }



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

        视口（viewport）
            - 视口就是屏幕中用来显示网页的区域
            - 可以通过查看视口的大小，来观察CSS像素和物理像素的比值
            - 默认情况下：
                视口宽度 1920px（CSS像素）
                        1920px（物理像素）
                        - 此时，css像素和物理像素的比是 1:1

            - 放大两倍的情况：
                视口宽度 960px（CSS像素）
                        1920px（物理像素）
                        - 此时，css像素和物理像素的比是1:2

            - 我们可以通过改变视口的大小，来改变CSS像素和物理像素的比值
         
         在不通的屏幕，单位像素的大小是不同的，像素越小屏幕会越清晰
            24寸 1920x1080
            i6 4.7寸 750 x 1334

            智能手机的像素点 远远小于 计算机的像素点

            问题：一个宽度为900px的网页在iphone6中要如何显示呢？

            默认情况下，移动端的网页都会将视口设置为980像素（css像素）
                以确保pc端网页可以在移动端正常访问，但是如果网页的宽度超过了980，
                    移动端的浏览器会自动对网页缩放以完整显示网页

            https://material.io/resources/devices/


            所以基本大部分的pc端网站都可以在移动端中正常浏览，但是往往都不会有一个好的体验，
                为了解决这个问题，大部分网站都会专门为移动端设计网页

         

                移动端默认的视口大小是980px(css像素)，
            默认情况下，移动端的像素比就是  980/移动端宽度  （980/750）
            如果我们直接在网页中编写移动端代码，这样在980的视口下，像素比是非常不好，
                导致网页中的内容非常非常的小
            编写移动页面时，必须要确保有一个比较合理的像素比：
                1css像素 对应 2个物理像素
                1css像素 对应 3个物理像素

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

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

                将网页的视口设置为完美视口
                <meta name="viewport" content="width=device-width, initial-scale=1.0">

                结论：以后再写移动端的页面，就把上边这个玩意先写上
         


                不同的设备完美视口的大小是不一样的
            iphone6 -- 375
            iphone6plus -- 414

        由于不同设备视口和像素比不同，所以同样的375个像素在不同的设备下意义是不一样，
            比如在iphone6中 375就是全屏，而到了plus中375就会缺一块

        所以在移动端开发时，就不能再使用px来进行布局了

        vw 表示的是视口的宽度（viewport width）
            - 100vw = 一个视口的宽度
            - 1vw = 1%视口宽度

            vw这个单位永远相当于视口宽度进行计算

            设计图的宽度
                750px 1125px

            设计图 
                750px  

            使用vw作为单位
                100vw

            创建一个 48px x 35px 大小的元素

            100vw = 750px(设计图的像素) 0.1333333333333333vw = 1px
            6.4vw = 48px(设计图像素)
            4.667vw = 35px
         
         
         
            */
            html{
            /* 
                网页中字体大小最小是12px，不能设置一个比12像素还小的字体
                    如果我们设置了一个小于12px的字体，则字体自动设置为12

                0.1333333vw = 1px

                5.3333vw = 40px
            */
            font-size: 5.3333vw;
        }

        .box1{
            /* 
                rem
                    - 1 rem = 1 html的字体大小
                    - 1 rem = 40 px(设计图)
            */
            width: 18.75rem;
            height: 0.875rem;
            background-color: #bfa;
        }

/* 使用媒体查询 
            语法： @media 查询规则{}
                媒体类型：
                    all 所有设备
                    print 打印设备
                    screen 带屏幕的设备
                    speech 屏幕阅读器
                    - 可以使用,连接多个媒体类型，这样它们之间就是一个或的关系

                可以在媒体类型前添加一个only，表示只有。
                    only的使用主要是为了兼容一些老版本浏览器
         */

        /* @media print,screen{
            body{
                background-color: #bfa;
            }
        } */

        @media only screen {
            body{
                background-color: #bfa;
            }
        }
        /* 响应式布局
            - 网页可以根据不通的设备或窗口大小呈现出不同的效果
            - 使用响应式布局，可以使一个网页适用于所有设备
            - 响应布局的关键就是 媒体查询
            - 通过媒体查询，可以为不通的设备，或设备不同状态来分别设置样式 */
              /*
             媒体特性：
                width 视口的宽度
                height 视口的高度

                min-width 视口的最小宽度（视口大于指定宽度时生效）
                max-width 视口的最大宽度（视口小于指定宽度时生效）
         */

         /* @media (max-width: 500px){
             body{
                background-color: #bfa;
             }
         } */

            /* 
         样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化
         一般比较常用的断点

         小于768 超小屏幕 max-width=768px
         大于768 小屏幕   min-width=768px
         大于992 中型屏幕 min-width=992px
         大于1200 大屏幕  min-width=1200px

        */
         @media only screen and (min-width: 500px) and (max-width:700px){
             body{
                background-color: #bfa;
             }
         }

         


    </style>
</head>
<body>
    <!-- meta -->
     <meta name="" content="">
     <!-- 标题 -->
 <!--    p块元素
    q短引用
    em语气
    strong加粗重要内容
    blockquote长引用
    br换行
    hgroup相关标题分组
    
    -->
     <h1></h1>
     <h2></h2>
     <p></p>
     <q></q>
     <em></em>
     <strong></strong>
     <blockquote></blockquote>
     <br>
     <hgroup></hgroup>
     <!-- 
        布局标签（结构化语义标签）
     -->

     <!-- 
        header 表示网页的头部
        main 表示网页的主体部分(一个页面中只会有一个main)
        footer 表示网页的底部
        nav 表示网页中的导航
        aside 和主体相关的其他内容（侧边栏）
        article 表示一个独立的文章
        section 表示一个独立的区块，上边的标签都不能表示时使用section

        div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
        span 行内元素，没有任何的语义，一般用于在网页中选中文字

      -->
      <i></i>
      <header></header>
      <main></main>
      <footer></footer>
 
      <nav class="导航 clearfix"></nav>
      <aside></aside>
      <article></article>
 
      <section></section>
 
      <div id="content"></div>
 
      <span></span>
      <!-- 列表 -->
      <!-- 
          在html中也可以创建列表，html列表一共有三种：
        1、有序列表
        2、无序列表
        3、定义列表

    无序列表，使用ol标签来创建无序列表
        使用li表示列表项  
        
    无序列表，使用ul标签来创建无序列表
        使用li表示列表项

    定义列表，使用dl标签来创建一个定义列表
        使用dt来表示定义的内容
        使用dd来对内容进行解释说明

    列表之间可以互相嵌套
       -->
       <ol>
           <il></il>

       </ol>
       <ul>
           <li></li>
       </ul>
       <dl>
           <dt></dt>
           <dd></dd>
       </dl>

       <!-- 超链接 
        是一个块元素-->
       <a href=""></a>
       <a href="#"></a>
       <a href="#id"></a>
       <a href="#bottom" target="_self"></a>
       <a href="#bottom" target="_balnk"></a>
       <a href="javascript:;"></a>
       <!-- img属性
    
    补充关于图片的格式的具体选择-->
       <img src="" alt="图片的描述" sizes="">
       <!-- 内联框架
        在本网页中插入其他网页 -->
       <iframe src="" frameborder="0"></iframe>
       <!-- 音视频 -->
       <audio src=""></audio>
       <audio controls>
           <source  src="">
            <embed src="" type="">
       </audio>
       <video src=""></video>
       <video controls>
           <source src="" type="">
            <embed src="" type="">
       </video>
       <!--  图标字体（iconfont） -->
       <i class="fas fa-bell" style="font-size:80px; color:red;"></i>
        <!-- 

        通过实体来使用图标字体：
            &#x图标的编码;
        -->
        <span class="fas">&#xf0f3;</span>
<!-- 表单 -->
        <!-- 

        在现实生活中，我们经常需要使用表格来表示一些格式化数据：
            课程表、人名单、成绩单....

        同样在网页中我们也需要使用表格，我们通过table标签来创建一个表格

     -->

    <table border="1" width='50%' align="center">
        <!-- 在table中使用tr表示表格中的一行，有几个tr就有几行 -->
        <tr>
            <!-- 在tr中使用td表示一个单元格，有几个td就有几个单元格 -->
            <td>A1</td>
            <td>B1</td>
            <td>C1</td>
            <td>D1</td>
        </tr>
        <tr>
            <td>A2</td>
            <td>B2</td>
            <td>C2</td>
            <!-- rowspan 纵向的合并单元格 -->
            <td rowspan="2">D2</td>
        </tr>
        <tr>
            <td>A3</td>
            <td>B3</td>
            <td>C3</td>
        </tr>
        <tr>
            <td>A4</td>
            <td>B4</td>
            <!-- 
                colspan 横向的合并单元格
             -->
            <td colspan="2">C4</td>
        </tr>
    </table>

    <table border="1" width='50%' align="center">
        <!-- 
            可以将一个表格分成三个部分：
                头部 thead
                主体 tbody
                底部 tfoot

                th 表示头部的单元格
         -->
        <thead>
            <tr>
                <th>日期</th>
                <th>收入</th>
                <th>支出</th>
                <th>合计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>2000.1.1</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>300</td>
            </tr>
        </tfoot>

    </table>
<!-- 表单 -->
    <!-- 
        表单：
            - 在现实生活中表单用于提交数据
            - 在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器
            - 使用form标签来创建一个表单

     -->
    <!-- 
        form的属性
            action 表单要提交的服务器的地址
     -->
     <form action="target.html">
        <!--
           文本框
           注意：数据要提交到服务器中，必须要为元素指定一个name属性值
        -->
        文本框 <input type="text" name="username" value="我是一串默认值">
        <br><br>
        <!-- 
            密码框
         -->
        密码框 <input type="password" name="password">
        <br><br>

        <!--
             单选按钮
                - 像这种选择框，必须要指定一个value属性，value属性最终会作为用户的填写的值传递给服务器
                - checked 可以将单选按钮设置为默认选中
           -->
        单选按钮 <input type="radio" name="hello" value="a">
        <input type="radio" name="hello" value="b" checked>
        <br><br>

        <!-- 
            多选框
         -->
        多选框 <input type="checkbox" name="test" value="1">
        <input type="checkbox" name="test" value="2">
        <input type="checkbox" name="test" value="3" checked>

        <br><br>

        <!-- 下拉列表 -->
        <select name="haha">
            <option value="i">选项一</option>
            <option selected value="ii">选项二</option>
            <option value="iii">选项三</option>
        </select>



        <br><br>
        <!-- 
            提交按钮
         -->
        <input type="submit" value="注册">
    </form>
    <form action="target.html">
        <!-- 
        
            autocomplete="off" 关闭自动补全，这个自动补全就相当于是个提示框
            readonly 将表单项设置为只读，数据会提交
            disabled 将表单项设置为禁用，数据不会提交，在连接的变化之中可以看出来
            autofocus 设置表单项自动获取焦点 ，就是边框自动会有一个渲染颜色变化
         -->
                <input type="text" name="username" value="hello" readonly>
                <br><br>
                <input type="text" name="username" autofocus>
                <br><br>
                <input type="text" name="b">
        
                <br><br>
        
                <!-- <input type="color"> -->
                <br><br>
                <!-- <input type="email"> -->
                <br><br>
        
                <input type="submit">
                <!-- 重置按钮 -->
                <input type="reset">
                <!-- 普通的按钮 -->
                <input type="button" value="按钮">
        
                <br><br>
                
        
                <button type="submit">提交</button>
                <button type="reset">重置</button>
                <button type="button">按钮</button>
            </form>

</body>
</html>