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

基础部分还需参照 CSS MDN

上课内容

CSS: cascading style sheets

组成部分：

选择器selector、属性property、属性值value、声明declaration（属性和属性值组合）

在页面中使用css：

外链<link rel="stylesheet" href="文件地址">
嵌入<style>(中间为组成部分)</style>
内联如<p style="属性：属性值"></p>(不推荐)

选择器selector:找到页面中的元素，以便设置样式。

选择元素方法：

按照标签名、类名（.）、id（#）
按照属性
按照dom树中的位置

通配选择器*

属性选择器： “:”+属性值

    <label>用户名：</label>
    <input value="zhao" disabled>

    <label>密码</label>
    <input value="123456" type="password"/>

    <style>
        :disabled{
            background: #eee;
            color: #999;
        }
    </style>

input[type="password"]（属性+属性值）：

    <label>用户名：</label>
    <input value="zhao" disabled>

    <label>密码</label>
    <input value="123456" type="password"/>

    <style>
        input[type="password"]{
            border-color: red;
            color: red;
        }
    </style>

    <p><a href="#top">回到顶部</a></p>
    <p><a href="a.jpg">查看图片</a></p>

    <style>
        a[href^="#"]{
            color: #f54767;
            background: 0 center/1em url(https://assets.codepen.io/58477/arrowup.png) no-repeat;
            padding-left: 1.1em;
        }

        a[href$=".jpg"]{
            color: deepskyblue;
            background: 0 center/1em url(https://assets.codepen.io/59477/image3.png) no-repeat;
            padding-left: 1.2em;
        }
    </style>

以^=表示以#开头的进行匹配，以$=表示以=后元素为结果的进行匹配

伪类pseudo-classes：

不基于标签和属性定位元素
有状态伪类和结构性伪类

状态伪类：

a的不同状态显示不同颜色，focus input，外边框变格式为outline

    <a href="http://example.com">example.com</a>

    <label>
        用户名：
        <input type="text">
    </label>

    <style>
        a:link{
            color: black;
        }
        a:visited{
            color: gray;
        }
        a:hover{
            color: orange;
        }
        a:active{
            color: red;
        }
        :focus{
            outline: 2px solid blue;
        }
    </style>

结构伪类：

可以使用first/last-child、2n-child指定奇偶等

     <ol>
        <li>阿凡达</li>
        <li>泰坦尼克号</li>
        <li>星球大战</li>
        <li>复仇者联盟</li>
        <li>侏罗纪世界</li>
    </ol>

    <style>
        li{
            list-style-position: inside;
            border-bottom: 1px solid;
            padding: 0.5em;
        }

        li:first-child{
            color: coral;
        }

        li:last-child{
            border-bottom: none;
        }
    </style>

预览：

组合方式：

    <label for="">
        用户输入姓名
        <input class="error" value="aa">
   </label>

   <span class="error">
        最少3个字符
   </span>

   <style>
        .error{
            color: red;
        }
        input.error{
            border-color: red;
        }
   </style>

组合方式

名称	语法	说明	实例
直接组合	AB	满足A同时满足B	input：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

   <article>
        <h1>国家公园</h1>
        <p>国家公园是位于……</p>
        <section>
            <h2>气候</h2>
            <p>因为国家公园……</p>
            <p>高于这个高度……</p>
        </section>
   </article>

   <style>
        article p{
            color: black;
        }
        article > p{
            color: blue;
        }
        h2 + p{
            color: red;
        }
   </style>

选择器组：

        body, h1, h2, h3, ul, ol, li{
            margin: 0;
            padding: 0;
        }

        [type="checkbox"],[type="radio"]{
            box-sizing: border-box;
            padding: 0;
        }

颜色rgb：0-255

颜色hsl：

颜色关键字：

alpha透明度：在后面追加即可

字体font-family：

        h1{
            font-family: Georgia, 'Times New Roman', Times, serif;
        }
        body{
            font-family: Arial, Helvetica, sans-serif;
        }

设置多个是因为有的浏览器可能不存在该字体，serif和sans-serif表示衬线体，不是指特定字体，是一类字体

web font：（下载字体后应用）

font-size：

关键字：small、medium、large
长度：px、em
百分比（相对于父元素）

font-weight：字体粗细（font-weight：100）

font设置：font:style(斜体等设置) weight size/height family

如font:bold 14px/1.7 Helvetica, sans-serif(斜体、粗细、大小/行高、字体族)

行高line-height（通常设置为1.6倍行高）：

对齐方式text-align：left、right、center、justify（两端对齐）、inherit（从父元素继承）

间距spacing：letter-spacing（字母间距）和word-spacing（单词间距）

首行距离左边边距text-indent：文本块中首行文本的缩进

装饰text-decoration：none、underline、line-through、overline

空白符white-space：

属性值	说明
normal	默认，空白会被浏览器忽略
pre	空白会被浏览器保留
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止
pre-wrap	保留空白符序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符
inherit	规定应该从父元素继承 white-space 属性的值

调试css：

右键点击页面，选择检查
使用快捷键：ctrl+shift+I(win) cmd+opt+i(mac)

选择器的特异度specificity：

继承：某些属性会自动继承其父元素的计算值，但宽度等一般不能继承，若要其继承，则用inherit

        *{
            box-sizing: inherit;
        }

        html{
            box-sizing: border-box;
        }

        .some-weight{
            box-sizing: content-box;
        }

每个属性都有初始值：注意background-color初始值为transparent，margin-left初始值为0；可以使用initial显式重置为初始值，如background-color：initial

css求值过程：

布局：确定内容大小和位置的算法，依据元素、容器、兄弟节点和内容等信息计算。

布局相关技术：常规流（块级、行级、表格布局、flexbox、grid布局）、浮动、绝对定位

盒子模型

width：

指定content box宽度
取值为长度、百分比（相对于content box宽度）、auto（由浏览器根据其他属性确定）

height：

指定content box高度
取值为长度、百分比（相对于content box高度，前提：容器有指定高度）、auto（由内容计算得来）

3. padding：

指定元素四个方向的内边距（顺序：上右下左，两个数值表示上上右右）
百分数相对于容器宽度

border：指定容器边框样式、粗细颜色

三种属性：border-width border-style border-color
四个方向：border-top border-right border-bottom border-left

            border: 1px solid black;

            border-width: 1px 2px 3px 4px;
            border-style: solid;
            border-color: green blue;

            border-top: 1px solid black;

            border-top-width: 1px;

当四条边框颜色、宽度不同时，可以绘制正方形，直角三角形等

margin：margin:auto(水平居中)

指定元素四个方向的外边距
取值可以时长度、百分比（相对于容器宽度）、auto margin collapse

<div class="a"></div>
<div class="b"></div>

<style>
  .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }

  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }
</style>

 .b {
    box-sizing: border-box;
    width: 100%;
    padding: 1em;
    border: 3px solid #ccc;
  }

超出边框时可以设置：visible、hidden、scroll

display：

block：块级盒子
inline：行级盒子
inline-block：本身是行级
none：排版时完全被忽略

常规流Normal Flow：根元素、浮动和绝对定位的元素会脱离常规流，其他元素都在常规流内常规流中的盒子，在某种排版上下文中参与布局

graph TD
排版上下文 --> 行级排版上下文
排版上下文 --> 块级排版上下文
排版上下文 --> Table排版上下文
排版上下文 --> Flex排版上下文
排版上下文 --> Grid排版上下文

行级排版上下文（Inline Formatting Context -- IFC）

只包含行级盒子的容器会创建一个IFC
IFC的排版规则：盒子在一行内水平摆放，一行放不下时换行。text-align决定一行内盒子的水平对齐，vertical-align决定一个盒子在行内的垂直对齐，避开浮动float元素

    <div>
        this is a paragraph of text with long word Honksjdhuuhuiyeuiydeucnjdk.
        Here is an image<img src="https://assets.codepen.io/59488/cat.png" alt="cat">
        And <em>Inline Block</em>
    </div>
    <style>
      div{
        width: 10em;
        background: #411;
      }

      em{
        display: inline-block;
        width: 3em;
        background: #33c;
      }
    </style>

块级排版上下文（Block Formatting Context -- BFC）

会创建BFC的情况：

根元素
浮动、绝对定位、online-block
Flex子项和Grid子项
overflow（内容溢出）值不是visible的块盒
display：flow-root（新的布局方式，它在块级布局方式的基础上对子元素的浮动float属性进行了修正，避免塌陷）

BFC内的排版规则：

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

Flex Box：

一种新的排版上下文
可以控制子级盒子的：摆放的流向、摆放顺序、盒子的宽度和高度、水平和垂直方向的对齐、是否允许折行

示例：

    <div class="container">
        <div class="a">A</div>
        <div class="b">B</div>
        <div class="c">C</div>
    </div>

    <style>
        .container{
            display: flex;
            border: 2px solid #966;
        }
        .a, .b, .c{
            text-align: center;
            padding: 1em;
        }
        .a{
            background: #fcc;
        }
    </style>

主轴与侧轴：（主轴水平方向，侧轴竖直方向）

主轴：

flex-direction：决定主轴的方向

column-reverse | column | row | row-reverse;

flex-wrap：如果一条轴线排不下，如何换行。

nowrap | wrap | wrap-reverse;

flex-flow:是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow: <flex-direction> <flex-wrap>;

justify-content:项目在主轴上的对齐方式

flex-start | flex-end | center | space-between | space-around | space-eventy;

侧轴：

align-items:交叉轴上如何对齐

flex-start | flex-end | center | baseline | stretch;

align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Flexibility:

可以设置子项的弹性，当容器有剩余空间时会伸展，不够时会收缩。
flex-grow有剩余空间时的伸展能力
flex-shrink容器空间不足时收缩的能力
flex-basis没有伸展或收缩时的基础长度

    <style>
        .container{
            display: flex;
            border: 2px solid #966;
        }
        .a, .b, .c{
            width: 100px;
        }
        .a{
            flex-grow: 2;
        }
        .b{
            flex-grow: 1;
        }

    </style>

（剩余空间按照2：1分配给a和b）

Grid布局：

display：grid

display：grid使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占哪些行列

（columns划分列，rows划分行，fr表示1份，将剩余空间进行划分分完）

    <style>
        .container{
            display: grid;
            grid-template-columns: 25% 25% 25% 25%;
            grid-template-rows: 25% 25% 25% 25%;
        }
        .a{
            background-color: pink;
            grid-row-start: 2;
            grid-row-end: 2;
            grid-column-start: 4;
            grid-column-end: 4;
        }
        .b{
            background-color: pink;
            grid-area: 1/1/3/3;
        }

（可以利用浏览器调试工具查看网格）

float浮动

position属性：

static：默认值，非定位元素
relative:相对自身原本位置偏移，不脱离文档流，在常规流里面布局，使用top、right、bottom、left设置偏移长度，流内其他元素当他没有偏移一样布局
absolute：绝对定位，相对最近的非static祖先元素定位，脱离常规流，不会对流内元素布局造成影响
fixed：相对于视口绝对定位

CSS ｜ 青训营笔记