CSS_表格表单_弹性盒子

 表单  

        1）input

        还差两个（email，url）

        2）select类型

        下拉菜单

        默认的下拉菜单只显示一个

          下拉菜单的属性====select标签

           控制显示多个====size

           控制选择多个属性=====muliple

           注意：如果你只添加了multiple属性的话，默认会显示4个

           下拉菜单选项的属性=====option

           value====给option一个值，不会显示，但是能被js获取到

           selected属性=默认选中

        标签基本语法

        <select> <option>柠檬</option></select>

        <select> <option>蜜桃</option></select>

        <select> <option>薄荷</option></select>

            select====下拉菜单

            option====下拉菜单的选项

        3）textarea类型

        多行文本输入框

        textarea====双标签

        标签属性

        cols="10"  控制显示的列数（显示的是宽度）

        row="3"    控制显示的行数（显示的是高度）

        CSS属性

        width，height控制宽度高度

        默认情况下，你的多行文本输入框是能被拖拽的，如何不让拖拽

        resize="none" 取消拖拽

        resize="both" 水平垂直都能拖拽

        resize="vertical" 垂直方向拖拽 纵向拖拽

        resize="horzontal 水平方向拖拽 横向拖拽

         <textarea> </textarea>

         空格也占位置 空文本也会占位置

         注意：使用的时候，双标签不要折行，里面不要敲回车，两个挨在一起

        4）其他类型

        字段集和字段集标题

        标签语法：

        字段集===fieldset==外边距的边框

        字段集标题===legend==边框上面的文本

        所有的其他控件都需要与legent同级别

        作用：讲一讲表单进行区块划分，这一功能的主要介绍

        <fieldset>

            <legend></legend>

        </fieldset>

        操作：

        <fieldset>

        <legend>基本信息</legend>

        用户名字: <input type="text">

        </fieldset>

        引入浮动框架集

          向页面中插入页面

          基本语法

          <iframe src="引入页面的路径" frameborder="0"></iframe>

          行内块元素

          section 主体的意思  主体标签 ===div标签

          CSS 属性中的border:none 与frameborder等价

          CSS弹性盒

          1.怪异盒子

          含义：更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改

          属性 ：box-sizing

          属性值：content-box 标准盒子模型

                  border-box  怪异盒子模型

          2.CSS 弹性盒

            1.弹性盒子

             1）作用：修改子元素的排列方向（影响的是子元素的排列方向====只会影响子元素）

             2）如何触发一个弹性盒子

              给父元素添加一个display属性：并且让他的值为flex

             3） 看触发弹性盒子之后，子元素有没有影响

               有哪些影响？

                 a.当触发弹性盒子之后，子元素会横向排列（不是浮动没有浮动，计算属性里面的float：none）

                 b.当父元素触发弹性盒子之后，子元素默认会变成块级元素（改变元素类型）

                 c.如果你只有一个子元素的话，父元素触发弹性盒子之后，子元素添加margin：auto 子元素会水平垂直中间显示

            2.弹性盒子中的概念：

            容器：大的盒子可以理解成父元素

            项目：小的盒子可以理解成子元素

                  当你给父元素添加弹性盒子之后，子元素会受到影响

            x轴：横轴，横向，水平方向

            y轴：纵轴，纵向，垂直方向

            主轴：触发弹性盒子之后，元素的排列方向，默认的触发弹性盒子之后，元素水平排列，主轴会在横向

            侧轴：与主轴对立的一个方向，主轴在横向，侧轴在纵向.===主轴的方向调整了，主轴在纵向，侧轴在横向

            3.容器（父元素）上面的属性：

              1）触发弹性盒子

                diaplay：flex

                触发弹性盒子之后，=====元素横向排列了===主轴横向，侧轴纵向

              2）修改主轴方向

                flex-direction：

                row==============默认值，只要触发弹性盒子之后就会横向显示，主轴就在横向

                row-reverse======主轴在横向，但是他是反向排列的

                column===========主轴在纵向（常用的）

                column-reverse===主轴在纵向反方向排列

               3）主轴上面的对齐方式

               justify-content

                    flex-start ====主轴的开始位置（元素都没有分开）

                    flex-end=======主轴的结束位置

                    center=========主轴的中心位置

                    space-between==主轴两端对齐，贴边显示，之后，中间有距离

                    space-around===主轴，环绕对齐，中间有距离，贴边元素也有距离，元素与元素之间是贴边（首尾）元素到父元素之间距离的2倍（*）

                4）侧轴上面的对齐方式

                 align-items：；

                 取值： flex-start====侧轴的开始位置（元素不会分开）

                        flex-end======侧轴的结束位置（元素不会分开）

                        center========侧轴的居中位置（元素不会分开）

                        baseline======基线，与开始位置是1一样没有任何变化几乎不使用

                        stretch=======如果元素没有高度的话，会被拉伸

                5）折行属性

                  默认情况下：默认情况下元素宁愿被挤压都不会折行，如何让他不变形，折行显示

                  flex-wrap：wrap

                6）调整行间距

                 align-content：

                 flex-start======侧轴的开始位置对齐，没有行间距了，行间距为0

                 flex-end========侧轴的结束位置对齐，没有行间距

                 center==========侧轴的中间位置对齐，没有行间距

                 space-between===行间距两端对齐（首行和尾行贴边显示）

                 space-around====行间距环绕（行与行之间的距离是首行带父元素之间距离的2倍）

            4.项目（子元素）上面的属性

              1）占剩余宽度的所有

              如果所有的子元素flex取值都一样的话，则实现的是均分

              如果后面的取值不一样的话，则实现的是按照份数进行划分

              flex：1 flex：2 flex：3 一共分为六份，老大占一份，老二占两份，老三占三份

              2）占剩余高度的所有

              修改主轴方向

              3）order属性

              调整排列顺序

              取值就是一个纯数值=====用来调整排列顺序的，取值越大，它越靠后面

              取值可以为负数

              4）让元素不挤压，不折行

              主要做移动端的横向导航

              flex-shrink：0不挤压   1是挤压  

              overflow：auto；

           

              icon图标，字体图标，遵循所有的字体属性（加粗，倾斜，下划线，删除线，等等）