前端学习<三>CSS进阶——0102-CSS布局样式

前言

css 进阶的主要内容如下。

1、css 非布局样式

  • html 元素的分类和特性

  • css 选择器

  • css 常见属性(非布局样式)

2、css 布局相关

  • css 布局属性和组合解析

  • 常见布局方案

  • 三栏布局案例

3、动画和效果

属于 css 中最出彩的内容。

  • 多背景多投影特效

  • 3D特效编写实践

  • 过渡动画和关键帧动画实践

  • 动画细节和原理深入解析

4、框架集成和 css 工程化

  • 预处理器作用和原理

  • less/sass 代码实践

  • Bootstrap 原理和用法

  • css 工程化的的实践方式

  • js 框架中的 css 集成实践

常见问题

不会 css 的前端称之为伪前端。

Vue 中模拟Scoped CSS的方式

方案一:随机选择器。css modules。

方案二:随机属性<div abcd>div[adcd]{}

其他问题

  • html 元素的嵌套关系是怎么确定的?哪些嵌套不可以发生?

  • 比如说,为什么 div 可以放在 a 标签里面?

  • css 选择器的权重是如何计算的?写代码时要注意什么?

  • 浮动布局是怎么回事?有什么优缺点?国内用的多吗?

  • css 可否做逐帧动画吗?性能如何?

  • Bootstrap 怎么做响应式布局?

  • 如何解决 css 模块化过程中的选择器互相干扰的问题?

单独看 css 属性并不难,难的是需要把这些思路和思想,想到它的应用场景。

01-CSS中的非布局样式:

前言

CSS中,有很多非布局样式,这些样式(属性)和与布局无关,包括:

  • 字体、字重、颜色、大小、行高

  • 背景、边框

  • 滚动、换行

  • 装饰性属性(粗体、斜体、下划线)等。

这篇文章,我们来对上面的部分样式做一个回顾。

边框

如何用边框画一个三角形?详见《02-CSS基础/06-CSS盒模型详解》中的最后一段。

文字换行

  • ovferflow-wrap:通用的属性。用来说明当一个不能被分开的字符串(单词)太长而不能填充其包裹盒时,为防止其溢出,浏览器是否允许这样的单词中断换行

  • word-break:指定了怎样在单词内断行。这里涉及到CJK(中文/日文/韩文)的文字换行。

  • white-space:空白处是否换行。

上面这三个 css 属性进行组合,可以设置各种不同的属性。

当然,如果想让一段很长的文本不换行,可以直接设置white-space: nowrap 这一个属性即可。如果想换行,可以试试white-space: pre-wrap

CSS Hack

  • CSS Hack 的方式:不合法但可以生效的写法。

  • 可以用来解决一些浏览器的兼容性问题。

  • 缺点:难理解、难维护、易失效(比如浏览器升级后,hack可能会失效)。

  • 替代方案:特性检测。

  • 替代方案:针对性加 class

CSS 效果

我们可以利用 CSS 实现各种效果,常见的效果属性有:

  • box-shadow:盒子的阴影

  • text-shadow:文本的阴影

  • border-radius

  • background

  • clip-path

02-CSS布局:

前言

常见的布局属性

(1)display 确定元素的显示类型:

  • block:块级元素。

  • inline:行内元素。

  • inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以设置宽高)。

(2)position 确定元素的位置:

  • static:默认属性值。

  • relative:相对定位。相对于元素本身进行偏移,不会改变它所占据的空间

  • absolute:绝对定位。相对于父元素中最近的 relative/absolute 进行偏移,会脱离文档流。音标:[ˈæbsəluːt]。

  • fixed:固定定位。相对于可视区域固定,会脱离文档流。

relativeabsolutefixed这三个属性,可以结合 z-index 来设置层级。

常见的布局方法

1、table 表格布局:早期使用的布局,如今用得很少。

2、float 浮动 + margin:为了兼容低版本的IE浏览器,很多网站(比如腾讯新闻、网易新闻、淘宝等)都会采用 float 布局。

3、inline-block 布局:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以设置宽高)。

4、flex 布局:为布局而生,非常灵活,是最为推荐的布局写法。

唯一的缺点是兼容性问题:

上图中可以看到, flex 布局不支持 IE9 及以下的版本。如果你的页面不需要处理 IE浏览器的兼容性问题,则可以放心大胆地使用 flex 布局。

flex 是一种现代的布局方式,是 W3C 第一次提供真正用于布局的 CSS 规范。

5、响应式布局。

float 布局

是 CSS 中一种比较麻烦的属性,涉及到 BFC 和清除浮动(面试的重点)。

float 属性的特点

  • 元素浮动

  • 脱离文档流,但不脱离文本流

代码举例:

下面这两个并列的div1div2,默认是在标准流中的:

在此基础之上,如果给div1增加float: left属性后,效果如下:

上图中,可以看到,div1设置为浮动后,会脱离文档流,不会对div2的布局造成影响;但是div1不会脱离文本流,它会影响div2中文字的排列。

其实,这正是 float 属性的作用。float 本身是用来做图文混排、文字环绕的效果。

float 所带来的影响

1、对自身的影响

  • 形成“块”(BFC)

  • 位置尽量靠上

  • 位置尽量靠左/右

下面这两个并列的div1div2,设置为浮动之后的效果:(都是尽量靠左显示的)

在上方代码的基础之上,增加 div2的宽度之后,会发现,div2掉下来了:

2、对兄弟元素的影响

  • 不影响其他块级元素的位置

  • 影响其他块级元素的内部文本

3、对父级元素的影响

  • 从父级的布局中“消失”

  • 造成父级元素的高度塌陷:父级元素撑开 div1 之后(父级元素里没有其他元素的情况下),如果设置 div1 为 float 之后,,会让父级元素的高度变为0。

inline-block 布局

对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以设置宽高)。

思路:像文本一样去排列 block 元素,没有清除浮动等问题。

存在的问题:需要处理间隙。代码举例如下:

 <!DOCTYPE html><html lang="en">​<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>.container{width: 300px;height: 300px;background: pink;}​.div1{width: 100px;height: 100px;background: green;display: inline-block;}​.div2{width: 100px;height: 100px;background: yellowgreen;display: inline-block;}​.div3{background: yellow;}</style>​<body><div class="container"><div class="div1">div1的inline-block 属性</div><div class="div2">div2的inline-block 属性</div><div class="div3">琴棋书画不会,洗衣做饭嫌累。</div></div></body>​</html>

上面的代码,存在两个问题。

问题一:如果设置div2的宽度为 200px 之后,div2 掉下来。

问题二div1div2设置为 inline-block之后,这两个盒子之间存在了间隙。这是因为,此时的 div1div2 已经被当成文本了。文本和文本之间,本身就会存在间隙。

为了去掉这个间隙,可以有几种解决办法:

办法1:设置父元素container的字体大小为0,即font-size: 0,然后设置子元素 div1div2的字体font-size: 12px

办法2:在写法上,去掉div1div2之间的换行。改为:

 <div class="div1">div1的inline-block 属性</div><div class="div2">div2的inline-block 属性</div>

响应式布局

移动端用得较多,本文暂时先不讲。

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

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

相关文章

解决Vue2项目因为安装的依赖和node版本不一致导致的报错问题

这里写自定义目录标题 1. 问题描述2. 问题排查与搜索3. 解决办法4. 反思 1. 问题描述 ERROR Failed to compile with 27 errors 下午7:28:31 error in ./node_modules/quill/themes/bubble.jsModule parse failed: Unexpected token (12:18) You may need an appropriate load…

鸿蒙OS元服务开发:【(Stage模型)设置应用主窗口】

一、设置应用主窗口说明 在Stage模型下&#xff0c;应用主窗口由UIAbility创建并维护生命周期。在UIAbility的onWindowStageCreate回调中&#xff0c;通过WindowStage获取应用主窗口&#xff0c;即可对其进行属性设置等操作。还可以在应用配置文件中设置应用主窗口的属性&…

微信小程序-文字转语音(播放及暂停)

1、使用微信小程序的同声传译功能 小程序平台-设置-第三方设置-插件管理-新增同声传译插件 小程序app.json文件配置 "plugins": {"WechatSI": {"version": "0.3.5","provider": "wx069ba97219f66d99"}},小程序中…

AI智能客服机器人是什么?对企业重要吗?

在数字化时代&#xff0c;客户服务是企业与客户建立牢不可破关系的重要桥梁。AI智能客服机器人&#xff0c;顾名思义&#xff0c;就是利用人工智能技术提升客户服务体验的自动化工具。今天&#xff0c;就让我们来揭开AI智能客服机器人的神秘面纱&#xff0c;并讨论它对企业的重…

达梦DMHS-Manager工具安装部署

目录 1、前言 1.1、平台架构 1.2、平台原理 2、环境准备 2.1、硬件环境 2.2、软件环境 2.3、安装DMHS 2.3.1、源端DMHS前期准备 2.3.2、源端DMHS安装 2.3.3、目的端DMHS安装 3、DMHS-Manager客户端部署 3.1、启动dmhs web服务 3.2、登录web管理平台 4、添加DMHS实…

Adobe Bridge 2024:连接创意,探索无限可能 mac/win版

Adobe Bridge 2024&#xff0c;作为Adobe家族中的一款强大的创意管理工具&#xff0c;再次革新了数字资产管理和工作流程优化的标准。这款软件不仅继承了Adobe Bridge一贯的直观界面和强大功能&#xff0c;更在多个方面进行了突破性的改进。 Bridge 2024软件获取 全面的资源管…

vue3项目运行正常但vscode红色波浪线报错

以下解决办法如不生效&#xff0c;可尝试 重启 vscode 一、Vetur插件检测问题 vetur 是一个 vscode 插件&#xff0c;用于为 .vue 单文件组件提供代码高亮以及语法支持。但 vue 以及 vetur 对于 ts 的支持&#xff0c;并不友好。 1、原因 如下图&#xff1a;鼠标放到红色波浪…

Flume学习笔记

视频地址:https://www.bilibili.com/video/BV1wf4y1G7EQ/ 定义 Flume是一个高可用的、高可靠的、分布式的海量日志采集、聚合和传输的系统。 Flume高最要的作用就是实时读取服务器本地磁盘的数据,将数据写入HDFS。 官网:https://flume.apache.org/releases/content/1.9.0/…

解决GNU Radio+USRP实现OFDM收发在接收端存在误码问题

文章目录 前言一、OFDM 收发流程1、OFDM 收端流程2、OFDM 收端流程 二、问题所在1、find_trigger_signal 函数解读2、general_work 函数3、问题所在 三、修改源码四、运行结果1、频谱2、传输数据测试 五、调试小技巧六、资源自取 前言 在使用 GNU Radio 时使用官方例程搭建 GN…

晨控RFID读写器与罗克韦尔PLC可编程逻辑控制器MODBUSTCP通讯说明

晨控RFID读写器与罗克韦尔PLC可编程逻辑控制器MODBUSTCP通讯说明 晨控RFID读写器系列是支持标准工业通讯协议 MODBUSTCP 的读卡器,方便用户集成到PLC等控制系统中。读卡器提供了网络 POE 供电和直流电源供电两种方式&#xff0c;确保用户在使用无 POE 供电功能的交换机时可采用…

洛谷P1000超级玛丽游戏题解[Python, Rust, Go]

题目 打印超级玛丽字符图像 小技巧 直接复制题目的超级玛丽符号首行会有空格问题&#xff0c;一直AC不过&#xff0c;一行一行地复制就OK了&#x1f44c;。 Rust 题解 fn main() {println!(" ********************####....#.#..###.....##....###...…

[计算机效率] 文本编辑工具:Notepad++

3.12 文本编辑工具&#xff1a;Notepad Notepad是一款免费的文本编辑器&#xff0c;适用于Windows操作系统。它具有轻量级、高效、可定制性强等特点&#xff0c;并且支持多种语言。以下是关于Notepad的详细介绍&#xff1a; 功能特点&#xff1a; 多语言支持&#xff1a;Note…

Tuxera NTFS for Mac2023绿色免费版 免费的ntfs for mac 免费读写硬盘U盘工具

Tuxera NTFS 2023 Mac免费版是款适合Mac用户使用的磁盘读写工具。Tuxera NTFS 2023 Mac可以很好的帮助用户在Mac上打开、编辑、复制、移动或删除存储在Windows NTFS格式的USB驱动器上的文件。并且Tuxera NTFS 2023 Mac还可以无阻碍地使用各种文件系统磁盘&#xff0c;还能解决磁…

STM32-03基于HAL库(CubeMX+MDK+Proteus)输入检测案例(按键控制LED)

文章目录 一、功能需求分析二、Proteus绘制电路原理图三、STMCubeMX 配置引脚及模式&#xff0c;生成代码四、MDK打开生成项目&#xff0c;编写HAL库的按键检测代码五、运行仿真程序&#xff0c;调试代码 一、功能需求分析 搭建完成开发STM32开发环境之后&#xff0c;开始GPIO…

【Error】log依赖冲突

启动项目报错&#xff1a; 原因&#xff1a; web模块存在两个log依赖&#xff0c;存在冲突 解决方案&#xff1a; 使用依赖分析插件删除多出的依赖&#xff1a;

LabVIEW挖坑指南

一、挖坑指南 1.1、输出变量放在条件框内 错误写法&#xff1a; 现象&#xff1a;如果没进入对应的分支&#xff0c;输出为默认值 正常写法&#xff1a; 让每个分支输出的值都在预料之内。 1.2、统计耗时不准 错误写法 现象&#xff1a;统计出来的耗时是2000ms 正常写法&a…

【Kotlin】委托模式

1 委托模式简介 委托模式的类图结构如下。 对应的 Kotlin 代码如下。 fun main() {var baseImpl BaseImpl()var baseWrapper BaseWrapper(baseImpl)baseWrapper.myFun1() // 打印: BaseImpl, myFun1baseWrapper.myFun2() // 打印: BaseImpl, myFun2 }interface Base {fun my…

Springboot集成knife4j (swagger)

1、添加依赖 在pom.xml 文件中添加 knife4j-spring-boot-starter 的依赖 <dependency> <groupId>com.github.xiaoymin</groupId> <artifactId>knife4j-spring-boot-starter</artifactId> <version>3.0.3</version> </depe…

LLM - 大语言模型 基于人类反馈的强化学习(RLHF)

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://blog.csdn.net/caroline_wendy/article/details/137269049 基于人类反馈的强化学习(RLHF,Reinforcement Learning from Human Feedback),结合 强化学习(RL) 和 人类反馈 来优化模型的性能。这种方法主要包…

day4|gin的中间件和路由分组

中间件其实是一个方法&#xff0c; 在.use就可以调用中间件函数 r : gin.Default()v1 : r.Group("v1")//v1 : r.Group("v1").Use()v1.GET("test", func(c *gin.Context) {fmt.Println("get into the test")c.JSON(200, gin.H{"…