css 笔记

kevinlaizhiyu
126 阅读7分钟

CSS 基础

1. div

  • 基本概念 每一个元素都是一个矩形，不论是图片，文字，div，span，都是一个矩形，

2. display

展示属性，确定这个元素的显示方式

  • block 展示为块级元素，特点是，每一个 block 元素，都会独占一行

  • inline 展示为行内元素，特点是，每一个 inline 元素，都会在一行显示，例如 就是一个行内元素，常见的文本都是行内元素。并且没有宽高，想要控制高度，需要设置 line-height 属性，意为行高，例如：line-height: 24px, 如果想要一个 <span></span> 元素拥有高度和宽度，需要设置 display: inline-block 属性 or display: block 等。

  • inline-block 行内块，综合了 block 和 inline 的特点，一行内展示，但是元素可以拥有设置宽高的能力。

  • none 直接隐藏该元素

  • flex 弹性盒模型，很重要，很方便，很广泛；

    • flex-direction; 弹性盒的方向

      • row; 横向排列
      • column; 纵向排列

    • justify-content; 主轴的对齐方式

      • flex-start; 头部对齐
      • flex-end; 尾部对齐
      • center; 居中

    • align-items; 侧轴的对齐方式

      • space-around; 均分对齐（外层包裹）
      • space-between; 两端对齐
      • space-evenly; 均分对齐（完全均分）
      • flex-start; 头部对齐
      • flex-end; 尾部对齐

    • flex-wrap; 是否换行

      • wrap; 换行
      • no-warp; 不换行

  • grid

    • grid-template-columns;
    • grid-template-rows;

3. width height

  • px 像素点，十分精确，一般多用在电脑 PC 网站的开发

  • % 百分比，即为父元素的尺寸的百分比

  • em 是相对长度单位，表示相对当前对象内文本的字体尺寸的倍数。例如，如果当前字体尺寸为 16px，则 1em 等于 16px。em 的值不是固定的，它会随着父元素字体大小的改变而改变。

  • rem 也是相对长度单位，但它表示的是相对于根元素（html 元素）的字体大小的倍数。无论父元素的字体大小如何改变，rem 的值都保持不变。

  • vw vh 是视口单位，即视口的宽度和高度，即浏览器窗口的宽度和高度,例如：1vh 为视窗高度的 1%；10vw 为视窗宽度的 10%;

5. margin

外边距，即元素外侧的边距，有四个详细边距属性，和一个综合属性 详细属性如下：

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

综合属性如下

  • margin 该属性用法有四种，以下为例：
margin: 10px; // 表示上下左右都为 10px
margin: 10px 20px; // 表示上下为 10px，左右为 20px
margin: 10px 20px 30px; // 表示上下为 10px，左右为 20px，底部为 30px
margin: 10px 20px 30px 40px; // 表示上为 10px，右为 20px，底为 30px，左为 40px

6. padding

内边距，即元素内侧的边距，有四个详细边距属性，和一个综合属性，以及一个盒模型属性。

四个详细属性

  • padding-top

  • padding-bottom

  • padding-left

  • padding-right

    综合属性如下

  • padding 该属性用法有四种（方法和顺序与 margin 一样的），以下为例：

padding: 10px; // 表示上下左右都为 10px
padding: 10px 20px; // 表示上下为 10px，左右为 20px
padding: 10px 20px 30px; // 表示上下为 10px，左右为 20px，底部为 30px
padding: 10px 20px 30px 40px; // 表示上为 10px，右为 20px，底为 30px，左为 40px
  • box-sizing 盒模型，从单词上看，简单理解为 盒子尺寸的计量方式（_ 重要 _）
    • border-box 表示以元素边框为尺寸基准
    • content-box 表示以内容为尺寸基准

7. border

边框属性，设置元素的边框样式，四个具体属性，一个综合属性，圆角，颜色，宽度。

  • border-top

  • border-bottom

  • border-left

  • border-right

  • border 该属性包括三个属性值，分别表示 边框宽度，边框线类型，边框颜色，例如：border: 1px solid #000;

  • border-radius 圆角值 border-top-left-radius 左上角 border-top-right-radius 右上角 border-bottom-left-radius 左下角 border-bottom-right-radius 右下角

border-radius: 10px; // 上右下左都是10px
border-radius: 10px 20px; // 上下 10px 左右 20px
border-radius: 10px 20px 30px; // 上10px 左右20px 下30px
border-radius: 10px 20px 30px 40px; // 上10px 右20px 下30px 左40px
  • border-color 边框颜色
  • border-width 边框宽度

8. background

  • background-color 背景色
  • background-image 背景图片
background-image: url("./img/1.jpg");
  • background-repeat 是否重复
background-repeat: repeat; // 重复
background-repeat: no-repeat; // 不重复
  • background-size 背景尺寸
background-size: 100% 100%; //横向100% 纵向100%
background-size: 100%; //横向 纵向 100%
background-size: cover; // 最小边铺满
background-size: contain; // 最大边铺满
  • background-position 背景位置
  • background 可以设置颜色，可以设置图片

9. position

定位

  • relative 相对位置 参考位置为元素本来的位置，
  • absolute 绝对位置 参考位置为父元素 position 为 relative 的元素的位置
  • fixed 固定位置 参考位置为浏览器窗口的位置
  • sticky 粘性定位 参考位置为浏览器窗口的位置，当滚动到一定位置时，元素会自动到达指定位置
  • static 静态定位 参考位置为元素本来的位置

设置位置类型之后，需要通过下面属性设置位置

  • top
  • bottom
  • left
  • right

设置元素层级

  • z-index

10. float

浮动

11. ::after ::before

  • 高度塌陷 解决办法：触发 BFC（Block Formatting Context ,是 Web 页面中盒模型布局的 CSS 渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器，） overflow:hidden; 或 display:flex; 或 display:table; 参考链接

iconfont 字体图标

  • 下载 svg, 例如：阿里巴巴矢量图标库 iconfont 官网下载 svg
  • 上传到图标仓库，例如: 腾讯设计协作平台 codeDesign 上传 svg 到图标仓库
  • 下载字体文件，下载图标仓库的字体文件，并解压，复制文件到工程路径 assets/font 中
  • 在复制的代码中加入以下代码,，表示所有以 icongd- 开头的元素，都使用字体图标的字体；如果不加，那么想要使用字体，就要给每个元素的 class 加上 gdiconfont 类名
[class^="icongd-"],
[class*="icongd-"] {
  font-family: "gdiconfont" !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
  line-height: 1;
}

<i class="icongd-xxx"></i>
<!-- 如果不加上述代码，那么想要使用字体，就要给每个元素的class加上gdiconfont类名 -->
<i class="gdiconfont icongd-xxx"></i>
  • 在 App.vue 中引入字体文件
  • 在组件内使用 icon, 例如：OtherList.vue 中
<text class="icongd-arrow-right"></text>

样式变量

样式变量，即将样式变量定义为一个变量，然后在不同的地方引用这个变量，这样可以减少代码量，提高代码的可维护性。

应用场景：主题更换

css 变量

:root {
  --color-primary: #333;
}

.box {
  color: var(--color-primary);
}

scss 变量

$color-primary: #333;
.box {
  color: $color-primary;
}

scss 等 css 高级处理工具，虽然语法不同，但是本质上还是把变量编译成 css 可识别的 var() 语法。

scss 变量操作步骤

  • 定义变量
    • assets/styles/index.scss 作为全局变量文件的入口文件，此处引入不同的变量模块；
    • assets/styles/font.scss 中定义了字体大小变量；
$fz-sm: 12px;
$fz-md: 14px;
$fz-lg: 16px;
$fz-xl: 18px;
$fz-xxl: 20px;
$fz-xxxl: 22px;

  • 全局引用变量

    • uni.scss 中引入，例如：
@import "@/assets/styles/index.scss";
  • 使用变量，例如：OtherList.vue 中
.list-item-text {
  font-weight: 500;
  font-size: $fz-xl;
  text-align: left;
  color: #333;
}
avatar
文章
阅读
粉丝