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

CSS是什么？

• 用来定义页面元素的样式
• 设置字体和颜色
• 设置位置和大小
• 添加动画效果

在页面中使用CSS

    <!-- 外链 -->
    <link rel="stylesheet" href="./style.css">
    <!-- 嵌入 -->
    <style>
        li {
            margin: 0;
        }
    </style>
    <!-- 内联 -->
    <p style="margin: 0;">CSS</p>

CSS是如何工作的

选择器

1、找出页面中的元素，以便给他们设置及样式

2、使用多种方式选择元素

• 按照标签名、类名或者id
• 属性选择器

<input value="" disabled>
<style>
   [disabled] {
     background: #eee;
   }
   //特定值
   input[type="password"]{}
</style>

    <p><a href="#top">回到顶部</a></p>
    <p><a href="a.jpg">查看图片</a></p>
    <style>
        /* 以#开头相匹配 */
        a[href^="#"] {
            color: aliceblue;
        }
        /* 以.jpg为结尾相匹配 */
        a[href$=".jpg"]{
            color: #000;
        }
    </style>

• 按照DOM树中的位置
• 状态、结构伪类选择器

布局（Layout）是什么？

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算

常规流

块级

• 不和其他盒子并列摆放
• 适用所有的盒模型属性

body、article、div、main、section、h1-6、p、ul、li等
display:block

行级

• 和其他行级盒子一起放在一行或拆开成多行
• 盒模型中的width和height不适用

span、em、strong、cite、code等
display:inline

display:inline-block

本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行；相当于拥有inline和block的作用。

Flex布局

1. 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
   

2. 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

3. 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器的属性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

项目属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self