CSS基础

css基础:

        css是让页面变得更加好看的

    css样式创建方式:

        1: 内部样式

            在head标签中添加style标签

            <style type="text/css">

                选择器{属性:值;}

            </style>

        2: 内联样式

            <标签 style="属性:值;"></标签>

            <标签 style="属性:值;">

        3: 外部样式

            1:创建一个独立的html文件,后缀为.html

            2:创建一个独立的css文件,后缀为.css

            3:关联

                关联方式一(推荐使用)

                    在html文件的head标签中添加

                        <link rel="stylesheet" type="text/css" href="css文件地址">

                        rel="stylesheet" 申明link引入的文件是层叠样式表

                        type="text/css" 申明文件的类型为文本类型的css

                关联方式二(了解)

                    在head标签中的style标签中的第一行添加

                        @import url("css文件地址");

                两种关联方式的区别:

                    1: 本质区别,link是标签,@import是css提供的一种写法

                    2: 加载顺序区别,link同时加载,@import是后加载

                    3: 兼容性区别,link没有兼容问题,@import低版本ie不兼容

                    4: 能否被dom控制,link能被js控制,@import不能被js控制

    css样式表的权重关系:

        内联样式 > 内部样式 / 外部样式

    选择器:选中指定的元素

        类型选择器: div p ul li....

        类选择器(class选择器):

            <标签  class="name"></标签>

            .name{}

            【注】

                1: 在同一个页面中相同的class值可以有多个

                2: 在同一个class中可以有多个值

                3: 具有重用性,通常用来写样式

        id选择器:

            <标签 id="name"></标签>

            #name{}

            【注】

                1: 在同一个页面中相同的id值只有一个

                2: 在同一个id中只有一个值

                3: 具有唯一性,通常不用来写样式

        * 通配符: 匹配页面中所有的元素

            *{margin:0;padding:0;} 样式初始化

        群组选择器:

            选择器1,选择器2,选择器3{} 匹配1 2 3

        包含选择器:

            选择器1 选择器2 选择器3{} 匹配1里面的2里面的3,最终匹配3

选择器权重:

        id选择器 > 类选择器 > 类型选择器

    css属性:

        font-size:文本大小;

            12px 最小文本大小

            16px 默认文本大小

            em 跟随最近的font-size值成倍数关系

            rem 跟随根元素(html)的font-size值成倍数关系

            关键字

        color:文本颜色;

            颜色单词: red blue green..

            十六进制:

                # 0-9 a-f #aabbcc => #abc

            三原色: r 红色 g 绿色 b 蓝色 a 透明度

                rgb(0,0,0)

                rgba(0,0,0,0)

                    rgb 取值范围 0-255

                    a 取值范围 0-1

        font-family:字体1,字体2,字体3;

            【注】多个字体时，用逗号隔开

                  中文标示一个字体时要添加引号

                  多个单词表示一个字体时，需要添加引号

        font-weight:是否加粗;

            bold 加粗效果

            bolder 粗体字

            normal 常规文本(不加粗)

            100-300 不加粗

            400 == normal 常规文本

            500 不加粗

            600-900 加粗

        font-style:是否倾斜;

            italic 倾斜效果

            oblique 斜体字

            normal 常规文本

        line-height:行高; 文本垂直对齐方式

            行高值 < 高度值 偏上

            行高值 = 高度值 居中

            行高值 > 高度值 偏下

            【注】不能为负数

        line-height: 1;

        去除默认间距，只保留字的大小

        font:倾斜 加粗 大小/行高 字体;

        text-align:文本水平对齐方式;

            left 靠左

            center 居中

            right 靠右

            justify 两端对齐

        text-indent:首行缩进;

            px em

            【注】只针对第一行有效

                  可以为负数

        list-style:none; == list-style-type:none;取消修饰符

        背景相关属性:

            background-color:背景颜色;

                颜色单词: red blue green..

                十六进制:

                    # 0-9 a-f #aabbcc => #abc

                三原色: r 红色 g 绿色 b 蓝色 a 透明度

                    rgb(0,0,0)

                    rgba(0,0,0,0)

                        rgb 取值范围 0-255

                        a 取值范围 0-1

            background-image:url('背景图片地址');

                【注】图片默认重复

            background-repeat:图片是否重复;

                repeat 重复

                no-repeat 不重复

                repeat-x 水平重复

                repeat-y 垂直重复

            background-position:背景图定位;

                left center right

                top center bottom

                px %

                【注】可以为负数

            bakground-attachment:背景图是否关联;

                scroll 滚动查看

                fixed 固定

            background-size:背景图大小;

                px %

            background:颜色 url("图片地址") 是否重复 定位/大小 关联;

 

        浮动: 让原本竖着排列的元素横着排列

            float:;

                none 不浮动

                left 左浮动

                right 右浮动

                【注】在一行显示的元素都必须加浮动

            特征:

                1: 脱离文档流(元素默认从上至下从左至右的排列顺序)

                2: 左浮动找左浮动,右浮动找右浮动

                3: 贴靠现象

                4: 图文混排

                【注】如果子元素添加了浮动，那父元素就要添加高度(暂时的解决办法)

        继承: 给父元素设置样式,未给子元素设置,但是作用到了子元素身上

盒模型的组成:

        内容区     width height

        内边距区    padding

        边框区     border

        外边距区    margin

    padding:内边距;

        padding-top:上内边距;

        padding-right:右内边距;

        padding-bottom:下内边距;

        padding-left:左内边距;

        padding:四个方向;

        padding:上下  左右;

        padding:上  左右   下;

        padding:上  右   下  左;

        【注】

            没有负数，没有auto

            会撑大元素的大小

            不会对背景图造成影响

    margin:外边距;

        margin-top:上外边距;

        margin-right:右外边距;

        margin-bottom:下外边距;

        margin-left:左外边距;

        margin:四个方向;

        margin:上下  左右;

        margin:上  左右   下;

        margin:上  右   下  左;

        【注】

            有负数，有auto,表示水平自适应

            步会撑大元素的大小

        问题: 垂直防线的外边距相遇会重合

        解决办法:

            兄弟关系: 给一个方向加足够的间距

            嵌套关系: 给父元素添加上内边距

    border:边框大小 形态 颜色;

        常见形态:

            solid 实线

            dashed 虚线

            dotted 点状线

            double 双线

        border-top:上边框大小 形态 颜色;

        border-top-width:上边框大小;

        border-top-style:上边框形态;

        border-top-color:上边框颜色;

        borer-width:边框大小;

        border-syle:边框形态;

        border-color:边框颜色;

        三角形:

            width:0;

            height:0;

            border:30px solid transparent;

            border-top-color:red;

    盒模型大小计算:

        W = width + 左右内边距 + 左右边框 + 左右外边距

        H = height + 上下内边距 + 上下边框 + 上下外边距

overflow:文本溢出;

        visible 默认值

        hidden 超出隐藏

        scroll 滚动查看

        auto 自适应

    white-space:文本格式;

        normal

        pre       保留格式

        pre-wrap  缩进不换行

        pre-line  缩进换行

        nowrap 强制不换行,遇到br还是会换行

    text-overflow:是否显示省略号;

        clip 裁剪

        ellipsis 省略号

        省略号步骤:

            width:200px;

            white-space:nowrap;

            overflow:hidden;

            text-overflow:ellipsis;

            【注】只针对单行文本有效

    元素类型分类:

        块级元素(block): div p ul ol li dt dd dl h1 h2....

            1: 独占一行

            2: 矩形显示

            3: 能设置宽高

            4: 能正常设置内外边距

            5: 通常作为容器使用

        内联元素(inline):a u i em b strong....

            1: 只占据自己内容大小的位置

            2: 非矩形显示(最小单位除外)

            3: 不能设置宽高

            4: 不能正常设置垂直方向的内外边距

            5: 通常不作为容器使用

        内联块元素(inline-block): input img

            1: 只占据自己内容大小的位置

            2: 矩形显示

            3: 能设置宽高

            4: 能正常设置内外边距

        元素类型转换:

            display:;

                block 块级元素(显示)

                inline 内联元素

                inline-block 内联块级元素

                none 隐藏

        vertical-align:行块级元素垂直对齐方式;

            top     顶部对齐

            middle  居中对齐

            bottom  底部对齐

            【注】

                只针对行块级元素有效

                要对齐的元素都要添加

        标尺:让一个行块级元素水平垂直居中

            父元素设置:

                .box{

                    line-height:值;

                    text-align:center;

                }

            标尺:

                .spa1{

                    display:inline-block;

                    width:0;

                    height:100%;

                    vertical-align:middle;

                }

            居中元素:

                .spa2{

                    display:inline-block;

                    vertical-align:middle;

                }

        伪类选择器:

            a:link{}    未访问状态

            a:visited{} 访问过后状态

            a:hover{}   鼠标移入状态

            a:active{}  鼠标按下状态

            【注】

                主要针对a的文本颜色

                有顺序要求 LoVe - HAte

            .box1:hover{} 鼠标移入box1,改变box1

            .box1:hover .box2{} 鼠标移入box1,改变子元素box2, box1和box2一定是嵌套关系

        置换元素: img  input

        非置换元素: div a i p u...

 

        css核心属性补充

            text-decoration:文本修饰;

                none 取消线

                overline 上划线

                line-through 中划线

                underline 下划线

普通流(文档流): 元素默认从上至下,从左至右的排列顺序

    文档流分为: 普通流 浮动流 定位刘

    定位: 用来改变元素的位置的

        position:;

            static 默认定位

            absolute 绝对定位

                脱离文档流

                默认参考根元素(html)改变自己的位置

                或者参考最近的有定位的父元素(默认定位除外)

            relative 相对定位

                占据文档流

                参考自身加载到页面中的初始位置

            fixed 固定定位

                脱离文档流

                参考浏览器窗口改变自己的位置

            sticky 粘性定位

                结合了相对定位和固定定位的特征

        定位坐标值:

            left right

            top bottom

        绝对定位 和 相对定位的区别:

            1: 参考物不同

            2: 绝对定位脱离文档流,相对定位占据文档流

        包含块:（子绝父相）

            1: 嵌套结构

            2: 父元素添加position:relative;

                子元素添加position:absolute;

        层级关系:

            z-index:层级关系;

                数字 auto

                【注】数字越大,层级越高,反之越小,可以为负数

                      必须添加了定位的元素才能修改层级(默认定位除外)

            1:  并列关系

                    都可以修改层级噶虚拟

                嵌套关系

                    只能修改子元素的层级关系

        定个位居中:

            方式一:

                position:absolute;

                left:0;

                right:0;

                bottom:0;

                top:0;

                margin:auto;

            方式二:

                position:absolute;

                left:50%;

                margin-left:-宽度的一半;

                top:50%;

                margin-top:-高度的一半;

        锚点:

            <a href="#id值'>点击位置</a>

            <标签 id="值">跳转位置</标签>

        透明度:

            opacity:0.5;

            filter:alpha(opacity=50);  过滤器

表格:用来展示数据

        相关标签:

            table > tr > td: 表格>行>单元格

            th: 列标题

            colgroup: 列分组

                span="数字" 几列为一组

            caption: 表格标题

            thead 表头

            tbody 表体(会自动生成)

            tfoot 表尾

        相关属性:

            width="表格的宽度"

            height="表格的高度"

            border="表格的边框"

            bordercolor="边框色"

            cellspacing="单元格与单元格之间的间距"

            cellpadding=“单元格与内容之间的距离"

                【注】只能给table添加

            align="表格水平对齐方式"

                取值：left、right、center、

            valign=“垂直对齐”

                取值: top middle bottom

                【注】给table添加无效

            合并单元格属性：(在td上添加) 必须掌握

                合并列： colspan=“左右合并"

                合并行： rowspan=“上下合并”

                【注】多余的单元格需要删除

        css相关属性:

            border-spacing:边框之间的间距;

                px

            border-collapse:是否合并边框;

                separate 默认值

                collapse 合并为单边靠

            【注】以上两个属性只能给table添加

            table-layout:行和列的算法;

                auto 默认值

                fixed 固定宽度

 

    表单内容:

        input:

            type="radio" 单选按钮

                【注】同组的单选按钮name值必须一致

                checked="checked" 默认选中

                disabled="disabled" 禁用

            type="checkbox" 多选框

            type="file" 文件上传域

                multiple="multiple" 多选

            type="hidden" 隐藏表单

                【注】在页面中不显示、value值可记录数据

            type="image" 图片提交按钮

                src="图片地址"

       

        select > option: 下拉列表>下拉项

            selected="selected" 默认选中

        textarea: 多行文本输入框

            cols="字符宽"

            rows="行数"

            【注】resize:none; css设置禁止拖拽

        fieldset > legend: 表单字段级> 字段级标题

            【注】在一个fieldset中只有一个子集legend

        label: 关联标签

            for="关联元素的id值"

    BFC: 块级格式化上下文,简单理解为有特殊功能的盒模型

        BFC规则:

            1:内部的Box会在垂直方向，一个接一个地放置。

            2:Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）

            3:每个元素的margin box的左边， 与包含块border box的左边相接触

            4:BFC的区域不会与float box重叠。

            5:BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

            6:计算BFC的高度时，浮动元素也参与计算

        BFC触发方式:

            1:根元素(html)

            2:float属性不为none

            3:position为absolute或fixed

            4:display为inline-block, table-cell, table-caption, flex, inline-flex

            5:overflow不为visible

        BFC的应用:

            1、自适应两栏布局

            2、清除内部浮动

            3、防止margin上下重叠

宽高自适应:元素的大小随着浏览器窗口或子元素自动调整,也就是pc端自适应

    自适应优点:

        灵活性强

        能适配不同的设备,不同的分辨率

    宽度自适应:

        元素宽度设置为100% (块级元素默认为100%)

        或者不设置宽度

    高度自适应:

        height:auto;或者不设置;（是子元素撑开父元素的高度）

   

        元素高度自适应窗口高度

            设置方法：html,body{height:100%;}

            注：如果设置子元素的高度跟随父元素的高度变化而变化，那么父元素必须有高度。

    最小宽高,最大宽高:

        min-width:;

        min-height:;

        max-width:;

        max-height:;

        【注】低版本ie浏览器不兼容

       

        最小高度兼容写法:

            兼容ie写法一

                min-height:100px;/*ie低版本不识别*/

                _height:100px;/*在ie低版本中会识别为像min-height的效果*/

               

            兼容ie写法二

                min-height:100px;/*ie低版本不识别*/

                height:auto !important;/*ie低版本不识别!important*/

                height:100px;

                【注】有顺序要求

    visibility:显示隐藏;

        visible 默认值

        hidden 隐藏

        【注】隐藏时是占据文档流的

        display:none; 和 visibility:hidden; 的区别

            1: 都是隐藏

            2: 前者脱离文档流,后者占据文档流

    伪对象选择器:

        :after{content:"";} 在...之后

       

        :before{content:"";} 在...之前

        :first-letter{} 第一个字的样式

        :firset-line{} 第一行字的样式

            【注】只用于块级元素

    高度塌陷: 父元素未设置高度,子元素设置了浮动,父元素将高度塌陷,引起页面布局混乱

    清除浮动: 解决高度塌陷问题

        解决方式

            1: 给父元素添加高度

            缺点: 不灵活

            2: 给父元素添加overflow:hidden; (原理: 触发成为了BFC)

            缺点: 超出父元素的内容将被隐藏

            3: 给浮动元素最后添加一个空的块级兄弟元素,并设置clear:left/right/both;

            缺点: 代码冗余

            4: 万能清除法

            .clearFix:after{

                content:".";

                display:block;

                clear:both;

                width:0;

                height:0;

                overflow:hidden;

                visibility:hidden;

            }

           

语义化标签

        section元素 表示页面中的一个区块

        article元素 表示一块与上下文无关的独立的内容

        aside元素 在article之外的，与article内容相关的辅助信息

        header元素 表示页面中一个内容区块或整个页面的标题

        footer元素 表示页面中一个内容区块或整个页面的脚注

        nav元素 表示页面中导航链接部分

        figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)

        main元素 表示页面中的主要的内容(ie不兼容)

    多媒体标签:

        video 视频标签

        audio 音频标签

        source 媒介元素(备份文件)

            src="音视频地址"

            controls="显示控件"

            autoplay="自动播放"

            loop="循环播放"

            poster="第一帧图像"

            muted="静音属性"

            type="文件类型"

                视频类型:   type="video/ogg"

                            type="video/mp4"

                            type="video/webm"

                音频类型:   type="audio/ogg"

                            type="udio/mpeg"

    html5表单:

        input

            type="类型"

                type="email"   限制用户必须输入email类型

                type="url"        限制用户必须输入url类型

                type="range"   产生一个滑动条表单

                type="number" 限制用户必须输入数字

                type="search"   产生一个搜索意义的表单

                type="color"     生成一个颜色选择的表单

                type="time"      限制用户必须输入时间类型

                type="month"        限制用户必须输入月类型

                type="week"        限制用户必须输入周类型

                type="datetime-local"        选取本地时间

                type="date"     日期

        datalist 提示信息标签

            id=""

            【注】必须结合list="id值"属性使用

        output 输出框

        相关属性

            新增表单属性

                required     监测是否为空。

                min      最小

                max      最大

                step     步幅  确定一个法定值。 -3 0 3 6 9

                list     必须结合datalist标签，绑定datalist  id名称。

                autocomplete    是否自动提示信息    属性值   on    off

                placeholder    文本框的提示信息

                autofocus      自动聚焦。一个页面只能由一个。

                pattern    后面的属性值是一个正则表达式。

                novalidate     取消验证

                multiple     选择（上传）多个

浏览器兼容前缀:

        -ms- ie浏览器

        -moz- 火狐浏览器

        -webkit- 谷歌浏览器(webkit内核的浏览器)

        -o- 欧朋浏览器

    渐变:至少两个颜色之间的过渡

        background-image:;

        线性渐变: 由一个方向到另一个防线的颜色过渡

        background-image:linear-gradient(方位,颜色1 起始位1,颜色2 结束位2,....);

            方位: left right top bottom

                 to left  to bottom

                 to left top

                 deg

            颜色:

                颜色单词

                十六进制

                rgb() rgba()

            起始位:

                px %

        重复线性渐变 repeating-linear-gradient()

        径向渐变:由一个点向四周的扩散

        background-image:radial-gradient(起点坐标,渐变的形状,渐变的大小,颜色1 起始位1,颜色2 结束位2,...);

            方位: % px  center

                 

            颜色:

                颜色单词

                十六进制

                rgb() rgba()

            起始位:

                px %

            形状:

                ellipse 椭圆

                circle 正圆

            大小:

                closest-side 最近边；

                farthest-side 最远边

                closest-corner 最近角

                farthest-corner 最远角

            重复渐变: repeating-radial-gradient()

    过渡: 由一种状态到另一种状态的平滑变化

        transition:过渡属性 运动事件 延迟时间 动画类型;

        transition-property:过渡属性;

        transition-delay:延迟时间;

        transition-duration:过渡时间;

        transition-timing-function:动画类型;

            linear 匀速运动

            ease 逐渐慢下来

            ease-in 加速

            ease-out 减速

            ease-in-out 先加速后减速

            贝塞尔曲线

    变换 transform:;

        功能函数:

            位移:

                trasnlateX()

                trasnlateY()

                translate(x,y)

                translate(x)

            缩放:

                scaleX()

                scaleY()

                scale(x,y)

                scale(xy)

                【注】

                    1是默认大小

                    比1大是放大

                    比1小,比0大,是缩小

                    大于1,或者小于-1,最终是放大

            旋转:

                rotateX()

                rotateY()

                rotate(z)

            倾斜:

                skewX()

                skewY()

                skew(x)

                skew(x,y)

            先位移,后旋转  和 先旋转,后位移,效果一样吗?

                不一样,因为先旋转改变了位移的方向

        变形原点: transform-origin:;

                left center right

                top center bottom

                px %

3D

景深: 近大远小的效果

        perspective:; 取值范围 900px - 1200px

        【注】给父元素设置，提供给子元素

           

    3d环境:

        transform-style:;

            flat            2d环境,默认值

            preserve-3d     3d环境

            【注】给父元素设置，提供给子元素

    功能函数:

        位移:

            translateZ()

            translate3D(x,y,z)

        旋转:

            rotateX()

            rotateY()

            rotateZ()

            rotate3D(x,y,z,a)

        缩放:

            scaleZ()

            scale3D(x,y,z)

            【注】效果不明显，需要结合其他的功能函数一块使用

    perspective-origin:水平  垂直; 观测角度

        left center right

        top center bottom

        px %

    动画:

        1: 定义关键帧

        2: 调用动画

            定义关键帧:

                方式一:

                    @keyframes 动画名{

                        from{} 起始状态

                        to{}  结束状态

                    }

                方式二:

                    @keyframes 动画名{

                        0%{}

                        50%{}

                        100%{}

                    }

            调用动画:

                animation:动画名 运动时间  延迟时间 运动次数 运动方向 动画类型 是否运动;

                    animation-name:动画名;

                    animation-duration:运动事件;

                    animation-delay:延迟时间;

                    animation-iteration-count:运动次数;

                        number 具体次数

                        infinite 无限循环

                    animation-direction:运动方向;

                        normal 默认方向

                        reverse 反向运动

                        alternate 先正后反

                        alternate-reverse 先反后正

                    animation-timing-function:动画类型;

                        linear

                        ease

                        ease-in

                        ease-out

                        ease-in-out

                        step-start 一帧一跳

                        贝塞尔曲线

                    animation-play-state:是否运动;

                        running 默认值,运动

                        paused 暂停,通常结合hover一块使用

CSS3选择器

优雅降级: 优先匹配高版本浏览器,再匹配低版本浏览器

        渐进增强: 优先匹配地板版浏览器,再匹配高版本浏览器

       

        css3选择器:

            属性选择器

              1、E[attr]：只使用属性名，但没有确定任何属性值

              2、E[attr=“value”]：指定属性名，并指定了该属性的属性值

              3、E[attr~=“value”]：指定属性名，并且具有属性值，或者此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”必须的

            [扩展知识]

              4、E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的

              5、E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value结束的

              6、E[attr*=“value”]：指定了属性名，并且有属性值，而且属值中包含了value

            - 7、E[attr|=“value”]：指定了属性名，并且属性值仅是value或者以“value-”开头的值（比如说left-con）

           

            结构伪类选择器:

                .box:first-child{} box是第一个子元素

                .box:last-child{} box是最后一个子元素

               

                .box:nth-child(n){} box是指定位置的子元素

                    n是从0开始的自然数

                    2n = even 偶数序列

                    2n-1 = odd 奇数序列

                   

                .box:only-child{} 匹配box,但是box是位移的子元素,没有任何兄弟元素

               

                html:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML

               

                .box:empty{}匹配box,box是空元素,没有任何子元素、图片、文本

               

                .box:not(.list){} 否定伪类选择器，匹配box,但是排除box有class="list"

               

                .box:target{} 目标伪类选择器

               

            UI 元素状态伪类选择器

                E:enabled{} 可用状态的E元素

                E:disabled{} 不可用状态的E元素

                E:checked{} 选中状态的元素E

               

             动态伪类选择器

                E:link{} 未被访问过

                E:visited{}已被访问过

                E:hover{} 鼠标停留在元素E上

                E:active{} 鼠标按下的状态

               

                input:focus{} 获取光标状态

               

            层级选择器:

                e > f{} 子元素选择器

                e + f{} 相邻兄弟选择器

                e ~ f{} 通用兄弟选择器

        css3属性:

            text-shadow:水平  垂直  模糊度 阴影颜色; 文本阴影

           

            box-shadow:水平  垂直  模糊度 阴影大小 阴影颜色 内部阴影; 盒子阴影            

                inset 内部阴影

               

            背景相关属性:

                background-origin:背景图起始位置;

                    padding-box 内边距区域开始(默认值)

                    border-box 边框区域开始

                    content-box 内容区域开始

                   

                background-clip:背景图裁剪区域;

                    border-box 边框区域开始(默认值)

                    padding-box 内边距区域开始

                    content-box 内容区域开始

                   

                background-size:背景图大小;

                    px %

                    cover 等比例缩放,图片有可能超出元素

                    contain 等比例缩放,元素有可能留白

                   

                【拓展】多张背景图设置

                    background：url(),url()；

                   

            颜色模式:

                hsl(0,0,0)

                hsla(0,0,0,0)

                    h: 色调 0-360

                    s: 饱和度 0%-100%

                    l: 亮度 0%-100%

                    a: 透明度 0-1

                   

            边框图片模式:

                    border-image: url(图片地址)垂直偏移量 水平偏移量 / 图片大小 / 图片往外扩张倍数 图片填充方式;

                    border-image-source: url(图片地址);

                    border-image-slice: 垂直偏移量 水平偏移量;

                    border-image-width: 图片大小;

                    border-image-outset: 图片往外扩张倍数 ;

                    border-image-repeat: 图片填充方式;

                        stretch 拉伸(默认值)

                        round 从一边到另一边的重复方式

                        repeat 从中间到两边的重复方式

                       

            圆角:

                border-radius:圆角;

                border-radius:水平圆角/垂直㢗;

                px %

               

            穿透模式

                pointer-events:none;

               

            计算模式:

                calc(100% - 200px)

                用于计算不同单位之间的运算

                运算符前后需要添加空格

Flex布局

标准盒模型:

        内容区域: width height

        内边距区域: padding

        边框区域: border

        外边距区域: margin

       

    怪异盒模型(IE盒模型):

        内容区域(包含了内边距区域 和 边框区域)

        外边距区域

       

    盒模型设置:

        box-sizing:;

            content-box 标准盒模型(默认值)

            border-box 怪异盒模型(IE盒模型)

           

    flex布局:

        分为容器(父元素) 和 项目(子元素)

        容器分为主轴和侧轴,主轴方向可变,侧轴方向也可变

        子元素的浮动 清除浮动 vertical-align 都无效

        子元素默认沿着主轴方向排列

       

        容器属性:

            1: display:设置为弹性盒;

                flex

                inline-flex

               

            2:flex-direction:设置主轴方向;

                row             水平主轴

                row-reverse     反向水平主轴

                column          垂直主轴

                column-reverse  反向垂直主轴

               

            3: flex-wrap:是否换行;

                nowrap 不换行(默认值)

                wrap 换行

                wrap-reverse 反向换行

               

            4: flex-flow:设置主轴方向 是否换行;

           

            5: justify-content:主轴对齐方式;

                flex-start      起始位置

                center          居中位置

                flex-end        结束为止

                space-around    两端平分

                space-between   两端对齐

                space-evenly    平均分配

           

            6: align-items:侧轴对齐方式; (没有换行的情况下使用)

                flex-start      起始位置

                center          居中位置

                flex-end        结束为止

                stretch         拉伸

                baseline        文本底部对齐

                【注】没有换行的情况下使用

               

            7: align-content:多根侧轴对齐方式; (有换行的情况下使用)

                flex-start      起始位置

                center          居中位置

                flex-end        结束为止

                space-around    两端平分

                space-between   两端对齐

                space-evenly    平均分配

                stretch         拉伸（默认值）

                【注】只有换行了才能使用

               

               

       

        项目属性:

            1: align-self:侧轴对齐方式;

                flex-start      起始位置

                center          居中位置

                flex-end        结束为止

                stretch         拉伸

                auto            主动继承父元素的侧轴对齐方式

               

            2: order:反向排序;

                数字越大,越靠后

                反之靠前

                可以为负数

               

            3: flex:缩放大小;

                flex-grow:放大;

                flex-shrink:缩小;

                flex-basis:大小;

               

    多列布局:

        column-count:列数;

        column-gap:列间距;

        column-rule:列边框;

        column-span:是否横跨;

            none 不横跨

            all 横跨

        column-fill:填充方式;.

       

            auto 优先填满上一列

            balance 尽可能平均分配

        column-width:列宽;

        columns:列宽 列数;

       

常见的布局方案:

        1: 固定布局

       

        2: 可切换的固定布局

       

        3: 弹性布局

       

        4: 混合布局

         

        5: 布局响应

   

    响应式布局设计特点：

        面对不同分辨率设备灵活性强

        能够快捷解决多设备显示适应问题

       

        缺点:

            兼容各种设备工作量大，效率低下

            代码累赘，会出现隐藏无用的元素，加载时间加长

            其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

            一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

           

           

        媒体查询:

            @media 媒体 and (条件表达式) {

                选择器{属性:值;}

             }

             

            条件表达式:

                max-width:

                    值从大到小去写

                   

                min-width:

                    值从小到大去写

                   

           

            @media not 媒体 and (条件表达式) {

                选择器{属性:值;}

             }

             not 排除当前媒体的当前范围显示

             

             @media only 媒体 and (条件表达式) {

                选择器{属性:值;}

             }

             only 指定在当前媒体的当前范围去显示

             

            /*竖屏*/

            @media all and (orientation:portrait){}

           

            /*横屏*/

            @media screen and (orientation:landscape){}

           

        移动端适配准备:

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

            name="viewport"  视窗,窗口

            width=device-width 宽度等于当前设备的宽度

            initial-scale=1 初始缩放比例

            minimum-scale=1 最小缩放比例

            maximum-scale=1, 最大缩放比例

            user-scalable=no 是否能缩放

           

        设备像素比 = 设备像素（物理像素） / 设备独立像素（逻辑像素）

       

       

        常见单位:

            px 像素单位

           

            em 跟随最近的font-size:;的值成倍数关系

           

            rem 跟根元素的font-size:;值成倍数关系

           

            % 百分比

           

            vw 跟随视窗宽度的变化而变化

                100vw = 满屏

           

           

            vh 跟随视窗高度的变化而变化

            vmin 谁小听谁的

            vmax 谁大听谁的

           

        需求: 希望页面内容能随着浏览器窗口宽度变化而变化

            ps中测量出来的是          px单位

            因为需求需要用到的单位是   rem

            因为需求要求跟着浏览器窗口宽度的变化而变化 vw

           

        常见页面尺寸:

            750px  dpr=2

                375px = 满屏 = 100vw

                375px = 100vw

                1vw = 3.75px

               

            假设: html{font-size:120px;}

                1rem = 120px

                1rem = 120px / 3.75px = 32vw

                1rem = 32vw

            结论: html{font-size:32vw;}

                工具设置 240     测量出来的数据直接转

                工具设置 120     测量出来的数据减半再转

               

           

           

            640px

                dpr = 2

                320px = 满屏 = 100vw

                1vw = 3.2px

               

                假设html{font-size:120px;}

                1rem = 120px

               

                1rem = 120px /  3.2px = 37.5vw

                结论:

                    html{font-size:37.5vw;}

                    工具设置: 120px  测量出来的数据需要减半再转

                    工具设置: 240px  测量出来的数据直接转

           

            1080px

                dpr = 3

                360px = 满屏 = 100vw

                1vw = 3.6px

               

                假设html{font-size:80px;}

                1rem = 80px

                1rem = 80px / 3.6px = 22.22vw              

               

                结论:

                    html{font-size:22.22vw;}

                    工具设置: 80px  测量出来的数据需要除以3再转

                    工具设置: 240px  测量出来的数据直接转

网格布局

1.  display：grid；  

            display：inline-grid；

            指定一个容器采用网格布局

        2、 grid-template-columns 属性  

            设置每列的列宽,参数的个数决定是几列

                A、grid-template-columns: 100px 100px 100px;

                B、grid-template-columns: repeat(3, 33.33% 200px 300px);

                    repeat()接受两个参数，

                    第一个参数是重复的次数（上例是3），

                    第二个参数是所要重复的值。

                C、grid-template-columns: 1fr 1fr;  

                    fr关键字（fraction 的缩写，意为"片段"）

        3、 grid-template-rows属性

            定义每一行的行高

                /* grid-template-rows: repeat(3,120px); */

        4、 grid-gap属性是grid-column-gap和grid-row-gap的合并简写，设置行和列间距

                grid-column-gap: 10px;

                grid-row-gap: 10px;

                grid-gap: 20px;

        5、 子元素在网格中垂直方向的对齐方式

            align-items: stretch; 默认 拉伸

            align-items: start; 垂直上对齐

            align-items: center; 垂直居中对齐

            align-items: end;  垂直靠下对齐

            子元素在网格中水平方向的对齐方式

            justify-items: stretch; 默认 拉伸

            justify-items: start; 水平靠左对齐

            justify-items: center; 水平居中对齐

            justify-items: end;  水平靠右对齐

            简写

            place-items: 垂直方向对齐 水平方向对齐;

        6、 垂直方向上网格在容器中的对齐方式

            align-content: stretch; 默认拉伸

            align-content: start;   垂直靠上对齐

            align-content: center;  垂直居中对齐

            align-content: end;     垂直靠下对齐

            align-content: space-around;    垂直2:1对齐

            align-content: space-between;   垂直两端对齐

            align-content: space-evenly;    垂直均分对齐

            水平方向上网格在容器中的对齐方式

            justify-content: stretch; 默认拉伸

            justify-content: start;   水平靠左对齐

            justify-content: center;  水平居中对齐

            justify-content: end;     水平靠右对齐

            justify-content: space-around;    水平2:1对齐

            justify-content: space-between;   水平两端对齐

            justify-content: space-evenly;    水平均分对齐

            默认

            place-content: 垂直方向 水平方向;

        7、 （一）移动区域：

            先给父元素划分区域

            grid-template-areas 属性  网格布局允许指定"区域"（area）

                .container {

                    display: grid;

                    grid-template-columns: 100px 100px 100px;

                    grid-template-rows: 100px 100px 100px;

                    grid-template-areas:

                                    'a b c'

                                    'd e f'

                                    'g h i';

                }

            再给子元素grid-area属性指定项目放在哪一个区域

            grid-area:a1;或者

            grid-area: <row-start>行开始 / <column-start>列开始 / <row-end>行结束 / <column-end>列结束;

                例如：

                    第一种：

                        li:nth-child(1){

                            grid-area: i（目标位置）;

                        }

                    第二种：

                        li:nth-child(1){

                            grid-area: 行开始 列开始 行结束 列结束;

                        }

            （二）跨行合并

            先给父元素划分区域

            grid-template-areas 属性  网格布局允许指定"区域"（area）

                .container {

                    display: grid;

                    grid-template-columns: 100px 100px 100px;

                    grid-template-rows: 100px 100px 100px;

                    grid-template-areas:

                                    'a b c'

                                    'd e f'

                                    'g h i';

                }

            再给子元素grid-area属性指定项目放在哪一个区域

            grid-area:a1;或者

            grid-area: <row-start>行开始 / <column-start>列开始 / <row-end>行结束 / <column-end>列结束;

                例如：

                li:nth-child(1){

                    grid-area: a;

                }

                再把父元素中的  grid-template-areas:

                                    'a b c'

                                    'd e f'

                                    'g h i';

                        改成    grid-template-areas:

                                    'a a a'

                                    'd e f'

                                    'g h i';

        8、 项目自己垂直方向的对齐方式

            align-self: stretch; 默认 拉伸

            align-self: start; 垂直上对齐

            align-self: center; 垂直居中对齐

            align-self: end;  垂直靠下对齐

            项目自己水平方向的对齐方式

            justify-self: stretch; 默认 拉伸

            justify-self: start; 水平靠左对齐

            justify-self: center; 水平居中对齐

            justify-self: end;  水平靠右对齐

            place-self  设置项目自己的对齐方式

            place-self是align-self和justify-self的简写

            place-self：start | end | center | stretch；