CSS | 青训营笔记

用户2252297298707
146 阅读3分钟

走进前端技术栈-CSS

这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天

在页面中使用CSS

外链

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

嵌入

<style>
    li {
        margin: 0;
        list-style: none;
    }
</style>

内联

<p style="margin: 0;">内联</p>

选择器

通配选择器

* {
    color: red;
}

标签选择器

h1 {
    color: red;
}

id选择器

#logo {
    color: red;
}

类选择器

.logo {
    color: red;
}

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 只要有disabled属性我就可以选中它 */
        [disabled] {
            background: #eee;
            color: #999;
        }
        input[type="password"] {
            border-color: red;
            color: red;
        } 
    </style>
</head>
<body>
    <label for="">用户名：</label>
    <input value="zhao" type="text" disabled>
    <label for="">密码：</label>
    <input value="123456" type="password"> 
</body>
</html>

可使用 ^=【以xx开头】 $= 【以xx结尾】... 匹配

伪类

状态伪类

例如链接可以分为点击过的和没有过的

输入框可以分为默认和focus【聚焦】状态

  • 默认

    a:link{}

  • 访问过

    a:visited{}

  • 鼠标移上去后

    a:hover{}

  • 鼠标按下去后

    a:active{}

  • 输入框聚焦时

    :focus {
    outline: 2px solid orange;
}

结构伪类

例如列表的第一个

  • 第一个

    li:first-child {
    color: coral;
}

  • 最后一个

    li:last-child {
    border-bottom: none;
}

  • 条件结构

    /* input标签的class=error才会被选中 */
input.error {}

组合

名称语法说明示例
直接组合AB选中A的同时满足Binput:focus
后代组合A B选中B，如果它是A的子孙nav a
亲子组合A>B选中B，如果他是A的子元素section>p
兄弟选择器A~B选中B，如果它在A后且和A同级h2~p
相邻选择器A+B选中B，如果它紧跟在A后面h2+p

文本

  • color
  • font-family
  • font-size
  • font-weight
  • line-height
  • while-space【换行】

调试CSS

  • 右键点击页面，选择检查

  • 使用快捷键

    • Ctrl + Shift + I 【windows】
    • Cmd + Opt + I 【Mac】

深入CSS

选择器的特异度

  • #【id】
  • .【伪类】
  • E【标签】

继承

某些属性会自动继承其父元素的计算值，触发显式指定一个值

显式继承

/* 所有元素改为可继承 */
* {
    box-sizing: inherit;
}
/* 让html按照某个规则 */
html {
    box-sizing: border-box;
}
.some-widget {
    box-sizing: content-box;
}

初始值

每个属性都有一个初始值

布局

  • width

  • height

  • content

  • padding

  • border

  • margin

    /* 水平居中 */
margin: 0 auto;

  • overflow

    控制文本溢出

    • visible
    • hidden【滚动】
    • srcoll【超出滚动】

常规流

  • 行级

    /* body,article,div,main,section,h1-6,p,ul,li等 */
display: block;

  • 块级

    /* span,em,strong,cite,code等 */
display: inline;

  • 表格布局

  • FlexBox

  • Grid布局

浮动

绝对定位

行级排版

  • lnline Formatting Context

  • 只包含行级盒子的容器会创建一个IFC

  • IFC内的排版规则

    • 盒子在一行内水平摆放
    • 一行放不下时，换行显示
    • text-align水平对齐
    • vertical-align垂直对齐
    • 会避开浮动(float)元素

块级排版

  • Block Formatting Context

  • 某些容器会创建一个BFC

    • 根元素
    • 浮动、绝对定位、inline-block
    • Flex子项和Grid子项
    • overflow值不是visible的块盒
    • display: flow-root;

  • IFC内的排版规则

    • 盒子从上到下摆放
    • 垂直margin合并
    • BFC内盒子的margin不会与外面的合并
    • BFC不会和浮动元素重叠

Flex Box

Flex Box是什么

  • 一种新的排版上下文

  • 它可以控制子级盒子的

    • 摆放的流向（ ↑ ↓ ← → ）
    • 摆放顺序
    • 盒子宽度和高度
    • 水平和垂直方向的对齐
    • 是否运行折行

主轴和侧轴

  • 主轴

    justify-content: space-between;

  • 侧轴

    align-items: baseline;

Flexibility

  • 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。

  • flex-grow 有剩余空间时的伸展能力

    .a {
    flex-grow: 2;
}
.b {
    flex-grow: 1;
}

  • flex-shrink 容器空间不足时收缩的能力

  • flex-basis 没有伸展或者收缩时的基础长度

Grid布局

  • 生成块级Grid容器

    display: grid;

  • 划分网格

    grid-template-columns: 30% 1fr 2fr;
grid-template-rows: 100px auto;

  • 设置每一个子项占哪些行/列

网格线

grid line

网格区域

grid area: 1/1/3/3;

float 浮动

起源图片环绕文字

绝对定位

position: static;
position: relative;
position: absolute;
position: fixed;
avatar
文章
阅读
粉丝