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

文章目录

  • 前言
  • 一、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 BoxInline Level Box
不和其它盒子并列摆放和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性盒模型中的width、height不适用
块级元素行级元素
生成块级盒子生成行级盒子；内容分散在多个行盒(line box) 中
body、article、div、main、section、h1-6、p、ul、li等span、em: strong、cite、code 等
display: blockdisplay: inline

2. diaplay 属性

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

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定义的几种方式

  1. padding：10px（四个边内边距均为10px）
  2. padding：10px 20px（上下内边距为10px，左右内边距为20px）
  3. 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属性

staticrelativeabsolutefiedstick
默认值，非定位元素相对自身原本位置偏移，不脱离文档流绝对定位，相对非 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. 透明度

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/34918.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

字节跳动第七期技术训练营——“抓到你了”项目

字节跳动第七期技术训练营——“抓到你了”项目

github地址 一. 项目要求&#xff1a; 作业名称 《抓到你了——具备安全防护能力的账号系统》 产品形态 具有安全风控防护能力的账号注册登录系统 产品功能介绍 设计并开发一个登录注册系统&#xff0c;可以支持注册、登录和登出或注销的基本功能&#xff0c;另外也需要…
阅读更多...
字节跳动青训营--前端day8

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

文章目录 前言一、CSR&#xff0c;SSR&#xff0c;SSG1. CSR2. SSR3. SSG4. SSR&#xff0c;SSG的优势利于SEO更短的首屏时间 二、什么是Next.js三、Next.js客户端开发1. Api2. CSS Modules3. Layout4. 文件式路由 四、Next.js服务端开发 前言 仅以此文章记录学习历程。 一、C…
阅读更多...
孙叫兽CSDN社区云----WebIT已创建，欢迎大家前端全栈小伙伴踊跃加入

孙叫兽CSDN社区云----WebIT已创建，欢迎大家前端全栈小伙伴踊跃加入

目录 社区云是什么&#xff1f; 创建CSDN社区云WebIT的目的 推荐分享的技术点&#xff08;如下图所示&#xff09; 社区成员权益 版主权益 管理员权益 WebIT社区云积分规则 WebIT优质版主及管理员可以申请直播分享前端技术 WebIT社区云将为社区运营者提供&#xff1a; …
阅读更多...
字节跳动在Rust高性能编程探索和实践

字节跳动在Rust高性能编程探索和实践

本文整理自字节跳动火山引擎基础架构服务框架工程师吴迪于Qcon大会上的分享内容。 嘉宾及内容介绍 本次分享内容主要分为以下三个部分&#xff1a; 我们为什么选择了 Rust 语言&#xff1b;我们做了什么&#xff1b;展望未来&#xff1a;机遇与挑战。 我们为什么选择了 Rust 语…
阅读更多...
字节跳动自研 OpenBMC 方案成功上线，STE 团队工程师都做了哪些事？

字节跳动自研 OpenBMC 方案成功上线，STE 团队工程师都做了哪些事？

OpenBMC 是 Linux Foundation 组织里的一个项目&#xff0c;也是目前开源 BMC 里方案最成熟、社区最活跃的项目。日前&#xff0c;我们得知字节跳动系统部 STE 团队自研的 OpenBMC&#xff0c;已在内部成功上线&#xff0c;并稳定运行了两个多月。这也是字节跳动首次正式上线并…
阅读更多...
月薪11K！95后房产经纪人转行当程序员:工资过万不难,精神压力也不大

月薪11K！95后房产经纪人转行当程序员:工资过万不难,精神压力也不大

时代在不断的发展&#xff0c;人们对“衣食住行”的要求越来越高&#xff0c;而这其中人们对于“住”是格外的关注。 买房的人希望自己能买到合适的房子&#xff0c;而卖房的人也担心自己的房子卖便宜了&#xff0c;所以越来越多的人在买房卖房这一块儿很难抉择&#xff0c;因…
阅读更多...
chatgpt赋能python：Python怎么装Pip

chatgpt赋能python：Python怎么装Pip

Python怎么装Pip Python是一种非常流行的编程语言&#xff0c;可以用于各种用途&#xff0c;包括网页开发、数据分析、科学计算等。如果你是一个Python编程新手&#xff0c;你可能不知道如何安装和使用Python包。Pip是Python包管理系统&#xff0c;可以帮助你安装和管理Python…
阅读更多...
赛事报名启动丨百度Apollo星火自动驾驶大赛开始报名啦！

赛事报名启动丨百度Apollo星火自动驾驶大赛开始报名啦！

作为汽车智能化、网联化的关键环节&#xff0c;自动驾驶成为全球科技界、产业界竞争的新赛道。随着人工智能、5G通信、激光雷达、高精地图等多项技术不断完善&#xff0c;自动驾驶的判断力和理解力得到了显著提升。为了推动自动驾驶技术的发展、加快人工智能技术的迭代&#xf…
阅读更多...
RocketMQ 在同程旅行的落地实践

RocketMQ 在同程旅行的落地实践

本文作者&#xff1a;刘树东 - 同程艺龙技术专家 01/使用概况 同程旅行选择RocketMQ主要基于以下几个方面的考虑&#xff1a; 技术栈&#xff1a;公司主要以 Java 开发为主&#xff0c;因此我们倾向于选择一款用 Java 实现的MQ&#xff0c;且没有任何第三方依赖为最佳&#…
阅读更多...
火爆全网的个人行程卡纪念版！3秒教你快速生成！

火爆全网的个人行程卡纪念版！3秒教你快速生成！

大家好 咱们直接开门见山&#xff01; 3 秒生成你的专属行程卡纪念版 用下面这款小工具&#xff0c;只需要 3 秒&#xff0c;就能帮大家生成【行程卡纪念版】。 用一张图片记录你三年去过的地方。 回顾过去三年&#xff0c;我们发现许多美好的回忆已经深深地留在了我们的心中。…
阅读更多...
CAN网络管理唤醒功能

CAN网络管理唤醒功能

采用1043的can 芯片：工作模式 – 正常模式 – 具有 INH 输出以及本地和远程唤醒请求功能的待机模式 – 具有 INH 输出以及本地和远程唤醒请求的低功耗睡眠模式 状态切换流程图： CAN唤醒的需求： 唤醒请求(Wake Up Request) 唤醒请求可分为两种： ● 主动唤醒请求：来自模…
阅读更多...
(智能车比赛)基于 ADS 逐飞库 英飞凌 TC264 377系列 的多核使用经验

(智能车比赛)基于 ADS 逐飞库 英飞凌 TC264 377系列 的多核使用经验

多核并行主要有两个方面 一&#xff0c;程序&#xff0c;变量储存地址设置 二&#xff0c;运行核选择 一、内存分配 概念及过程描述 尽量将不同的功能划分为各个模块&#xff0c;然后交给不同的cpu运行。 或者说不同的cpu负责运行不同的功能&#xff0c;cpu之间以少量的参…
阅读更多...
CK-UR05-US桌面式超高频RFID发卡器开发手册之USB控制命令格式

CK-UR05-US桌面式超高频RFID发卡器开发手册之USB控制命令格式

CK-UR05-US桌面式超高频RFID发卡器支持USB控制命令格式&#xff0c;本文重点就此格式展开说明&#xff01; CK-UR05-US桌面式超高频RFID发卡器 1、取版本号(GetReaderVersion) 功能:取读写器的硬件、软件版本 命令码: 02H 命令参数:无 命令包: 『40H 02H 02H BCH』 举例: 如…
阅读更多...
RFID课程设计-图书管理系统用户端设计

RFID课程设计-图书管理系统用户端设计

RFID课程设计-图书管理系统用户端设计课程设计题目课程设计任务内容题目设计基本原理NFC开发概述标签调度系统如何将 NFC 标签映射到 MIME 类型和 URI如何将 NFC 标签分发到应用在 Android 清单中请求 NFC 访问权限过滤 NFC IntentACTION_NDEF_DISCOVEREDACTION_TAG_DISCOVERED…
阅读更多...
Linux炫酷终端仪表盘

Linux炫酷终端仪表盘

最近发现了一个适合装逼的终端命令&#xff0c;会在终端显示一个炫酷的仪表盘&#xff08;提示&#xff1a;终端全屏显示效果才好&#xff09; 先上图 首先安装三个软件 sudo apt-get install node nodejs-bin sudo apt install nodejs-legacy sudo apt install git 待会会下…
阅读更多...
【袋鼠云】标签系统

【袋鼠云】标签系统

文章目录 客户画像标签建设的演进1. 业务单元独立作战2. 离线数仓统一建设3. 实时数据多维补充4. 标签产品化管理5. 数据智能化管理 标签体系设计与加工一、标签体系设计1. 数据梳理2. 基于OLP模型体系化梳理标签3. 定义标签与加工口径 二、标签模型设计三、标签配置1. 根据业务…
阅读更多...
AI最新开源：LMSYS Org开源LongChat、法律大语言模型ChatLaw、中文医疗对话模型扁鹊

AI最新开源：LMSYS Org开源LongChat、法律大语言模型ChatLaw、中文医疗对话模型扁鹊

一周SOTA&#xff1a;LMSYS Org开源LongChat、法律大语言模型ChatLaw、中文医疗对话模型扁鹊 文章目录 1. LMSYS Org发布LongChat&#xff0c;上下文碾压64K开源模型2. 北大团队发布法律大模型 ChatLaw3. 扁鹊&#xff1a;指令与多轮问询对话联合微调的医疗对话大模型 1. LMSY…
阅读更多...
pta中级题库

pta中级题库

目录 7-1 三个整数排序 7-3 求数列前n项之和 7-4 求一组数据的平均值 7-5 输出图形 7-6 一行字符变换 7-7 sdut- C语言实验——删除指定字符 7-35 二维数组中每行最大值和每行和 7-36 矩阵转置 7-38 二维数组元素变化 7-39 沙漏图形 7-40 连接两个字符串 7-41 统计…
阅读更多...
基于等照度线和窗口匹配的图像修补算法

基于等照度线和窗口匹配的图像修补算法

作者&#xff1a;翟天保Steven 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 一、关于图像修补 图像修补的目的是基于已有的图像信息或数据库内信息&#xff0c;对缺失区域进行合理地修复。在诸多领域如电影、…
阅读更多...
pyecharts-Timeline讲解时间线

pyecharts-Timeline讲解时间线

Pyecharts----Timeline (*^▽^*) 作者&#xff1a;发现美的眼睛&#xff08;本人&#xff09; 首先简单介绍一下pyecharts这个神奇的东东&#xff0c;如果你是从事web&#xff0c;那么Echarts就会熟悉知晓。 ——如果不是&#xff0c;那么这篇文章也会推荐一个非常好的&#x…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023