search

qiwihui / blog

技术和思考，基于issues
https://qiwihui.com
43 stars 2 forks source link

CSS 基础──样式篇 #147

Open qiwihui opened 2 years ago

qiwihui commented 2 years ago

《前端小课──用好HTML》的读书笔记。

使用css三种方式

  1. 外部引入：通过 link 的方式引用 CSS 样式

    <head>
    <link rel="stylesheet" href="style.css">
</head>

  2. 内部引入，在 HTML 中的 head 位置添加 style 标签

    <head>
  <style>
    .title {
      color: red;
      font-size: 18px;
    }
  </style>
</head>

  3. 内联样式

    <p style="color: red; font-size: 18px;">内容</p>

块级标签和 inline 标签

overflow 属性

/* 默认值。内容不会被修剪，会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪，并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪，浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺，如果内容被修剪，就会显示滚动条（默认值） */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

清除标签默认边距

/*清除标签默认边距*/
* {
    margin: 0;
    padding: 0;
}

CSS中的选择器

Untitled

注意：写 CSS 代码的时候，即使某个属性写错，浏览器也不会报错，只会忽略无法识别的 CSS 样式。

伪选择器

  1. 伪类选择器：作用是选中某个元素中符合某些条件的元素。作用于现有元素，相当于给现有元素添加某些属性。使用单个冒号 :

    :first-child
:not
:nth-child()
:only-child()
:root()
:disabled

  2. 伪元素选择器：作用就是给现有元素添加某些新的内容，就好比给某个元素添加了一个新的标签，使用2个冒号 ::

    ::first-letter 表示对首字母进行操作
::first-line 对首行内容进行操作
::before 给已知元素的前面拼接新的内容
::after 给已知元素的后面拼接新的内容

@规则

@规则在CSS中用于传递元数据、条件信息或其他描述性信息。它们以at符号（@）开头，后跟一个标识符来说明它是什么类型的规则，然后是某种类型的语法块，以分号（；）结尾。由标识符定义的每种类型的 at 规则都有其自己的内部语法和语义。

@charset and @import (metadata)
@media or @document (条件，嵌套申明)
@font-face (描述信息)

下面这个 CSS 只适用于屏幕超过 800px 的设备：

@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}

@media 语法

@media mediaType and|not|only (media feture) {
  // css
}

border

一些文字属性

font-size: 文字大小；

font-weight：字重，字体粗细，可以这样理解吧；

color：字体颜色；

text-align：字体对齐方式；

text-decoration: 文字修饰，比如下划线，删除线；

letter-spacing: 文字间距；

line-height: 行高；

font-style:  文字样式，比如斜体；

盒子模型

两种盒子类型

  1. 块级盒子（block）
    • 尽可能扩大可利用的空间
    • 独占一行，也就说一个块级元素占一行
    • 可以使用 width 和 height 属性
    • 使用 padding、margin 和 border 会影响其它元素的位置
  2. 行内盒子（inline）
    • 不会单行显示，除非一行没有足够多的空间，它会一个接一个地排列；
    • width 和 height 属性不起作用，如果给 span 标签设置 width 或 height 时，发现无效；
    • padding、margin 和 border 会起作用，但不会影响其它元素。

通过 display 修改盒子的显示方式

.title {
    display: inline;
}

盒模型

Untitled 1

模式

  1. 标准的盒子模型

    对于这种盒子模式，给它设置的 width 和 height 是 content 的宽高，当给盒子添加 padding 和 border 的时候，会增加盒子的整体大小。「外边距不会计入盒子的大小，它只是表示外部的边距」。

  2. 诡异盒子模型（The alternative CSS box model）

    对于这种盒子模式，给它设置的 width 和 height 是盒子的宽高，也就是说内容 content 的宽需要减去 border 和 padding 的宽。

谷歌浏览器默认的是标准的盒模型，可以通过：

box-sizing: border-box;

来修改盒模型为诡异盒模型。

display

  1. display：inline

  2. display：block

  3. display：inline-block

    这种布局方式结合了 inline 和 block 这两种元素的特性，它与块级元素不同的是：元素不会单独占用一行；相同的是：可以使用 width 和 height，可以通过 padding、margin 和 border 来控制元素的显示位置。

    说白了就是除了不会单独占一行，其余的与块级元素一致。

  4. display：none 隐藏元素

  5. display：flex 一维

  6. display：grid 二维

使用图片

  1. 设置背景图

            background-color: antiquewhite;
    background-image: url('./logo_suyan.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    • background-postion: 表示背景图的起始位置；
      • background-postion： top | left | bottom | right，在某个边缘的位置，另一个维度为 50%。比如 top，背景图的起始位置为顶部，在X轴方向为 50%，居中显示；
      • background-postion：center，居中背景图；
      • background-postion：25% 75%，设置基于背景区域的开始位置，可以为负值；
      • background-postion-x：背景在 x 轴上的位置；
      • background-postion-y：背景在 y 轴上的位置；
    • background-repeat: 背景的重复方式， no-repat 不重复， repeat 重复， repat-x X轴上重复，还有其它关键字。
    • background-size: 背景图的大小；

  2. img 标签

    行内（inline）元素

    <img class="logo" src="./images/1.png" alt="图片">
    .logo {
        /* 表示设置图片的宽度，如果只设置宽度，那么 img 标签的高度会根据图片的大小进行等比缩放。
       只设置高度也是同样的道理。
       如果即设置了高度又设置了宽度，那么图片的高度和宽度即为设置的宽高。 */
    width: 30px;
    /* 指定行内元素的垂直对齐方式 */
    vertical-align: middle;
}

显示多行文字

text-overflow 和 -webkit-line-clamp

.singal-line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.two-line {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

text-overflow：只对块级元素起作用，表示对超出指定区域的内容该如何显示

-webkit-box：webkit 的 CSS 扩展属性

CSS权重

Untitled 2

Untitled 3

动画

主要有两种方式

  1. animation
    • animation-name: 动画的名字，这个是通过 @keyframes 定义的名字。 @keyframes 指定某一帧的动画如何变化，可通过 % 来控制各个阶段的属性值
    • animation-duration：动画的持续时间；
    • animation-delay：动画开始时的延迟时间；
    • animation-iteration-count：动画循环次数；
    • animation-direction：动画的方向，比如 alternate 表示先正向后逆序，nomal 正向，reverse 逆序；
    • animation-timing-function：动画的时间曲线，它的值有 ease、ease-in、ease-out、ease-in-out、linear；
    • animation-fill-mode：动画执行后的填充模式，它的值有 forwards、backwards、none、both；
        .move-box-animation {
            /* animation: name duration timing-function delay iteration-count direction fill-mode; */
            /* 名字，为 @keyframes 的名字 */
            animation-name: move;
            /*  动画的时间 */
            animation-duration: 5s;
            /* 动画执行函数 */
            animation-timing-function: ease-in-out;
            /* 动画延迟时间 */
            animation-delay: 1s;
            /* 动画重复次数 */
            animation-iteration-count: 10;
            /* 动画的方向，先正向后逆向 */
            animation-direction: alternate;
            /* 动画执行后的填充模式 */
            animation-fill-mode: backwards;
            /* 动画的运行状态 */
            animation-play-state: running;
        }

        @keyframes move {
            0% {
                left: 0;
                top: 0;
            }

            25% {
                left: 100px;
                top: 0;
            }

            50% {
                left: 100px;
                top: 100px;
            }

            75% {
                left: 0;
                top: 100px;
            }

            100% {
                left: 0;
                top: 0;
            }
        }
  1. transition
    • 过渡动画，修改某些属性的时候不会立刻生效，它会以动画的形式逐渐过渡到要设置的值
    • transition-property: 指需要使用过渡动画的属性，这里设置了背景色，高度和宽度。也可以通过关键字 all 设置所有的属性；
    • transition-duration: 动画持续的时间，可以单独控制某个属性的时间， transition-duration：1.8s, 1.0s, 1.0s 表示修改 background-color 需要 1.8s, 修改 height 需要 1.0s,  修改 width 需要 1.0s;
    • transition-delay：动画开始时需要延迟多长时间才开始执行；
    • transition-timing-function：表示动画执行时的时间函数，不同函数走过的曲线不一样；
.move-transition {
    /* transition-property: all; */
    transition-property: background-color, height, width;
    transition-duration: 1.8s, 1.0s, 1.0s;
    transition-delay: 0.1s;
    transition-timing-function: linear;
}

长度单位

  1. 相对单位：相对单位指它的尺寸是相对于另外一个元素的尺寸。常用的是 em、rem、vh、vw、vmin、vmax。
    • em: 它是相对于「自身或父元素」的 font-size 来计算自身的尺寸
    • rem（font size of root element）: 这个单位是依据「根元素 html 标签」的 font-size 来计算最终的值，这个单位对移动端web开发十分实用，通过设置 html 的 font-size 来等比缩放元素的大小。
    • vw（viewport width），可视区域宽度，比如设置 50vw，相当于可视区域宽度的一半；
    • vh（viewport height），可视区域高度，比如设置 50vh，相当于可视区域高度的一半；
    • vmax: vw 和 vh 中最大的；
    • vmin: vw 和 vh 中最小的；
  2. 绝对单位
    • 像素 px， cm等
  3. 时间单位
    • s
    • ms

易复用、易维护、结构清晰的 CSS

less，sass

GitHub repo: qiwihui/blog

Follow me: @qiwihui

Site: QIWIHUI