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

CSS基础

定义

1.定义

CSS用来定义页面元素的样式

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

2.CSS编写组成部分

选择器 Selector => 选中页面中一些元素，为其定义样式

属性 Property

属性值 Value

声明 Declaration ：属性:属性值

3.在页面中使用CSS

1）外链（推荐使用）

<link rel="stylesheet" href="">

内容和样式分离 2）嵌入

<style>
    p{
        magrin: 1px 0;
    }
</style>

3）内联

<p style="margin: 1px 0">example</p>

用到ui组件库，需要使用内联方法。

选择器 Selector

1.定义

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

2.分类

1）通配选择器

*{
    color: red;
}

2）标签选择器

p{
    color: red;
}

3）id选择器

#id{
    color: red;
}

4）类选择器

.class{
    color: red;
}

5）属性选择器

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

a标签 href属性以 # 开头
a[href^="#"]{
    color: red;
}

6）伪类

①状态性伪类：例如：a链接是否被访问过

a:link{
    color: red;
}
a:visited a:hover....

②结构伪类：根据DOM结点在DOM树中的位置决定是否选中例如：选中ol中li

li:first-child{
    color: red;
}
li:last-child{
    color: red;
}

7）组合

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

8）选择器组

通过,相连

属性设置

颜色值

① rgb

② hsl -色相、饱和度、亮度

③ 关键字

④ alpha 透明度

当alpha为1时，不透明

#ff0000xx （16进制）

rgba(255,0,0,xxx)

hsla(0,100%,50%,xxx)

字体通过font-family设置

建议英文字体写在中文字体前

使用WebFonts

@font-face{
    font-family:"Megrim";
    src:url(...);
}

字体大小通过font-size设置单位：px em （相对于父级）%
文字效果通过font-style设置
字重（字的粗细）通过font-weight设置
行高通过line-height设置
对齐通过text-align设置
空白符的设置通过white-space设置

CSS深入

1.选择器优先级

特异度 — 越特殊优先级越高

id （伪）类标签

2.继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

显式继承

例如：box-sizing 不存在继承

*{
    box-sizing: inherit;
}

3.初始值

每个属性都有一个初始值

例：background-color => transparent

margin-left => 0

用initial关键字显式重置为初始值

background-color:initial

布局

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

分为常规流（块级、行级、表格布局、FlexBox、Grid布局）、浮动、绝对定位

1.盒模型 content-box

图片.png

width 取值为长度、百分数（相对于容器的content box 宽度）、auto（由浏览器根据其它属性确定）

height 取值为长度、百分数（容器有指定高度时生效）、auto（由内容计算得来）

padding 指定四个方向的内边距，取值为百分数时指相对于容器宽度

注：

一个值：四个方向、两个值：上下and左右、四个值：顺时针一圈

border 指定容器边框粗细、样式、颜色

使用border实现三角形

.demo{
    width: 0px;
    height: 0px;
    border-width:50px;
    border-style:solid;
    border-color:yellow green blue red;
    border-color:red transparent transparent transparent;
}

图片.png

margin 指定四个方向的外边距，取值为长度、百分数（相对于容器宽度）、auto

注：使用margin:auto水平居中

div{
    width:200px;
    height:200px;
    margin-left:auto;
    margin-right:auto;
}

margin在垂直方向上会折叠边距，保留较大。

2.border-box

图片.png

width、height包含padding和border

当有内容溢出，通过overflow解决

overflow: visible（溢出） hidden（隐藏） scroll（滚动条） auto（隐藏/滚动条）

3.块级 vs 行级

块级：不和其它盒子并列摆放，自动换行 display:block

行级：和其它行级盒子一起放在一行或拆开成多行（盒模型中width、height不适用） display:inline

另：display:inline-block 本身是行级，可以放在行盒中；可设置宽高；作为一个整体不会被拆散成多行（在一个块盒中进行摆放） display:none 排版时忽略

行级排版上下文

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

IFC规则

盒子在一行内水平摆放
一行放不下时，换行展示
text-align 决定一行内盒子的水平对齐
vertical-align 决定一个盒子在行内的垂直对齐
避开浮动元素

块级排版上下文

某些容器会创建一个BFC

根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overFlow值不是visible的快盒
display:flow-root

BFC排版规则

盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素合并

当既有块级元素又有行级元素时，会创建两个匿名块级盒子来进行排版

4.Flex Box

可以控制子级盒子的摆放流向、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行

图片.png 主轴：justify-content

图片.png

侧轴：align-items

图片.png

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

flex-grow有剩余空间时的伸展能力

flex-shrink容器空间不足时收缩的能力

flex-basis没有伸展或收缩时的基础长度

5.Grid

图片.png

使用grid-template相关属性将容器划分为网格 grid-template-columns grid-template-rows
设置每个子项占哪些行、列

通过grid line网格线标识区域

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

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

6.浮动

图片环绕文字效果：

img实现左浮动 p标签内文字自动绕过图片

7.position属性

属性值	描述
static	默认值，非定位元素
relative	相对自身原有位置偏移，不脱离文档流
absolute	绝对定位，相对非static祖先元素定位，脱离常规流
fixed	相对于视口绝对定位

CSS | 青训营笔记

CSS基础

定义

1.定义

2.CSS编写组成部分

3.在页面中使用CSS

选择器 Selector

1.定义

2.分类

属性设置

CSS深入

1.选择器优先级

2.继承

3.初始值

布局

1.盒模型 content-box

2.border-box

3.块级 vs 行级

行级排版上下文

块级排版上下文

4.Flex Box

5.Grid

6.浮动

7.position属性