css引用的方式

  • 内联方式：直接在 HTML 标签中的 style 属性中添加 CSS。
  • 嵌入方式：在 HTML 头部中的 <style> 标签下书写 CSS 代码。
  • 链接方式：使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。

选择器

  • 类型选择器：直接写类型，例如：“h1”
  • ID 选择器：#
  • 类选择器：.
  • 伪类：例如 button:hover {
  • 伪元素，伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。例如 a::after
  • 后代选择器 p div(中间是空格)
  • 子选择器 p > div
css 选择器之间的空格和逗号的区别

  • 当两个选择器之间有空格的情况下，代表的是子类选择器

    .a .b{}
    代表的是 a 类的 b 子类

  • 而两个选择器之间没有空格的情况下，代表的是同时拥有两个类名的标签
    <div class="a b"></div>
    .a.b{}

  • 当两个选择器之间是逗号的情况下，代表的是选择了两个类选择器

<div class="a"></div>
<div class="b"></div>
.a,.b{}

  • vh :视图相对高度(view height)

  • overflow: auto;可以让中间部分在指定区域内滑动

  • css绘制三角形

    具体思路是：div 本身的宽和高都设置为 0，靠四边的宽度来绘制三角形
    border-bottom 绘制红***域
    border-left 绘制透明区域
    思路参考博客使用 css 绘制一个三角形

.triangle {
   
  display: inline-block;
  width: 0;
  height: 0;
  border-bottom: 30px solid red;
  border-left: 20px solid transparent;
  position: absolute;
  right: 90px;
}

  • position: absolute;来控制 header 和 footer 固定不动

  • border-radius 设置时顺序是左上，右上，右下，左下。

  • padding 和 margin 的区别：

    margin 是指从自身边框到另一个容器边框之间的距离，就是容器外距离。
    padding 是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

  • box-shadow: none;设置该盒子模型选中时不出现阴影（login 页面使用）

  • 输入框最好设置一个 padding，这样可以让输入的文字不贴边

  • justify-content: center; 项目位于容器的中心。

  • align-content 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）.

    • 注意：容器内必须有多行的项目，该属性才能渲染出效果。

  • display:inline-block; 表示的是行内块状元素

    行内块状元素的特点是：
    既能够设置宽高，又不独自占据一行
    （块元素，如 div、p 等，默认情况下能设置宽高，但独自占据一行
    行元素，如 span、strong 等，默认能够和其他行元素处于同一行，但是不能设置宽高）

  • nav 标签：在传统 html5 以前版本 Html 布局中作为导航条相关常用命名来使用

<nav class="tabs">
  <ul>
    <li class="tab-item tab-active">好文精选</li>
    <li class="tab-item">热门资讯</li>
  </ul>
</nav>

  • ul：无序列表

  • ol：有序列表

  • li：解说列表项目，可用于无序列表和有序列表

  • main 标签

    <main> 标签规定文档的主要内容。
    <main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
    注释：在一个文档中，不能出现一个以上的 <main> 元素。<main> 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

  • a 标签

    定义超链接
    Baidul

  • i 标签显示斜体文本效果。

  • position 属性：

absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative

生成相对定位的元素，相对于其正常位置进行定位。
因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。

static

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit

规定应该从父元素继承 position 属性的值。

  • box-sizing 属性

    允许您以特定的方式定义匹配某个区域的特定元素。
    content-box

    这是由 CSS2.1 规定的宽度高度行为。
    宽度和高度分别应用到元素的内容框。
    在宽度和高度之外绘制元素的内边距和边框。

border-box

为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

  • flex-direction 属性

    规定弹性项目的方向。
    row,row-reverse,column,column-reverse

  • z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

  • white-space: nowrap;文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。

  • display:block 此元素将显示为块级元素，此元素前后会带有换行符。