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

今天的学习内容是CSS相关内容。尽管html能够提供基础的样式，但这些显然不能满足人们的需要，于是CSS的出现帮忙解决了这个问题，通过CSS能够提供给人们许多想要的样式，这样也能更好的吸引用户进行浏览。

CSS的引入方式

外链方式

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

嵌入方式

<style>
li{
    margin: 0 auto;
}

内联

<p style="font-size=12px">hello world</p>

css如何工作

css中的样式选择器

通配选择器

通配选择器的表示，表示选中全部属性，通过* 可将所有的样式都进行设置，比较常见的使用场景如下:

<style>
    *{
        border-size:border-box;
    }
</style>

标签选择器

标签选择器就是常见的html标签，h1、p、span等

id选择器

id选择器是指我们能够通过给每个标签取一个id名字，然后通过id给予样式设置，要注意id选择器的命名不可重复

<div id="container">hello world</div>

<style>
    #container{
        background-color: #fff;
        }
</style>

类选择器

类选择器于id选择器类似，也是通过给标签取一个class命名，然后通过这个命名给样式设置样式，与id选择器不同的是class命名可以重复

<span class="text-color">hello world</span>
<div class="text-color">hello again</div>

<style>
    .text-color{
        color: red;
    }
</style>

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素，不需要依靠class或者id命名

<a hred="#"> test</a>

<style>
    a[hred]{
        color: red;
    }
</style>

伪类选择器

一个标签可能能够拥有不同的状态，使用冒号可以表示选择出不同的状态进行样式设置

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
<ul>

<style>
    li:not(:first-child){
        color: red;
    }
    li:hover{
        color: #fff;
    }
</style>

css组合

名称	语法	说明	示例
直接组合	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

css颜色

颜色设置主要有RGB(red、green、blue)，HSL(Hue、Saturatoin、Lightness),同时还有一个属性叫做alpha用来控制颜色的透明度，可以和上述的两个属性合并在一起写rgba、hsla

调试CSS

可以打开浏览器按下F12或者ctrl+shift+i进入控制台，按下ctrl+shift+c进行样式选择，即可看到css样式并且进行短暂修改查看效果

选择器优先级

选择器是存在优先级的，试想我们可能会出现对同个标签进行多次样式设置，那么应该哪个生效呢？这里就涉及选择器优先级问题，选择器优先级是这样的!import> 行内样式 > id 选择器 > class、伪类、属性选择器 > 标签选择器、伪元素选择器,上述的优先级还能够通过计算总和计算总优先级。

选择器类型	选择器权重	等级
行内样式	1000	第一级
id 选择器	0100	第二级
class、伪类、属性选择器	0010	第三级
标签选择器、伪元素选择器	0001	第四级

例#nav .list li a:link,则优先级为0122

css布局

css布局整体分为常规流、浮动和绝对定位,css中每个样式都被认为是一个盒子，每个盒子都是由于margin、border、padding、content组成，其中content又由height、width组成，用一张图就能直观的显示盒子的组成

其中要计算width、height的话，不同的box-sizeing会导致不同的结果，box-sizing包括content-box、border-box、inherit。

常规流

根元素、浮动和绝对定位会脱离常规流,其他元素会在常规流里面。常规流里面比较重要的两个概念是行级排版上下文IFC和块级排版上下文BFC

flex布局

flex布局是常规流中的一种布局，它主要用来控制子级的盒子,它可以控制子盒子的:

摆放流向
摆放顺序
盒子的高宽
水平和垂直方向的对齐
是否允许折行这里补充一个flex布局经常使用的，就是flex能够让盒子水平垂直居中

{
    display:flex;
    justify-content:center; # 水平居中
    align-items:center # 垂直居中
}

还有一个我们常用的flex:1,flex:1代表着flex-grow:1、flex-shrink:1、flex-basis:1,其中flex-grow定义项目的放大比例，默认为0，就是说即使存在剩余空间，也不放大。flex-shrink:1定义了项目的缩小比例，默认为1，就是说如果空间不足，该项目将缩小。flex-basis:1定义了如果在上述两个属性分配多余空间之前，计算是否有多余的空间，默认为auto，即项目本身的大小

grid布局

grid布局多用于创建块级显示内容，将页面分为多个网格使用；例如一个菜单显示网页，就可以使用grid布局进行信息显示，这样可以更加直观，grid布局大致如下:

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

相对布局

相对布局在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top、left、bottom、right设置偏移长度
流内其他元素当它没有偏移一样布局常见场景就是父元素使用相对布局，这样无论浏览器如何改变，都是相对于浏览器相对定位

浮动

浮动定义引用自MDN

float的初始功能是为了将图片嵌入文字中，后来也被用来实现整个页面的布局，它能够让信息列得以横向排列（默认的设定则是按照这些列在源代码中出现的顺序纵向排列）。目前出现了更新更好的页面布局技术，所以使用浮动来进行页面布局应被看作传统的布局方法

浮动特点:

不区分行、块、行内块元素，使用浮动直接让元素变为块级
支持宽高、margin、padding，但不支持margin：auto
不会有空隙问题(块级不存在基线对齐)

绝对定位

绝对定位脱离常规流，相对于最近的非static祖先定位，不会对流内元素布局造成印象。

要实现子元素在父元素内的固定定位，通常要绝对定位通常配合相对定位使用

<div class="parent">
    <div class="child">
    hello world
    </div>
</div>

<style>
.parent{
    position: relative; # 父元素相对定位
}
.child{
    position:absolute; # 子元素绝对定位
}
</style>

以上均是参加训练营学习到的个人理解加上MDN查阅的资料，如有错误，欢迎批评指正

理解CSS | 青训营笔记