web前端（css）第二天笔记

文本外观：

    在选择器中{
            首行缩进：text-indent:
                2px;/2em;        //2px在不知名字体大小下缩进两格    //2em在当前字体下缩进两格
        
            对齐方式：text-align:left/center/right;
        
            文本装饰：text-decoration:none    //none去掉超链接的下划线 等样式
            
            行高（字间距）line-height:xxpx        //默认垂直水平居中，所以让行高等于元素高可以让元素在某一行垂直居中
        }

元素水平居中：margin: 0 auto;
元素垂直于中：

鼠标停留hover
    样式：cursor
    

无序列表：

    <style>
        ul li {
            list-style:none    //去掉无序列表默认样式，list-style这个属性后面会覆盖前面的        
              }
    </style>

元素显示模式转换(行内元素不能设置宽高)
    <style>
        div{
            display:inline-block;        //inline-block改成行内块元素，多个div可以在同一行显示。inline改成行内元素，block改成块元素，none隐藏元素脱离文档
            width:
            height:    
               }
        span{
            display:inline-block;        //inline-block;改成行内块元素，就可以加宽高。inline改成行内元素，block改成块元素，none隐藏元素脱离文档
               }
    </style>

注;<a>链接是行内元素

背景：
    <style>
        body{
            height:
            background-color: 
            background-image: url(地址);        //给背景加图片    
            background-repeat: no-repeat;        //图片大小固定，repeat-x沿X轴固定
            background-attachment: fixed;        //滑动屏幕背景不改变
            background-position: top left;        //设置背景图像起始位置
            background-size:            //控制背景图片大小
        span{
               }
    </style>

边框：
    table{border-collapse:collapse}            //消除相邻边框重复部分    
    <style>
        width：
        height：
        background-color：
        border-width：            //border边框  witdth宽度
        border-color：            //边框颜色
        border-style            //边框样式： double双实线 dashed虚线 solid实线
        border-确定哪个角-radius：        //可以写数字或者百分比，代表边框弧度。（50%是一个圆）
        border: 宽度 样式 颜色        //复合写法       
    </style>

<table cellspacing="0">        //合并相邻边框：cellspacing="0"
    <th><th>
    <th><th>
</table>

阴影
    <style>
        width：
        height：
        background-color：
        box-shadow: 20px 20px 10px 10px;        //盒子阴影 后面是四个偏移量参数
        text-shadow: 颜色 x轴偏移量  y偏移量        //文字阴影
    </style>

轮廓线：
    <style>
        input{
            outline="none"    //取消轮廓线
            }    
    </style>

文本域
    <style>
        textarea{                        //<textarea>文本域标签
            resize: none                //防止文本拖拽
            vertical-align:top/middle/bottom        //改变文本域与前面文字的对齐方式
            
            }    
    </style>

隐藏元素
    <style>
        选择器{display：none}        //脱离文本，位置不会被保留        
        选择器{visibility: hidden}        //元素隐藏，位置保留
        选择器{opacity: 0}            //透明度设为0了
    </style>

定位(显示优先级:   z-index:)

绝对定位：选择器{
        position:relative            //相对定位
        width：
        height：
        background-color：
        }
    选择器{
        whith：
        height;
         background-color:
·        position:absolute            //绝对定位，不保留原来位置
        top/left/right:                //距离顶部/左部/右边多远（若所有上级都没有相对定位，则根据浏览器）
    }

固定定位
    选择器{
        width：
        height：
        background-color：
        position:fixex            //固定定位：相对于可视区域进行定位
        }

粘性定位
    选择器{
        width：
        height：
        background-color：
        position:sticky                
        top:                //距离顶部xx的时候脱离文本，并固定在可视区域
        }

    

内边距：padding-top/left/right/bottom: xx px        //文字与边框的距离，但是会扩大边框的范围
解决padding、border影响盒子大小问题:    box-sizing: border-box

外边距：margin-     /    /       :                    //不影响盒子大小

外边距塌陷问题解决方案，给父级加一个边框

文本溢出：overflow:auto/hidden

css样式继承:    <a></a>不继承父级的（某一些）修改，建议单独修改
        其他子级只继承对布局无影响的样式

    

flex布局:
    给父级选择器加上: display: flex;
            flex-direction:row/column    //横着排列/竖着排列
            flex-wrap: wrap/nowrap    //到了父级临界点自动换行/不换行
主轴
在一行水平居中：justify-content: center
在一行平均分配（两边占满）justify-content: space-between
在一行平均分配（两边不占满）justify-content: space-around
侧轴
在一列垂直居中 aline-items:center
在一列平均分配（两边占满）aline-content: space-between

order:         //值越小 排列越靠前

浮动：会脱离文档流，不再保留原来位置，会造成在其下方的兄弟元素位置发生变化    //float: left
当子元素发生浮动时，其父元素的高度发生塌陷。
解决办法：1.clear:both    //表示从这里开始，后面不浮动/清除浮动
    

渐变:    background-image:linear-gradient(颜色1，颜色2..........)

字体图标：
1阿里巴巴矢量图标库
2.加入购物车，添加项目，在项目里下载
3.开大文件中html有说明书
4.字体图标控制大小font-size:

媒体查询：

    @media only screen and(max-width:699px) and (min-width:550px)    //可视窗口超出550-899这个范围，则执行下面的代码
    div
    {
        backgrount-color:
    }

2D：
位移：
    transform：translateX/Y(40px)                //x轴偏移量，y轴偏移量（平移）
    transform：rotazeX/Y/Z(40deg)            //绕X/Y/Z轴旋转，deg是单位度
为了避免覆盖，采用复合写法:
    transform：translateX/Y(40px) rotazeX/Y/Z(40deg)        //中间没有逗号，且旋转放在最后

缩放：    transform：scale（）                //空号里面填数字，变为原来的多少倍
    transform：scaleX（）                //沿着X轴缩放，下同
    transform：scaleY（）

3D：
    transform-style：presever-3d                //在父元素开启3D模式
    transform：translateZ(40px)                
    perspective:                    //方便看变化
    transform：rotazeX/Y/Z(40deg)            //绕X/Y/Z轴旋转，deg是单位度
    transform：rotaze(1/0，1/0，1/0，xxdeg)            //让几个轴同时转，1转 0不转
    transform-origin：top/bottom                    //改变原点位置

过渡：    transition：某个属性/all  2s;                    //给变化一个时间

动画:
    @keyframes 编一个动画名
            {
                from{.....}        //也可以写0%{}            
                to{.......}        //    10%{}
            }            //。。。。。。。给的帧数越多，动画越流畅
    <div>
        {
        animation:动画名 时间..................            //有很多属性（必须要名字和时间）
        
        }
    </div>.