前端学习<三>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.mzph.cn/news/795227.shtml

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

相关文章

如何用putty通过ssh连接ubuntu

1. 下载和安装PuTTY 访问PuTTY官网下载PuTTY的最新版本。 2. 打开PuTTY 解压下载的文件后&#xff0c;找到PuTTY文件并双击打开。 3. 配置SSH连接 在ubuntu下安装ssh服务在安装ssh时&#xff0c;我一直遇到一个问题&#xff0c;原因是我的虚拟机连不上网&#xff0c;反复实…

深入理解 SQL 中的数据集合和数据关联

引言 在数据库管理系统中&#xff0c;数据集合和数据关联是 SQL 查询中常见的概念。它们是构建复杂查询和分析数据的基石。本文将深入探讨 SQL 中的数据集合和数据关联&#xff0c;包括它们的概念、常见用途以及实际示例。 首先引入一下数学中的集合 集合的基本概念&#x…

加速度:电子元器件营销网站的功能和开发周期

据工信部预计&#xff0c;到2023年&#xff0c;我国电子元器件销售总额将达到2.1万亿元。随着资本的涌入&#xff0c;在这个万亿级赛道&#xff0c;市场竞争变得更加激烈的同时&#xff0c;行业数字化发展已是大势所趋。电子元器件B2B商城平台提升数据化驱动能力&#xff0c;扩…

Flutter Don‘t use ‘BuildContext‘s across async gaps.

Flutter提示Don‘t use ‘BuildContext‘s across async gaps.的解决办法—flutter里state的mounted属性

[蓝桥杯 2019 国 C] 数正方形

[蓝桥杯 2019 国 C] 数正方形 题目描述 在一个 N N N \times N NN 的点阵上&#xff0c;取其中 4 4 4 个点恰好组成一个正方形的 4 4 4 个顶点&#xff0c;一共有多少种不同的取法&#xff1f; 由于结果可能非常大&#xff0c;你只需要输出模 1 0 9 7 10^9 7 1097 的…

吴恩达机器学习笔记:第 6 周-11机器学习系统的设计(Machine Learning System Design)11.1-11.5

目录 第 6 周 11、 机器学习系统的设计(Machine Learning System Design)11.1 首先要做什么11.2 误差分析11.3 类偏斜的误差度量11.4 查准率和查全率之间的权衡11.5 机器学习的数据 第 6 周 11、 机器学习系统的设计(Machine Learning System Design) 11.1 首先要做什么 在接…

leetcode.24. 两两交换链表中的节点

题目 给定一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后的链表。 你不能只是单纯的改变节点内部的值&#xff0c;而是需要实际的进行节点交换。 思路 创建虚拟头节点&#xff0c;画图&#xff0c;确认步骤。 实现 /*** Definition for singly-li…

docker安装、调试qsign签名服务器

go-cqhttp 在 Docker 里早就部署好了&#xff0c;由于没有搭建 qsign 签名服务器&#xff0c;所以迟迟不敢上线。今天终于搞定了在 Docker 下安装 qsign 签名服务器了。这次用的docker市场里找到的镜像&#xff0c;下次找时间制作一个自己的镜像。 1 拉取和运行镜像&#xff1a…

C# MES通信从入门到精通(9)——c#使用visual studio2019社区版部署webservice服务

前言 在上位机软件开发领域,我们经常使用调用webservice接口来和mes系统进行交互,我们在开发Mes程序之前也可以自己先模拟发布客户的webservice接口进行调用从而加快软件开发进度,本文就是详细介绍如何自己发布webservice接口。 1、创建 参考这篇博文:webservice服务创建…

图像处理与视觉感知---期末复习重点(6)

文章目录 一、图像分割二、间断检测2.1 概述2.2 点检测2.3 线检测2.4 边缘检测 三、边缘连接3.1 概述3.2 Hough变换3.3 例子3.4 Hough变换的具体步骤3.5 Hough变换的法线表示形式3.6 Hough变换的扩展 四、阈值处理4.1 概述4.2 计算基本全局阈值算法4.3 自适应阈值 五、基于区域…

LeetCode-131. 分割回文串【字符串 动态规划 回溯】

LeetCode-131. 分割回文串【字符串 动态规划 回溯】 题目描述&#xff1a;解题思路一&#xff1a;回溯&#xff0c; 回溯三部曲解题思路二&#xff1a;0解题思路三&#xff1a;0 题目描述&#xff1a; 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个…

常用软件架构模式优缺点及应用场景

1、分层架构模式 最常见的架构模式就是分层架构或者称为 n 层架构。大部分软件架构师、设计师和开发者都对这个架构模式非常熟悉。尽管对于层的数量和类型没有具体限制&#xff0c;但大部分分层架构主要由四层组成&#xff1a;展现层、业务层、持久层和数据库层&#xff0c;如…

Peter算法小课堂—树状数组

大家好&#xff0c;我是人见人爱&#xff0c;花见花开&#xff0c;车见车爆胎的树状数组Peter Pan&#xff0c;hhh 讲正文前&#xff0c;先来一个长文警告⚠很重要的知识点&#xff1a;L SB&#xff08;SB&#xff1f;&#xff09; LSB 怎么算呢&#xff1f; 哦……懂了&…

LeetCode-79. 单词搜索【数组 字符串 回溯 矩阵】

LeetCode-79. 单词搜索【数组 字符串 回溯 矩阵】 题目描述&#xff1a;解题思路一&#xff1a;回溯 回溯三部曲。这里比较关键的是给board做标记&#xff0c;防止之后搜索时重复访问。解题思路二&#xff1a;回溯算法 dfs,直接看代码,很容易理解。visited哈希&#xff0c;防止…

计算机网络——33多点访问协议

多点访问协议 多路访问链路和协议 两种类型的链路&#xff08;一个子网内部链路连接形式&#xff09; 点对点 拨号访问的PPP以太网交换机和主机之间的点对点链路 广播 传统以太网HFC上行链路802.11无线局域网 多路访问协议 单个共享的广播型链路 2个过更多结点同时传送&am…

c# 指数搜索(Exponential Search)

该搜索算法的名称可能会产生误导&#xff0c;因为它的工作时间为 O(Log n)。该名称来自于它搜索元素的方式。 给定一个已排序的数组和要 搜索的元素 x&#xff0c;找到 x 在数组中的位置。 输入&#xff1a;arr[] {10, 20, 40, 45, 55} x 45 输出&#xff1a;在索…

Aurora8b10b(1)IP核介绍并基于IP核进行设计

文章目录 前言一、IP核设置二、基于IP核进行设计2.1、设计框图2.2、aurora_8b10b_0模块2.3、aurora_8b10b_0_CLOCK_MODULE2.4、aurora_8b10b_0_SUPPORT_RESET_LOGIC2.5、aurora8b10b_channel模块2.6、IBUFDS_GTE2模块2.7、aurora_8b10b_0_gt_common_wrapper模块2.8、aurora8b10…

GIS水文分析填充伪洼地学习

1 基本操作 洼地是指流域内被较高高程所包围的局部区域&#xff1b; 分为自然洼地和伪洼地&#xff1b; 自然洼地是自然界实际存在的洼地&#xff1b; 在 DEM 数据中&#xff0c;由于数据处理的误差和不合适的插值方法所产生的洼地&#xff0c;称为伪洼地&#xff1b; DEM 数据…

文件服务器之二:SAMBA服务器

文章目录 什么是SAMBASAMBA的发展历史与名称的由来SAMBA常见的应用 SAMBA服务器基础配置配置共享资源Windows挂载共享Linux挂载共享 什么是SAMBA 下图来自百度百科 SAMBA的发展历史与名称的由来 Samba是一款开源的文件共享软件&#xff0c;它基于SMB&#xff08;Server Messa…

Python环境搭建—安装PyCharm开发工具

&#x1f947;作者简介&#xff1a;CSDN内容合伙人、新星计划第三季Python赛道Top1 &#x1f525;本文已收录于Python系列专栏&#xff1a; 零基础学Python &#x1f4ac;订阅专栏后可私信博主进入Python学习交流群&#xff0c;进群可领取Python视频教程以及Python相关电子书合…