前端学习<三>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.hqwc.cn/news/587075.html

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

相关文章

文献速递:基于SAM的医学图像分割---UN-SAM: 通用无需提示的广义细胞核图像分割

Title 题目 UN-SAM: Universal Prompt-Free Segmentation for Generalized Nuclei Images UN-SAM: 通用无需提示的广义细胞核图像分割 01 文献速递介绍 在数字病理学领域&#xff0c;对病理组织图像进行细胞核图像分割的任务是形态量化和肿瘤分级评估的基石。尽管这项任务…

如何在Ubuntu系统使用Nextcloud+Cpolar搭建可公网访问私人专属网盘

文章目录 1. 安装Docker2. 使用Docker拉取Nextcloud镜像3. 创建并启动Nextcloud容器4. 本地连接测试5. 公网远程访问本地Nextcloud容器5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定公网地址远程访问 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛…

【CKA模拟题】一文教你用StorageClass轻松创建PV

题干 For this question, please set this context (In exam, diff cluster name) kubectl config use-context kubernetes-adminkubernetesYour task involves setting up storage components in a Kubernetes cluster. Follow these steps: Step 1: Create a Storage Class…

Flash选型确认

3.1 NOR Flash选型 容量&#xff1a;容量大小一般是我们首先要考虑的因素&#xff0c;Flash的大小一般用bit表示&#xff0c;容量范围涵盖512Kb~512Mb。例如型号GD25Q64C容量就为64Mb8MB。 供电电压&#xff1a;Nor Flash的供电电压一般分为四种&#xff1a;2.7V~3.6V&#x…

JAVAEE之JavaScript

1.JavaScript JavaScript (简称 JS) 是世界上最流行的编程语言之一 是一个脚本语言, 通过解释器运行 主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行. 脚本是什么&#xff1f; 脚本&#xff08;script&#xff09;是使用一种特定的描述性语言&#x…

蚁剑流量分析

蚁剑流量分析 在靶机上面上传一个一句话木马&#xff0c;并使用蚁剑连接&#xff0c;进行抓包, 一句话木马内容 <?php eval($_POST[1]); defalut编码器 在使用蚁剑连接的时候使用default编码器 连接之后进行的操作行为是查看当前目录(/var/www/html)下的文件&#xff0…

用动态规划求解多段图的最短路径问题

题目描述 对如下图所示的一个5段图&#xff0c;图上的数字代表该段路径的成本。写出求最短路径的计算过程&#xff0c;给出最短路径和距离。 思路分析 创建一个边权数组edgeWeigth&#xff0c;存储顶点和边的信息&#xff0c;用来表示图创建一个cost数组&#xff0c;索引in…

视觉Transformer和Swin Transformer

视觉Transformer概述 ViT的基本结构&#xff1a; ①输入图片首先被切分为固定尺寸的切片&#xff1b; ②对展平的切片进行线性映射&#xff08;通过矩阵乘法对维度进行变换&#xff09;&#xff1b; ③为了保留切片的位置信息&#xff0c;在切片送入Transformer编码器之前&…

算法学习——LeetCode力扣图论篇1(797. 所有可能的路径、200. 岛屿数量、695. 岛屿的最大面积)

算法学习——LeetCode力扣图论篇1 797. 所有可能的路径 797. 所有可能的路径 - 力扣&#xff08;LeetCode&#xff09; 描述 给你一个有 n 个节点的 有向无环图&#xff08;DAG&#xff09;&#xff0c;请你找出所有从节点 0 到节点 n-1 的路径并输出&#xff08;不要求按特…

java中的string和stringbuff和stringBuilter

String类 String类是引用类型&#xff0c;而不是基础数据类型。 所有双引号括住的都是String类。 所有String类都是在方法区的字符常量池中存储数据&#xff0c;通过new String(“example”);创建的字符串在堆中有一个对象&#xff0c;其内容是一个指向字符常量池中一个指针。…

[羊城杯 2020]EasySer

[羊城杯 2020]EasySer 进入页面&#xff0c;发现是ubuntuapache2&#xff0c;但是好像没啥用 尝试访问/robots.txt&#xff0c;得到 访问/star1.php/&#xff0c;查看源码&#xff0c;得到提示 一看就知道是ssrf&#xff0c;使用http://127.0.0.1/ser.php&#xff0c;得到…

【攻防世界】warmup (代码审计)

进入题目环境&#xff0c;只有一个表情&#xff1a; ctrl u 查看源代码&#xff1a; 源代码提示我们访问 /source.php。访问结果如下&#xff1a; 我们进行代码审计&#xff0c;发现解题的关键点 include &_REQUEST[file]。但是题目使用了白名单进行了过滤。我们发现白名单…