css、scss基础与进阶

原创已于 2022-08-23 17:51:24 修改 · 639 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

于 2022-04-25 11:54:33 首次发布

前端专栏收录该内容

16 篇文章

订阅专栏

本文介绍了CSS的基础知识，包括选择器、盒子模型、行内元素与块状元素的差异，以及媒体查询和弹性盒子布局。同时，文章还探讨了SCSS的进阶特性，如&符号的使用、全局变量和mixin的实践。通过学习，读者能够提升CSS的运用技巧，并了解如何利用SCSS提高代码组织效率。

前言
css基础与进阶
- css基础
scss进阶
参考文档

前言

公司有些较老的前后端不分离的项目，由于前端人手不足，让好些后端兄弟顶上了，日常改些简单样式，应大家要求，也从大家代码里找了些问题，分享下css的基础（由于问题代码涉及公司，这里就不贴了(^▽)）

css基础与进阶

css基础

选择器（选择器.）
盒子模型（盒子模型.）
正常盒模型宽度计算
offsetWidth = 除了margin的所有宽度相加
怪异盒模型（box-sizing：border-box）
offsetWidth = width（即宽度包含border和padding）
行内元素和块状元素
常用块状元素： < div>、< ul>、< ol>、< h>
常用行内元素： < span>、< a>、< br>、< b>、< input>、< img>
区别：
1.块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，

2.一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效
（注意，块级元素设置了width宽度属性后仍然是独占一行的）

3.块级元素可以设置margin,padding属性
行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果
弹性盒子，flex布局（flex.）
媒体查询
用途： 对于pc端、平板、手机等尺寸不同的设备，如果字号、元素大小都一样，肯定不合适，@media可以针对不同的屏幕尺寸设置不同的样式
语法：

@media mediatype and|not|only (media feature){
      css-code;
}

mediatype ：

在这里插入图片描述

关键字 and not only：
and：可以将多个媒体特性连接到一起，相当"且"于的意思
not：排除某个媒体类型，相当于"非"的意思，可以省略
only：指定某个特定的媒体类型，可省略

media feature 媒体特性

在这里插入图片描述
早期用法

这种就需要写多套css，工作量增大；后来就用rem和媒体查询结合的方式

rem、em和vh、vw
这些响应式单位可以帮助我们很好的适配，但是我们需要自己去计算rem，不是很方便，
目前以有很成熟的插件postcss（vue中使用postcss-pxtorem实现适配.）
css风格
BEM:（block__element–modifier）（推荐）
_: address_item
-: address-item
驼峰: addressItem

scss进阶

&用法（scss）

.addressInfo {
      display: flex;
      flex-direction: column;
      line-height: 28px;
      &__item {
        box-shadow: 2px 2px 5px #edeff4;
        padding: 10px 10px 10px 0;
      }
}

全局变量
对于一些背景颜色、字体颜色，会在项目的多个地方用到，可以写成变量提取出来

variables.scss
/* 所有灰色字体颜色 */
$content-titleColor: #8c8c8c;

使用
.el-footer {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      height: 80px;
      font-size: 12px;
      text-align: center;
      color: $content-titleColor;
      background-color: #ebedf0;
    }

在vue.config.js中引用，不同版本引用方式不同，（配置方式看这里.）
3. mixin
对于一些通用的css样式，可以统一封装
比如超过一定长度展示…

mixins.scss

@mixin ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

使用
@include ellipsis

配置同上

参考文档

一些炫酷的css动画：
3D摇摆动画CSS.
CSS 3D盒子打开动画特效.

参考链接：
什么是媒体查询？.
前端中几个单位（em、rem、vh、vw）的区别.