这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

前端----css

使用css的三种方式

外联

在外部创建一个 .css的文件

然后可以在Html内部使用如下的方式引入

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

非常推荐

内链

内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug。

不太推荐，最好少用

嵌入

嵌入CSS也可称为页级CSS，整体是放在head标签里边的，在style标签里边定义样式，作用范围和字面意思相同，仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差。

在<head>中引入<style></style>标签

在内部写css

较推荐

选择器 Selector

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

使用多种方法选择元素

按照标签名，类名或者id选择元素
按照属性
按照DOM树的位置

通配选择器

*

我们会使用*来表示通配选择器

匹配任意标签名
匹配任意类名
匹配任意id

demo :

* {
   font-family: cursive;
}

这样所有字体都会被设置为手写体。

id选择器

我们一般在css中用#声明，在Html标签中使用id=""来声明id

demo

#logo {
    font-size: 60px;
    font-weight: 200;
    /* font-weight 粗细 */
}

注意：id具有唯一性

类选择器

我们一般在css中用.声明在css，在Html标签中使用class=""来声明类

.done {
    color: gray;
    text-decoration: line-through;
    /* 字被中间划死 */
    /* decoration -> 装饰 */
}

属性选择器

通过属性来选择

demo

例如 input的一个属性 disabled 禁止输入

 [disabled] {
    background-color: #eee;
    color: #ccc;
 }

demo2-属性特定值演示

 input[type="password"] {
    border-color: red;
    color: red;
 }

demo3--匹配性的选择

a[href^="#"] {
    /* ^= 如果以xxx开头就会被匹配到 */
    color: #f54767;
    background: 0 center/lem
    url() no-repeat;
    padding-left : 1.1em;
}
a[href$=".jpg"] {
    /* ^= 如果以xxx结尾就会被匹配到 */
    color: deepskyblue;
    background: 0 center/lem
    url(a.jpg) no-repeat;
    padding-left : 1.1em;
}

伪类 pseudo-classes

不基于标签和属性定位元素

几种伪类

状态伪类
结构性伪类

状态伪类

比如链接有访问过的，鼠标划过的

/* 初始 */
a:link {
    color: aqua;
}
/* 访问过 */
a:visited {
    color: gray;
}
/* 鼠标移到 */
a:hover {
    color: red;
}
/* 鼠标按下 */
a:active {
    color: blue;
}
/* 输入框 链接也生效了 */
/* focus 聚焦到输入框 */
:focus {
    outline: 2px solid orange;
    /* 边框 */
}

结构伪类

/* 结构伪类 */
li {
    list-style-position: inside;
    border-bottom: 1px solid;
    padding: 0.5em;

}
li:first-child {
    color: red
}
li:last-child {
    border-bottom: none;
    /* 无下划线 */
    color: blue;
}

组合 Combinators

| 名称 | 语法 | 说明 | 示例 | | ---- | | ---- | | ---- | | ---- | | 直接组合 | AB | 满足A同时满足B | input.error, a.error | | 后代组合 | A B | 选中B，如果他是A的子孙 | nav a b 在 a里面只要所有的a标签出现在 nav下面不管隔了多少级都会被选中 | | 亲子组合 | A>B | 选中B，如果他是A的子元素 | section>p 必须直接 | | 兄弟选择器 | A~~B | 选中B，如果他在A后且和A同级 | h2~~p 同级同一个父级并列 | 相邻选择器 | A+B | 选中B，如果他紧跟A后面 | h2+p | 紧跟着的兄弟选择器 |

选择器组demo

/* 组合 */
.error{
    color: red;
}
/* 又 input 又 error */
input.error {
    border-color: blue;
    padding-left: 100px;
    padding-bottom: 100px;
}
div {
    border-color: #f54767;
    border-style: solid;
    width: 200px;
    height: 200px;
}
span {
    border: rebeccapurple;
    border-style: solid;
    width: 100px;
    height: 100px;
    display: block;
}
body,h1,h2,h3 {
    margin: 0;  内边距
    padding: 0;  外边距
    }
[type="checkbox"],[type="radio"] {
    display: inline-block;
    margin-right: 0.5em;
    margin-left: 0.5em;
}

颜色

RGB 颜色表示

#xxxxxx 十六进制
rgb(x,y,z) x,y,z 分别是RGB的值 0-255

颜色 HSL

色相 Hue 色彩的基本属性

取值 0-360
饱和度 Saturation 取值 0-100%
亮度 Lightness 取值 0-100%

使用 -> hsl(色相,饱和度,亮度)

alpha 不透明度

基于之前的第四拓展

demo:

#xxxxxx75
rgba(x,y,z,a) x,y,z 分别是RGB的值 0-255 a是不透明度 0-1
hsla(色相,饱和度,亮度,a) 色相,饱和度,亮度 分别是0-360 a是不透明度 0-1

字体

字体样式

font-family

demo:

 h1 {
        font-family: Optima,Georgia,serif;  
    }

上述的demo 指定多个字体前面没有找后面这几个是通用的字体族

Serif 衬线体
Sans-serif 无衬线体
Cursive 手写体
Fantasy 夸张
Monospace 等宽字体
指定Web Fonts

指定Web Fonts的demo：

@font-face {
        font-family: 'Optima';
        src: url('');
        format('');
    }

缺点:可能性能上来渲染中文：可能会裁切，用不到

字体样式

font-style

斜体:italic
粗体:bold
加粗和斜体:bold italic
无:normal

字体粗细

font-weight

字体颜色

color

字体下划线

text-decoration

字体删除线

text-decoration:line-through

字体对齐

text-align

left
right
center
justify
justify-all
start
end

left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。

字体行高

line-height

-> 两条文字间的一个基准线之间的一个距离
一个没有单位的数字来表示行高，默认是1.2em .比如1.6 原本的多少倍.也是很推荐的很直观的.

字体行间距

letter-spacing

字体字间距

word-spacing

white-space

normal 默认值，文本不会换行。
nowrap 文本不会换行
pre 保留所有的，原本的
pre-wrap 保留空格自动换行
pre-line 保留空格自动换行

几个常用的特殊符号

空格 &nbsp
制表符 -> &tab;
换行 -> &br;
回车 -> &cr;
换页 -> &lf;
删除线 -> &del;

优先级

选择器的特异度 Sqecificity

id	(伪)类	标签
#id	.class	tag
百	十	个

继承

某些属性会自动继承其父元素的计算值除非显示的指定一个值
文字相关的，颜色，字体不给会继承
一些盒子模型大小不会继承

注意

可继承与不可继承不是绝对的，是指默认情况下会不会继承，但是都是可以被inherit显示继承的

css可以和不可以继承的属性

不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。

显示继承 inherit

例如

```
* {
    box-sizing: inherit;
}
```

上边通过一个通配选择器让所有的元素都可以继承 box-sizing 后面的元素都可以继承了

初始值

一个元素一直往上找没找到继承的值如果没有继承的值就用初始值
一个元素不可继承的又没有指定值
可继承没有继承到

demo:

{
     background-color: transparent;
     margin-left: 0;
}

可以使用 initial 关键字显示重置为初始值

background-color: initial;

media

暂时没有笔记，参考下面链接

media

盒模型

理解成一个一个的盒子

margin

外边距

margin-top外边距的上边距
margin-bottom外边距的下边距
margin-left外边距的左边距
margin-right外边距的右边距

margin跟padding一样，也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。也就是margin-top--margin-right--margin-bottom--margin-left，即“上-右-下-左”。以下简写为 top--right--bottom--left。其中需要注意的是后三种情况，当有像素值缺省时，浏览器会自动对缺省像素按照 “bottom=top”和“left=right”的方法进行赋值。

取值可以是长度百分数 auto

auto

左右都是auto
会取中间值然后水平居中

百分数是相对于容器宽度

margin collapse(外边距折叠)

margin在垂直方向上有时候会出现边距的折叠融合合并

如：上100px 下100px (margin-bottom: 100px 和 margin-top: 100px)

两个组组件的间距 100px 而不是 200px

只会取两个边距中较大的，而不是相加

bording

border 简写属性在一个声明设置所有的边框属性。可以按顺序设置如下属性：border-width,border-style,border-color

如果不设置其中的某个值，也不会出问题，比如 border:solid #ff0000; 也是允许的。

指定边框的样式，粗细和颜色。

三种属性

border-width: 可以设置边框的宽度。
border-style: 可以设置边框的样式。
border-color: 可以设置边框的颜色。

四个方向

border-top
border-right
border-bottom
border-left

可以同时设置多个方向的边框。

padding

内边距

padding 简写属性在一个声明中设置所有内边距属性。可以按顺序设置如下属性：padding-top，padding-right,pading-bottom,padding-left。

指元素四个方向的内边距

百分数相对于容器宽度

10px -> 四个都是10px
10px 20px -> 左右两个是10px，上下两个是20px
10px 20px 10px 20px -> 从上开始顺时针转一圈

content (width,height)

内容

width

指定content box 宽度
取值为长度百分数 auto
auto 由浏览器根据其他属性确定
百分数相对于容器的context box宽度 height
指定content box 高度
取值为长度百分数 auto
auto 由浏览器根据其他属性确定
百分数相对于容器的context box高度
容器有指定高度的时候，百分数才生效。

关系上层层包裹

box-sizing:boder-box;

区别：包括padding 和 border 如设置100% 实际小于 100% 页面无滚动

overflow

overflow这个属性:

visible -> 超出可见但是会超越设定的范围
hidden -> 超出不可见
scroll -> 超出可见滚动

布局 Layout

常规流

normal flow

块级
行级
表格布局

块级 and 行级

行级由内容决定

块级行级对比

| | 块级盒子 | 行级盒子 | | ---- | | ---- | | ---- | | 名称 | Block Level Box | Inline Level Box | | 布局 | 不和其他盒子并列摆放 | 和其他行级盒子一起放在一行或拆开成多行 | | 适用 | 适用所有的盒模型属性 | 适用所有的盒模型属性 | | 转换 | 生成块级盒子display: block; | 生成行级盒子display: inline; | | 标签 | body,article,div,main,section,h1-h6,p,ul,li等 | span,em,strong,cite,code等 |

我们也可以通过display属性把任意一个元素转化成块级盒子或者行级盒子

display

display 属性

display: block; => 块级盒子
display: inline; => 行级盒子
display: inline-block; =>本身是行级，可以放在行盒中可以设置宽高作为一个整体不会被拆散成多行 (只能放在一行) 例如 : 一个图片可以和文字在一行展示但是没办法把图片分成两行展示。
display: none; => 排版时完全被忽略

行级的排版上下文

lnline Formatting Context(IFC)

只包含行级盒子的容器会创建一个IFC

IFC内的排版规则

盒子在一行内水平摆放
一行放不下的时候，换行显示
text-align: 决定一行内盒子的水平对齐:left,right,center....
vertical-align: 决定一行内盒子的垂直对齐。top，middle，bottom

避开浮动(float)元素

overflow-wrap:break-world;换行

块级排版上下文

Block Formatting Context(BFC)

某些容器会创建一个BFC

根元素
浮动，绝对定位，inline-block
Flex子项和Grid子项
overflow值不是visible的块盒
display: flow-root;

BFC内的排版规则

盒子从上到下摆放
垂直margin合并之前的margin边距不是相加而是取最大
BFC内盒子的margin不会与外面的合并解决margin融合重叠问题分开放在不同的DFC中嵌套div并设置display:flow-root;
BFC不会和浮动元素重叠清除浮动经常用的一个技巧

浮动

float

定位 position

定位属性：

position: absolute;
position: relative;
position: fixed;
position: sticky;
position: static;
position: initial;
position: inherit;
position: unset; 定位属性的值：
static
relative
absolute
fixed
sticky
initial
inherit
unset 定位属性的作用：
定位元素的位置
定位元素的大小
定位元素的内容
定位元素的父元素
定位元素的兄弟元素
定位元素的子元素
定位元素的祖先元素
定位元素的所有祖先元素
定位元素的所有兄弟元素
定位元素的所有子元素
定位元素的所有祖先元素
定位元素的所有子元素
定位元素的所有祖先元素
定位元素的所有子元素
定位元素的所有祖先元素
定位元素的所有子元素

Flex Box

一种新的排版上下文它可以控制子级盒子的：

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

使用

设置 display: flex;

遵循flex布局而不是IFC BFC

控制流向

flex-direction: row | column | row-reverse | column-reverse

默认 row 反向 column

控制对齐

主轴 justify-cnontent

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

不设置默认 justify-content: flex-start;

基线对齐

align-items: flex-start | flex-end | center | baseline | stretch

侧轴 align-items

侧轴对齐，首先侧轴要有高度，所以要设置容器的高

flex-start ------ 默认，对齐侧轴起点
flex-end ------ 对齐侧轴终点
center ------- 与侧轴中点对齐

Flexibility

可以设置子项的弹性，当容器有剩余空间是，会伸展，容器空间不够时，会收缩

flex-grow 有剩余空间时的伸展能力
flex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度

Flex及FLex的缩写

| 简写 | 实际 | 描述 | | ---- | | ---- | | ---- | | flex:1 | flex-grow: 1; | 弹簧，弹力 | | flex:100px | flex-basis: 100px; | 基础长度没有设置一般读取一些宽度和高度的值直接写宽度也可以 | | flex:2 1 | flex-grow: 2;``flex-shrink: 1; | | | flex: auto | | | | flex: none | | | | flex: stretch | | 换行 |

Grid

区别:二维网格 Flex 一维

display: grid; => 创建一个Grid容器

使用grid-template 相关属性将容器划分为网格

划分网格

            grid-template-columns: 100px 100px 200px;
            grid-template-rows: 100px 10px

            grid-template-columns: 30% 30% auto;
            grid-template-rows: 100px auto;

            grid-template-columns: 100px 1fr 1fr;
            grid-template-rows: 100px 1fr;

fr ==份

grid lin 网格线

    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-end: 3;

或者

    grid-area: 1 / 1 / 3 / 3;

float 浮动

实现文字环绕的一个功能可以使用float属性

float: left;
float: right;
float: none;
float: inherit;

position 绝对定位

position: static; 默认值，非特定元素

position: relative; 相当于自身位置做一个偏移，不脱离文档流

在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top,left,bottom,right设置偏移长度
流内其他元素当他没有偏移一样布局

position: absolute; 绝对定位，相对非static祖先元素定位

脱离常规流
相对于最近的非static祖先定位
不好对流内元素布局造成影响

position: fixed; 相对于窗口绝对定位

和absolute区别，后者找父类。前者找窗口

position: sticky; 粘性定位。

前端与 CSS | 青训营笔记

前端----css

使用css的三种方式

外联

内链

嵌入

选择器 Selector

通配选择器

id选择器

类选择器

属性选择器

demo

demo2-属性特定值演示

demo3--匹配性的选择

伪类 pseudo-classes

状态伪类

结构伪类

组合 Combinators

选择器组demo

颜色

RGB 颜色 表示

颜色 HSL

alpha 不透明度

字体

字体样式

字体大小

字体样式

字体粗细

字体颜色

字体下划线

字体删除线

字体对齐

字体行高

字体行间距

字体字间距

white-space

几个常用的特殊符号

优先级

选择器的特异度 Sqecificity

继承

css可以和不可以继承的属性

显示继承 inherit

初始值

media

盒模型

margin

margin collapse(外边距折叠)

bording

padding

content (width,height)

box-sizing:boder-box;

overflow

布局 Layout

常规流

块级 and 行级

display

行级的排版上下文

块级排版上下文

浮动

定位 position

Flex Box

Flexibility

Flex及FLex的缩写

Grid

grid lin 网格线

float 浮动

position 绝对定位

RGB 颜色表示