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

笔记主要内容为CSS基础相关知识

CSS是什么？

CSS（Cascaging Style Sheets）用于定义页面元素的样式
主要包括:

设置字体颜色
设置位置和大小
添加动画效果

css使用方法

优先级：内联样式表>嵌入式样式>外联样式表

外联样式表（属于外部样式表）

<link href="my.css" type="text/css" rel="Stylesheet"/>

嵌入式样式（属于内部样式表）

<style type="text/css">
p{ width:1002px; margin:0 auto;}
</style>

内联式样式（属于内部样式表）

<p style="font-size:10px;font-color:#ff0000"></p>

css是如何工作的？

选择器

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名，类名或id
- 按照属性
- 按照DOM树中的位置

不同种类的选择器

标签选择器（元素选择器）
基本形式如下：tagName{property:value}，其中tagName是标签名称，property是css的属性。
类选择器
类选择器用来为一系列标签定义相同的呈现方式
常用的语法: .classValue{property:value}。其中classValue是类选择器的名称，由css编写者自己命名。
ID选择器
ID选择器定义的是某一个特定的html元素，一个网页中只有一个标签或元素使用某一ID的属性值。
基本语法格式：#idValue{property:value}其中idValue是ID选择器的名称，可以由CSS编写者自己编写。
全局选择器
全局选择器就是对所有的html元素起作用。
语法格式为：*{propery:value}其中“*”表示对所有元素起作用，property表示css的属性，value表示属性值。
组合选择器
就是将多种选择器进行搭配，可以构成一种复合选择器，也称为组合选择器。
继承选择器
继承的规则是子标签在没有定义的情况下，继承父标签的选择器；当子标签重复定义了父标签的声明时，执行子标签选择器。
伪类选择器
伪类选择器主要应用在<a>标签上，它有四种状态：未访问链接（link）、已访问链接（visited）、激活链接（active）、鼠标停留在连接上(hover)。
伪类不基于标签和定位元素，包括状态伪类（如：:link:，:vistited，:hover:，:active）和结构性伪类（如：first-child ，:right，:left，:first）
属性选择器
具有特定属性的HTML元素样式不仅仅是class和id

颜色

直接用颜色单词表示如：color:orange;
用三原色表示，即rgb(red,green,blue)/(红色的浓度，绿色的浓度，蓝色的浓度)，浓度值由0~255表示，浓度的值也可以用百分比(%)表示。如：color: rgb(255,0,0); 或者 color: rgb(100%,0%,0%);
用十六进制表示，由0-9、a-f组成一个以#后面跟6个十六进制数的颜色单位。如：color: #01483E;
rgba(red,green,blue,alpha )，是在rgb的基础上再添加一个透明通道。参数a的取值范围在0.0~1.0之间。前面的0也可以简写也就是不写，直接写小数点和后面的数。例如：color: rgba(255,0,0,0.2); 或者 color: rgba(100%,0%,0%,.2);
hsl(hue,saturation,lightness)/(色调,饱和度,亮度), h:表示 Hue(色调)。0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360。 s:表示Saturation(饱和度)。取值为：0.0% - 100.0% l:表示Lightness(亮度)。取值为：0.0% - 100.0%
例如：color:hsl(193,50%,50%) ;
hsl也可以加上透明度，就变成hsla(hue,saturation,lightness,alpha),a的用法也是一样的，取值范围为0.0~1.0，可以直接写小数点和后面的数。例如：color: hsla(193,50%,50%,.2);

字体

font-famly 字体设置

font-size 字体大小

关键字：small、medium、large
长度：px、em
百分数：相对父元素字体大小

font-weight 文字粗细
bold表示粗体，还有normal、bolder,lighter。也可以用数值表示。

line-height 行高

font属性可以合并到一起写，写法如下：

换行处理 white-space
white-space属性指定元素内的空白怎样处理。

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

布局

什么是布局？

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

布局相关技术

盒模型

块级元素
生成块级盒子，主要包括：body,article,div,main,section,h1-h6,p,ul,li等
行级元素
生成行级盒子，内容分散在多个行盒（line box)中，主要包括：span,em,strong,cite,code等
display属性

值	描述
block	块级盒子
inline	行级盒子
inline-block	本身是行级，可以放在行盒中；可以设置宽高；作为整体不会被拆成多行
none	排版时完全被忽略

postion属性

值	描述
static	默认值，非定位元素
relative	在常规流里布局，相对自身原本位置偏移，不脱离文档流
absolute	脱离常规流，绝对定位，相对非static祖先元素定位，不对流内元素布局造成影响
fixed	相对视口绝对定位

felx布局

采用Flex布局的元素，称为Flex容器(flex container)，简称容器。他是所有子元素自动称为容器成员，称为Flex项目(flex item)简称项目

容器的属性

1. flex-direction属性决定主轴的方向，即项目的排列方向

值	描述
row	默认值，主轴为水平方向，起点在左端
row-reverse	主轴为水平方向，起点在有段
column	主轴为垂直方向，起点在上方
column-reverse	主轴为垂直方向，起点在下方

2.flex-wrap属性决定一条轴线排不下该如何换行

nowrap:默认值，不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方\

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式

3.justify-content属性定义了项目在主轴上的对齐方式

具体堆积方式和轴的方向有关假设主轴是水平从左到右

值	描述
flex-start	默认值左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔都相等
space-around	每个项目两侧的间隔相等。故项目之间的间隔比项目与边框的间隔大一倍

4.align-items属性定义项目在交叉轴上如何对齐

值	描述
flex-start	交叉轴的起点对齐
flex-end	价差周的终点对齐
center	交叉轴的中点对齐
baseline	项目的第一行文字的基线对齐
stretch	默认值，如果项目未设置属性或者auto，将占满整个容器的高度

5.align-content属性定义了多跟轴线的对齐方式（若项目只有一根轴线，该属性不起作用）

值	描述
flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	与检查周两端对齐，轴线之间的间隔平均分布
space-around	没跟轴线两侧的间隔都相等。所以，轴线之间的间隔与轴线与边框的的间隔大一倍
strech	默认值，轴线占满整个交叉轴

项目的属性

order属性定义了项目的排列顺序，数值越小，排列于考前，默认为0

flex-grow属性定义了项目的放大比例，默认为0，如果存在剩余控件，也不放大
flex-shrink属性定义了项目的缩小比列，默认为1，如果空间不足，该项目将缩小
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间，它的默认值为auto，即项目的本来大小
flex属性是flex-grow属性flex-shrink属性和flex-basis属性的简写，默认值为 0 1 auto ，后两个属性可选
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

本节思考
css是一个页面是否美观的关键所在，通过布局调配使得页面协调美观，给用户以良好的体验是我们值得研究的。

CSS基础|青训营笔记