文章目录

前言
一、css
- 1. css的组成
- 2. css三种使用方式
- 3.css的工作方式
二、 css选择器Selector
- 1. 选择元素的方式
- 2. 伪类（pseudo-classes）
- - 2.1 状态伪类
  - 2.1 结构伪类
- 3.通过组合选择元素
- - 3.1 直接组合
  - 3.2 元素组合的拓展
- 4. 选择器的特异度（Specificity）
- 5. 样式覆盖
- 6. 样式继承
- - 6.1 显式继承：
  - 6.2 初始值
- 7. css求值过程
三、css文档流（NormalFlow）
- 1. css行级 & 块级
- 2. diaplay 属性
- 3. 行级排版上下文
- - 3.1 IFC 内的排版规则：
- 4. 块级排版上下文
- - 4.1会创建一个BFC的容器
  - 4.2 BFC内的排版规则
四、布局（Layout）
- 1.布局相关技术
- 2.常规盒模型
- - 2.1 width
  - 2.2 heigth
  - 2.3 padding
  - 2.4 boeder
  - 2.5 margin
- 3. Flex Box
- - 3.1 他可以控制盒子的：
  - 3.2 Flexibility
- 4. Grid
- 5. float
- 6. position属性
- - 6.1 position：relative
  - 6.2 position：absolute
五、颜色
- 1. RGB
- 2. HSL
- 3. 透明度

前言

仅以此文章记录学习历程

一、css

Cascading Style Sheets（用来定义页面元素的样式）

设置字体和颜色

设置位置和大小

添加动画效果

1. css的组成

2. css三种使用方式

通常建议时用外链和嵌入式（主要是样式分离）

3.css的工作方式

二、 css选择器Selector

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

1. 选择元素的方式

按照标签名（h1，div，p…）、类名class（.）或者id（#）
按照属性
按照DOM树中的位置

利用通配符匹配选择

2. 伪类（pseudo-classes）

定义：伪类是添加到选择器的关键字，用于指定所选元素的特殊状态

两种伪类类型：

状态伪类
结构性伪类

2.1 状态伪类

<style>
/*默认状态*/
a:link{color:black;
}
/*点击后状态*/
a:visited {color:gray;
}
/*鼠标悬浮状态*/
a:hover{color: red;
}
/*输入框边框高亮样式*/
:focus{outline: 2px solid orange;
}
</style>
<body>
<a href="http://baidu.com">百度</a>
<label><input type="text">
</label>

2.1 结构伪类

<style>
/*默认状态*/
li{list-style-position: inside;border-bottom: 1px solid;padding: .5em;
}
/*选中第一个*/
li:first-child{color: #ff99cc;
}
/*选中最后一个*/
li:last-child{border-bottom: none;
}
</style>
<body>
<ol><li>泰坦尼克号</li><li>星球大战</li><li>阿凡达</li><li>复仇者联盟</li><li>速度与激情8</li>
</ol>
</body>

3.通过组合选择元素

3.1 直接组合

<style>
/*默认状态*/
.error {color: red;
}
/*通过类名和标签组合*/
input.error {border-color: red;
}
</style>
<body>
<label>用户名<input class="error" value="aa">
</label>
<span class="error">最少3个字符
</span>
</body>

3.2 元素组合的拓展

4. 选择器的特异度（Specificity）

5. 样式覆盖

6. 样式继承

不可继承属性：width，hiegth等
可继承属性：color，font-size等

6.1 显式继承：

通过通配符 * 和 inherit 关键字使不可继承元素能够继承

inherit的定义和用法：

inherit 关键字指定一个属性应从父元素继承它的值
inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性

6.2 初始值

CSS中，每个属性都有一个初始值

background-color 的初始值为 transparent
margin-left 的初始值为 0

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

background-color: initial

7. css求值过程

三、css文档流（NormalFlow）

根元素、浮动和绝对定位的元素会脱离常规流
其它元素都在常规流之内 (in-flow)
常规流中的盒子，在某种排版上下文中参与布局

1. css行级 & 块级

Block Level Box	Inline Level Box
不和其它盒子并列摆放	和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性	盒模型中的width、height不适用

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

2. diaplay 属性

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

3. 行级排版上下文

Inline Formatting Context (IFC)
只包含行级盒子的容器会创建一个IFC

3.1 IFC 内的排版规则：

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

4. 块级排版上下文

Block Formatting Context (BFC)

4.1会创建一个BFC的容器

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

4.2 BFC内的排版规则

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

四、布局（Layout）

作用：确定内容的大小和位置的算法

依据元素、容器、兄弟节点和内容等信息来计算

1.布局相关技术

常规流也称为文档流

2.常规盒模型

2.1 width

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

2.2 heigth

指定 content box 宽度
取值为长度、百分数、auto
auto 取值由内容计算得来
百分数相对于容器的 content box 高度
容器有指定的高度时，百分数才生效

2.3 padding

指定元素四个方向的内边距
百分数相对于容器宽度

padding定义的几种方式

padding：10px（四个边内边距均为10px）
padding：10px 20px（上下内边距为10px，左右内边距为20px）
padding：10px 20px 30px 40px（内边距分别为上10px 右20px 下30px 左40px）

2.4 boeder

2.5 margin

指定元素四个方向的外边距
取值可以是长度、百分数、auto
百分数相对于容器宽度

边距塌陷：
当有两个盒子存在，并且都有边距时，会取两者中最大的一个而不是相加，如：
a下边距为100px，b上边距为120px 他两者的间距为120px

3. Flex Box

一种新的排版上下文

3.1 他可以控制盒子的：

摆放的流向( ↑ ↓ ← → )
摆放顺序
盒子宽度和高度水平和垂直方向的对齐
是否允许折行

3.2 Flexibility

可以设置子项的弹性：当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
flex-grow 有剩余空间时的伸展能力
lex-shrink 容器空间不足时收缩的能力
flex-basis 没有伸展或收缩时的基础长度

4. Grid

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

5. float

通过改变子元素的float：left/right值来让元素布局，需要时可以在子元素上加上width
当子元素浮动之后会造成父元素塌陷的情况，需要在父元素上加上clearfix：after来清除浮动

6. position属性

static	relative	absolute	fied	stick
默认值，非定位元素	相对自身原本位置偏移，不脱离文档流	绝对定位，相对非 static 祖先元素定位	相对于视口绝对定位	一些时候是relative定位（定位基点是自身默认位置），另一些时候自动变成fixed定位（定位基点是视口）

6.1 position：relative

6.2 position：absolute

五、颜色

1. RGB

初始值都为0，最大值则为255
即：rgb（000,000,000）–> rgb(255,255,255)

2. HSL

场景：当需要把一个颜色变亮或者变暗时，可以通过调整Lightness实现

3. 透明度

字节跳动青训营--前端day2相关推荐

字节跳动青训营--前端day7
文章目录前言一.Node.js 的应用场景 (why) 1. 前端工程化 2. web服务端应用 3. Electron跨端桌面应用二.Node.js 运行时结(what) 1. V8 ,lib ...
第五届字节跳动青训营前端进阶学习笔记（八）React框架入门
文章目录前言 React 的设计思路 1.传统JavaScript更新UI的痛点 2.我们对UI代码的需求 3.组件 (1)组件定义 (2)组件设计 (3)组件结构 4.React的生命周期 Rea ...
字节跳动青训营--前端day8
文章目录前言一.CSR,SSR,SSG 1. CSR 2. SSR 3. SSG 4. SSR,SSG的优势利于SEO 更短的首屏时间二.什么是Next.js 三.Next.js客户端开发 1 ...
字节跳动青训营--前端day5
文章目录前言一.初识HTTP 拓展-输入地址到页面渲染发生了哪些事情二.协议分析 1.发展 2.报文 2.1 请求报文: 请求行: 请求头主体 2.2 响应报文: 状态行响应头响应正文 2 ...
字节跳动青训营--前端day10
文章目录前言一.web开发安全 - 攻击 1. Cross-Site Scripting(XSS) 1.1 存储型(Stored Xss) 1.2 反射型(Reflect Xss) 1.3 DOM ...
字节跳动青训营--前端day1
文章目录前言一. 前端 1 前端的技术栈 2. 前端的边界 3. 前端的关注点二. HTML 1. HTML常用标签及语义化 2. HTML 语法 3. 谁在使用我们写的HTML 前言仅以此文 ...
字节跳动青训营--前端day3
文章目录前言一.写好JavaScript的一些原则二.各司其职三.组件封装四.过程抽象前言仅以此文章记录学习一.写好JavaScript的一些原则各司其职:让HTML.CSS和Jav ...
第五届字节跳动青训营寒假 —— 前端专场
第五届字节跳动青训营寒假 -- 前端专场文章目录第五届字节跳动青训营寒假 -- 前端专场青训营 - 前端练习题每日一练编程题前端编程题 [342. 4的幂](https://leetcod ...
前后端免费学，字节跳动青训营-暑假专场报名启动
亲爱的小伙伴,你准备好了吗? 第六届字节跳动青训营,来咯! 无论你是初学者还是有一定经验都可以在青训营找到属于自己的位置全方位课程讲解 & 项目实践指导让你轻松掌握「前端 or 后端」技 ...

字节跳动青训营--前端day2