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

前言

本笔记的意义在于让以后的自己知道现在的我有多么的蠢
同时也希望能让大佬能看到我的错误，所以欢迎各位大佬斧正。
当然也是为了以后技术的积累，能做到方便随时回头看看。可能会随时内容再更新一下，或者开一下DLC（拓展包）好记性不如烂笔头，开搞！

CSS的简介

CSS (Cascading Style Sheets)
用来定义样式

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

个人认为吧，CSS的意义就是在于让页面变得更加好看，用户体验感更好。

CSS代码相关

CSS代码构成

h1{
    color:black;
    font-size:14px;
}

h1 所在的位置是css样式的选择器(Selector)

选择器与样式的优先级：内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

选择器一共有七种：

id 选择器（id=?）(在样式中 #id) (一定要在页面中唯一)
类选择器(class=?) (更为常用)
伪类选择器(类似 a:hover)(也可以直接写:focus)
属性选择器(type=?)
伪元素选择器
通配选择器（*）
标签选择器

color 所在的位置是css样式的属性(Property)
black 所在的位置是css样式的属性值(Value)
font-size:14px; 连起来之后称之为css样式的声明(Declaration)

页面中使用CSS

一般有三种方式：

外链式

<link rel="stylesheet" type="text/css" href="mystyle.css">

页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部

嵌入式

<head>
<style>
    hr {color:sienna;}
    p {margin-left:20px;}
    body {background-image:url("images/back40.gif");}
</style>
</head>

当单个页面需要特殊的样式时，就应该使用嵌入式css。就可以使用 <style> 标签在文档头部定义内部样式表

内联式

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

在html标签中会有一个style属性可以直接编写一些简单的样式

多重样式

如果有部分属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。
一般来说继承的优先级是：

（内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式

CSS选择器套路

CSS选择器的组合

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

CSS选择器组

这种情况下直接像下面一样莽夫

body,h1,h2{
    margin:0;
    padding:0;
}

这样就会将所有标签都选择上

CSS颜色

body{
    color:rgb(143,172,135)
    /*分别对应 红  绿  蓝 */
    background-color:#8fac87,
    /*每两位分别对应   红绿蓝 */
}

第二种玩法 HSL

H代表色相是色彩的基本属性,取值范围0-360
S代表的是颜色的饱和度即颜色的鲜艳程度，数值越高越鲜艳，取值范围0-100%
L代表的是亮度，数值越高颜色越量取值范围0-100%

两种玩法还可以带一个alpha的值标识颜色的透明度
比如rgba()或者hsla()，最后一个参数描述的就是透明度，取值范围0-1

CSS布局

布局（Layout）是什么？确定内容大小和位置的算法

布局的相关技术

共有三种方式分别是：常规流（文档流）、浮动、绝对定位

盒模型

css样式的基础简单来说就是盒模型。盒子一般是自上向下排列。

盒模型的参数

盒模型是由margin（边界，外边距）、border（边框）、padding（填充，内边距）和content（内容）几个部分组成
另外还盒模型具有width（宽度）、height（高度）两个辅助属性

常规流的布局

块级与行级

块级元素	行级元素
生成块级盒子	生成行级盒子且内容分散在多个行盒(line box)中
body,article,div,main.section,h1-6,p,ul,li等	soan,em,strong,cite,code等
display:block	display:inline

Flex box

一种新的排版方式display:flex，他可以控制子级盒子的：

摆放流向（比如向上、或者向下）
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行

可以通过justify-content属性去控制如何摆放flex box，这个是给主轴对齐所用
对于侧轴对齐所用的参数属性是align-items

当容器有高度或者宽度的时候，百分数才会生效。比如说父级没有指明，则子级可能就不会出现了

Grid box

布局吧他不一定是流式的，他也可能是二位存在的，所以出现了Grid
display:grid 使元素生成一个块级的grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占哪些行和列

基本上所有的布局方式都可以使用Gridbox去实现

绝对定位

position属性

static 默认值，非定位元素
relative 相对于自身原本位置偏移，不脱离文档流（原本占的空间依旧会占用到）
absolute 绝对定位，相对非static祖先元素定位
fixed 相对于视口绝对定位

CSS编写的小建议

编写字体时，一定要考虑一种通用的情况作为备选，以防止首选的字体在客户终端上不存在导致整体页面展示效果太差
行高的处理line-height，如果不带单位则为字体高度的倍数
Html里面多个空格可能会被转换为一个空格，所以要用空白符 显式继承，想直接复用父级属性值，要先去通配选择器将对应属性的值设置为 inherit (意义：让一个原本不可继承的属性变得可继承)

小技巧

让box水平居中 margin:auto
box-sizing:border-box 这个声明会让边框也计算到高度和宽度里面
内容超出的部分使用overflow

不要停止学习的脚步

对于css开发过程的浅显理解 | 青训营笔记

前言