CSS
关注
分享
扫一扫
文章平均质量分 93
命中。
这个作者很懒，什么都没留下…
展开
-
CSS高度塌陷问题（float塌陷&margin塌陷）
一、什么是盒子高度塌陷？1、解释当父元素没设置足够大小的时候，而子元素设置了浮动的属性，子元素就会跳出父元素的边界（脱离文档流），尤其是当父元素的高度为auto时，而父元素中又没有其它非浮动的可见元素时，父盒子的高度就会直接塌陷为零， 我们称这是CSS高度塌陷。2、代码示例...原创 2021-11-08 20:32:30 · 2618 阅读 · 0 评论 -
CSS3精灵（Sprites）技术
目录一、什么是精灵技术二、产生的原因三、作用四、使用方法1、方法解释2、举例（1）、简单例子（2）、导航列表例子（3）、悬停效果举例（4）、缺点一、什么是精灵技术css精灵图技术（sprite）直译为“CSS精灵”，也被称为通常被解释为“CSS图像拼合”、“CSS贴图定位”或“CSS图片精灵”、“CSS雪碧图”，是一种网页图片应用处理方式。其实就是把一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅.原创 2021-10-28 16:23:09 · 1705 阅读 · 0 评论 -
CSS——滤镜（filter ）
前言滤镜这个词我们不陌生，最常见的就是相机中的滤镜或者说PhotoShop 之类的制图软件。我们用滤镜来美化图片。而在 CSS 中，我们无需借助任何软件也可以实现很多种滤镜效果，例如模糊效果、透明效果、色彩反差调整、色彩反相等等。另外，通过 CSS 中的滤镜还能对网页中的元素或者视频进行处理。一、什么是滤镜对图像、图像进行的视觉处理(模糊、饱和度、对比度等)。二、滤镜的实现---filter属性1、CSS语法filter: none | blur() | brightness(.原创 2021-10-27 23:36:27 · 4098 阅读 · 0 评论 -
CSS——变形、过渡、动画
目录前言一、变形（transform）1、2D变换（1）、translate() 方法（2）、rotate() 方法（3）、scale() 方法（4）、skew() 方法（5）、matrix() 方法2、3D变换（1）、translate3d()位移（2）、translateZ()（3）、rotate3d()旋转（4）、scale3d()缩放（5）、matrix3d()矩阵3、CSS3中实现变形的优点二、过渡（transition）1、..原创 2021-10-27 21:59:55 · 657 阅读 · 0 评论 -
CSS中的长度单位
目录 一、长度单位 CSS 单位二、绝对长度 三、相对长度 1、单位描述 2、vw、vh和%的区别 3、vmin、vmax的用处一、长度单位CSS 单位CSS 有几种表示长度的不同单位。许多 CSS 属性接受“长度”值，诸如width、margin、padding、font-size等。长度是一个后面跟着长度单位的数字，诸如10px、2em...原创 2021-10-27 02:37:58 · 555 阅读 · 0 评论 -
CSS弹性盒子
目录前言一、弹性盒子的三大核心元素二、flex容器的属性1、flex-direction：布局方向2、flex-wrap：环绕效果3、flex-flow 属性4、justify-content：用于水平对齐flex 项目5、align-items：用于垂直对齐 flex 项目6、align-content ：用于对齐弹性线7、完美居中三、flex的项目属性1、order2、flex-grow3、flex-shrink...原创 2021-10-27 01:51:27 · 348 阅读 · 0 评论 -
CSS三大模块（二&三）：浮动和定位
前言：CSS页面布局除了上次说到的盒子模型，浮动和定位也是重中之重。我们首先了解一下网站页面最常见的布局，并且认识块级元素和行内元素，再了解浮动和定位在页面布局中如何使用。一、页面布局这是最常见的页面布局方式，通常分为页眉、菜单、内容和页脚。二、CSS中的块元素和行内元素因为在CSS中，我们把元素放在盒子中，让它成为一块一块的，方便我们布局，并且在此基础上实现盒子的定位和浮动，所以我们非常有必要认识块元素和行内元素。1、块元素（block）容器类标签div , h系列 , .原创 2021-10-22 20:40:26 · 558 阅读 · 0 评论 -
CSS三大模块(一)：盒子模型
前言：CSS作为网页布局的好帮手，最基本也是最重要的一个模块就是盒子模型。也就是说我们可以通过把HTML元素视为一个一个的方框，然后通过改变这些方框的位置来布局网页，这样方便又高效。一、盒子模型1、盒子模型的内容下图就展示了一个盒子，它具有以下内容：(1)外边距(margin)：盒子与其他元素之间的额距离 (2)内边距(padding)：也称为填充距离,内容和边框之间的距离 (3)边框(border)：围绕内边距和内容的边框(4)内容(c...原创 2021-10-21 22:58:40 · 813 阅读 · 2 评论 -
CSS选择器（二）
目录前言：一、div标签二、CSS的属性选择器1、标签名[属性名]：选择含有给定属性的标签2、标签名[属性名=值]：选择含有给定属性值的标签3、标签名[属性名^=值]：选择给定属性值是以某个字符开头的4、标签名[属性名|=值]：选择给定属性值是以某个字符开头的5、标签名[属性名$=值]：选择给定属性值是以某个字符结尾的6、标签名[属性名*=值]：选取属性值包含指定词的元素7、应用三、CSS的关系选择器（CSS组合器）1、后代选择器:匹配属于指定...原创 2021-10-21 02:13:33 · 227 阅读 · 0 评论 -
CSS中颜色、样式规则（字体样式、列表样式、表格样式）
吗原创 2021-10-20 22:15:14 · 3624 阅读 · 0 评论 -
CSS(层叠样式表cascading style sheet）
一、CSS简介1、CSS(1)CSS 是一种描述 HTML 文档样式的语言。(2)什么是 CSS？CSS指的是层叠样式表*(CascadingStyleSheets) CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素 CSS节省了大量工作，它可以同时控制多张网页的布局 外部样式表存储在CSS 文件中*：也称级联样式表。2、CSS主要作用 (1)对页面的外观进行美化 (2)统一网站页面的风格 ...原创 2021-10-20 02:32:59 · 504 阅读 · 0 评论