乐趣区

关于前端:css的基础样式看这一篇就行了

jiezi

根底款式

原文链接：https://note.noxussj.top/?sou…

定位相干

绝对定位 
.my-content {position: relative;}
相对定位 
.my-content {
    position: absolute;
    left: 0;
    top: 0;
}
固定定位 
.my-content {
    position: fixed;
    left: 0;
    top: 0;
}
定位元素层级

留神：z-index 设置 -2 以下则在页面中不会显示 

.my-content {z-index: -1;}

盒子相干

盒子尺寸 
.my-content {
    width: 100px;
    height: 100px;
}
盒子间距

外边距 

.my-content {
    /* 上、右、下、左 */
    margin: 10px;

    /* 高低、左右 */
    margin: 10px 20px;

    /* 上、左右、下 */
    margin: 10px 20px 10px;

    /* 上、右、下、左 */
    margin: 10px 20px 10px 20px;

    /* 上 */
    margin-top: 10px;

    /* 右 */
    margin-right: 20px;

    /* 下 */
    margin-bottom: 10px;

    /* 左 */
    margin-left: 20px;
}

内边距（写法与 margin 雷同）

.my-content {padding: 10px;}

盒子背景

背景色彩 
.my-content {
    /* 写法 1 */
    background-color: #fff;

    /* 写法 2 */
    background: #fff;
}
突变背景 
.my-content {
    /* 线性突变 */
    background: linear-gradient(90deg, #000, #f00);

    /* 径向突变 */
    background: radial-gradient(#000 25%, #f00 50%, #ff0 100%);
}
背景图片 
.my-content {
    /* 写法 1 */
    background: url('./images/head.png');

    /* 写法 2 */
    background-image: url('./images/head.png');

    /* 背景图片填充模式 */
    background-repeat: no-repeat;

    /* 背景图片缩放尺寸 */
    background-size: 100% 100%;

    /* 背景图片地位 */
    background-position: left bottom;
}
盒子边框 
.my-content {
    /* 宽度、实线、蓝色 */
    border: 5px solid blue;

    /* 右边边框色彩 */
    border-left-color: #f00;

    /* 右边边框宽度 */
    border-left-width: 2px;

    /* 右边边框线条 */
    border-left-style: dotted;
}
盒子圆角 
.my-content {
    /* 像素值 */
    border-radius: 6px;

    /* 百分比，圆形 */
    border-radius: 50%;
}
盒子暗影 
.my-content {
    /* 程度偏移值、垂直偏移值、含糊水平、暗影大小、暗影色彩 */
    box-shadow: 0 0 8px 8px #000;
}
盒子展现形式 
.my-content {
    /* 内联元素（不受宽度高度影响，宽度占位依据内容决定）*/
    display: inline;

    /* 块级元素（受高度宽度影响，宽度占位一整行）*/
    display: block;

    /* 块级元素（新的布局形式，受高度宽度影响，宽度占位一整行）*/
    display: flex;

    /* 行内块级元素（受高度宽度影响，宽度占位依据内容决定）*/
    display: inline-block;

    /* 行内块级元素（新的布局形式，受高度宽度影响，宽度占位依据内容决定）*/
    display: inline-flex;

    /* 暗藏盒子 */
    display: none;
}
盒子透明度 
.my-content {
    /* 盒子透明度为 50% */
    opacity: 0.5;
}
盒子模型 
.my-content {
    /* 默认、规范盒模型（W3C 盒模型）*/
    box-sizing: content-box;

    /* 举荐应用、怪异盒模型（IE 盒模型）*/
    box-sizing: border-box;
}

字体相干

字体色彩 
.my-content {color: #f00;}
字体大小 
.my-content {font-size: 14px;}
字体加粗 
.my-content {
    /* 写法 1 */
    font-weight: 500;

    /* 写法 2，举荐 */
    font-weight: bold;
}
字体类型 
.my-content {font-family: Arial, Helvetica, sans-serif;}

/* 自定义字体类型 */
@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

.my-content2 {font-family: myFirstFont;}
行高 
.my-content {line-height: 30px;}
文字水平间距 
.my-content {letter-spacing: 2px;}
文本暗影 
.my-content {
    /* 左右偏移、高低偏移、暗影含糊水平、暗影色彩 */
    text-shadow: 5px 5px 5px #ff0000;
    text-overflow: clip;
}

对齐相干

程度对齐形式 
.my-content {
    /* 居左 */
    text-align: left;

    /* 居中 */
    text-align: center;

    /* 居右 */
    text-align: right;
}
垂直对齐形式 
.my-content {
    /* 元素搁置在父元素的基线上 */
    vertical-align: baseline;

    /* 垂直对齐文本的下标 */
    vertical-align: sub;

    /* 垂直对齐文本的上标 */
    vertical-align: super;

    /* 把元素的顶端与行中最高元素的顶端对齐 */
    vertical-align: top;

    /* 把元素的顶端与父元素字体的顶端对齐 */
    vertical-align: text-top;

    /* 把此元素搁置在父元素的中部 */
    vertical-align: middle;

    /* 使元素及其后辈元素的底部与整行的底部对齐 */
    vertical-align: bottom;

    /* 把元素的底端与父元素字体的底端对齐 */
    vertical-align: text-bottom;
}

动画相干

2D 转换 
.my-content {
    /* 往右边偏移 100px */
    transform: translateX(100px);

    /* 往下边偏移 100px */
    transform: translateY(100px);

    /* 整体放大 1.5 倍 */
    transform: scale(1.5);

    /* 整体顺时针旋转 45 度 */
    transform: rotate(45deg);

    /* 程度方向，整体顺逆时针歪斜 45 度 */
    transform: skewX(45deg);

    /* 垂直方向，整体顺时针歪斜 45 度 */
    transform: skewY(45deg);
}
3D 转换 
.my-content {
    /* 创立 3D 场景 */
    transform-style: preserve-3d;

    /* 沿着 X、Y、Z 轴顺时针旋转 40 度 */
    transform: rotateX(40deg) rotateY(40deg) rotateZ(40deg);

    /* 沿着 X、Y、Z 轴偏移 100px */
    transform: translateX(100px) translateY(100px) translateZ(100px);
}
动画 & 过渡 
/* 创立动画 */
@keyframes myMove {
    /* 动画 0% 时候的状态 */
    0% {transform: translateX(0);
    }

    /* 动画 100% 时候的状态 */
    100% {transform: translateX(300px);
    }
}

.my-content {
    /* 设置动画：动画名称、动画实现工夫（也叫过渡工夫 5S）、挪动曲线速度（线性）、提早执行、动画反复次数（有限次）、是否沿路返回（是）*/
    animation: myMove 5s linear 0s infinite alternate;
}

其余

多媒体查问 
/* 浏览器窗口小于 1000px 时，设置背景为蓝色 */
@media screen and (max-width: 1000px) {
    .my-content {background: blue;}
}
内容溢出 
.my-content {
    /* 内容溢出，呈现 x、y 轴滚动条 */
    overflow: auto;

    /* 内容溢出，暗藏溢出元素 */
    overflow: hidden;

    /* 内容溢出，呈现 x 轴滚动条 */
    overflow-x: auto;

    /* 内容溢出，呈现 y 轴滚动条 */
    overflow-y: auto;
}

最全面的前端笔记来啦，蕴含了入门到入行的笔记，还反对实时成果预览。小伙伴们不须要在花工夫去写笔记，或者是去网上找笔记了。面试高频发问和你想要的笔记都帮你写好了。反对挪动端和 PC 端浏览，深色和浅色模式。

原文链接：https://note.noxussj.top/?sou…

退出移动版