css笔记

定义变量
--xxx:属性值(任意)

使用
:root{      写在root内则为全局变量
   --a:red
}

body{

　　background:var(--a,#eee(如果变量未赋值则使用基础值));

}

响应式布局

/* 小于768的设备 */
@media (max-width:768px) {

    body,
    html {
        font-size: 10px;
    }
}

/* 大于768小于992的设备 */
@media (min-width: 768px) and (max-width:992px) {

    body,
    html {
        font-size: 10px;
    }
}

/* 大于992小于1200的设备 */
@media (min-width: 992px) and (max-width:1200px) {

    body,
    html {
        font-size: 12px;
    }
}

/* 大于1200的设备 */
@media (min-width: 1200px) {

    body,
    html {
        font-size: 16px;
    }
}

 

文本超出隐藏(需要设置宽度)
wite-space:nowrap    字体不换行
overflow:hidden         超出隐藏不显示滚动条
text-overflow:ellipsis  超出显示省略号


数据以xxpx则是固定值
以xxrem并引入自适应框架则可以设置为自适应

* 选择全部{
margin:0px；取消所有外边框
}
id的优先级高于class

overflow:auto   如果超出，会显示滚动条
                hidden   超出后删除超出部分
                (使用定位后无法使用)
                visible  不裁剪内容，可以显示在内容框外
word-wrap:normal  文本超出后换行
word-break:normal  换行规则，与上面的同时使用

    ●z-index:1  设置元素堆叠顺序，可以是负数，数越小堆叠越靠前
    ●div，p{}  同时选择div和p标签
    ●height  高
    ●width  宽
    ●color:#fff   !important加强优先级                     
                 transparent透明
    ●resize:none  不允许用户调整元素大小
                  both  允许用户调整元素大小
    ●box-sizing:border-box   设置容器宽度为width，内容宽度可能会被压缩，设置了padding和border总宽度不会变 怪异盒模型
    ●background:linear-gradient([to right(从左边开始)/90deg],颜色1,颜色2……)   线性渐变色
      rgba(255(颜色rgb),255,255,0~1(透明度))
    ●background-attachment:fixed  背景图片不随页面滚动而滚动
       scroll  背景图片随页面滚动而滚动(默认)
    ●background-position:0px(水平位置) -20px(垂直位置) 设置背景图片的起始位置                   
    ●background-size:cover  图片撑满容器(完整显示)

　●background-repeat: no-repeat;　　图片不重复显示
    ●box-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影的大小 阴影的颜色 inset(内层阴影)
    ●text-shadow  字体阴影，水平阴影位置 垂直阴影位置 模糊距离 颜色
    ●opacity:0~1    透明度
    ●filter:blur(10px)    值越大越模糊
    ●bg-size:100%   100%   背景图片铺平
    ●margin  外边距距离(上右下左)  auto左右居中(相对于页面整体居中，需要有宽高)　　如设置了子元素外边框距离，而父元素没有设置边框，则父元素边框距离也会随之改变
    ●vertical-align:-5px
        middle  将此元素在父元素中垂直方向      
        居中显示(把此元素放置在父元素中     
        部)，只对行内元素有用
        top  此元素顶端与父元素顶端对其
        bottom 此元素及后代与整行的底部对其
    ●padding  内边距
    ●border   边框   solid  实线
    ●border-right-color:red   设置右边框颜色
    ●border-radius:100%(圆形)/20px  边框角度
    ●border-bottom:dashed  下边框虚线  
                                  solid实线
    ●display:block  将此元素显示为块级元素
              none 隐藏对象(不占位)
              inline 行内元素(不能更改宽高，padding上下左右都可以改，margin只有左右能改)
              inline-block  行内块元素(不独占一行的块级元素)
              flex 生成flex容器(写在父元素中)，
                     使元素横向排列
              table-cell  次元素会作为一个表格单
                                元格显示
    ●font-size   字体大小
    ●font-weight:bold  字体加粗
    ●text-indent:2em   两个字的间隙
    ●text-align:   center   字体左右居中
    ●text-decoration:none    取消下划线 a
    ●line-height:xpx   行间距
    ●list-style:none  取消列表符号 ul或li
    ●float:left  左浮动  right  右浮动
    ●visiblity:hidden隐藏  visible显示(会占位)
    ●ul li a:hover{} 鼠标移动上去的样式
    ●position:absolute   绝对定位
    ●position:fixed  在页面上悬浮显示
    ●position:relative   相对定位（作为绝对定位的相对值）（单独用时是相对于自己）/把菜单由纵改为列
    ●top:xpx   向下移动xpx
    ●right   向右

　　right:calc(50% - 20px)　　左移50%右移20px，符号两边需要打空格隔开
    ●left  向左
    ●bottom  向上
    ●user-select:none  文本不能被选中
    ●cursor:pointer  鼠标显示为可点击
                   default  鼠标默认光标状态


content属性
在xx之前
a:before{
content:“xxxx”    在a标签文本前插入内容文本
content:/2566(16进制编码)    插入图标
content:url(xxx)  插入图片

左上角加小边框
content:"";
position:absolute;
top:0;
left:0;
width:10px;
height:10px;
border-left:2px solid #xxx;
border-top:2px solid #xxx;
border-top:50px solid transparent  ;//加长虚影

 

添加倒小三角

width: 0;

height: 0;

position: absolute;

content: "";

right: 50%;

top: 60px;

border-right: 7px dashed transparent;　　　透明边框

border-top: 7px solid #fff;　　　白色背景色

border-left: 7px dashed transparent;

}

在xx之后
a:after{
content:attr(href)     在a标签内容之后插入a标签的超链接(www.xxx.com)
}