CSS3
关注
分享
扫一扫
文章平均质量分 91
..
云崖先生
持续分享Python、Golang、JavaScript、MySQL、Redis、Elasticsearch、MongoDB等相关知识。
Ps：高产似母猪
展开
-
CSS3系列 16 响应式布局
媒体查询媒体查询是响应式布局中非常常用的一种手段，在学习媒体查询之前要先了解什么是响应式。所谓响应式即在不同尺寸屏幕设备上响应的内容不同相信在之前你写的页面在PC端看非常华丽工整，但是一拿到移动端全部乱了套，这就是因为没有对页面做响应式处理。Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。媒体类型选项说明all所有媒体类型screen用于电脑屏幕，平板电脑，智能手机等print打印设备speec原创 2021-07-21 17:28:53 · 602 阅读 · 1 评论 -
CSS3系列 15 帧动画
基础知识通过定义一段动画中的关键点、关键状态来创建动画。@Keyframes相比transition对动画过程和细节有更强的控制。过渡动画是两个状态间的变化，帧动画可以处理动画过程中不同时间的细节变化，对过渡动画理解后再学习习帧动画会非常容易，也可以把帧动画理解为多个帧之间的过渡动画。关键帧使用@keyframes 规则配置动画中的各个帧from 表示起始点to表示终点可以使用百分数如 20% 代表动画运行到20%处基本使用下面使用 @keyframes 定义了动画叫 radius原创 2021-07-21 17:28:23 · 425 阅读 · 0 评论 -
CSS3系列 14 过渡时间
过渡时间基础知识在了解CSS过渡时间之前，你应该先了解一下CSS的变形动画，可以参考之前的一篇博客。我们的元素在属性发生变化时，如果没有特地的为它设置过渡时间，整个变化过程其实是以毫秒级别进行的，过程非常快，肉眼不易察觉。故我们要学习CSS过渡时间，来让它的变化过程更加平滑。动画属性不是所有css属性都有过渡效果，查看支持动画的CSS属性 ，一般来讲有中间值的属性都可以设置动画如宽度、透明度等。可以看一下下面这个例子，比如边框的样式就不支持过渡效果，而其他的诸如背景颜色，高度宽度等等都是支持过原创 2021-07-21 17:27:52 · 1344 阅读 · 5 评论 -
CSS3系列 13 变形动画
前言在开始介绍CSS变形动画之前，可以先了解一下学习了它之后能做什么，有什么用，这样你看这篇文章可能会有一些动力。学习了CSS变形动画后，你可以为你的页面做出很多炫酷的效果，如一个3D的魔方，一个很酷的旋转菜单等等。在本章节中将会采用大量的实例进行演示，相信你如果看完这篇文章后写出的页面会更加的吸引眼球。基础知识坐标系统首先我们要学习的变形动画，想达到在上图中出现的3D效果单纯的X与Y两个轴是实现不了的，还需要加入一条纵深轴，即Y轴的参与才有一个3D的视觉感受。那么如何来理解X,Y,Z这三条原创 2021-07-21 17:27:25 · 446 阅读 · 1 评论 -
CSS3系列 12 栅格布局
栅格布局基本介绍CSS的栅格布局也被称为网格布局(Grid Layout)，它是一种新兴的布局方式。栅格布局是一个二维系统，这意味着它可以同时处理列和行，与弹性布局相似，栅格系统也是由栅格容器包裹栅格元素进行使用。对于栅格布局来说，它的思想实际上非常简单，将一块区域绘制成格子，然后将元素填进去即可。作为学习者应该从下面两个角度来学习栅格布局：怎么样画出栅格容器怎么样将元素放进栅格容器中的某一区域值得一提的是，现在的一些旧版浏览器对于栅格布局并没有较好的支持性，所以这项技术的应用场景其实相原创 2021-07-21 17:26:47 · 6145 阅读 · 0 评论 -
CSS3系列 11 弹性布局
弹性布局基本介绍弹性布局flex是CSS3新增的一种布局方式，相较于浮动布局，弹性布局在开发效率与维护性上都远胜前者。flex全称为flexible box，因此也被称之为弹性盒子。学习弹性布局最主要从2个方面入手：弹性容器：被设置为display: flex或display: inline-flex的容器元素弹性元素：弹性容器中包裹的元素一个大的弹性容器中可以包含多个小的弹性容器，我们可以控制弹性容器中元素的排列方式，也可以为弹性元素进行单独的区域划分以及改变其排列方式，总之而言使用弹性原创 2021-07-21 17:26:14 · 1367 阅读 · 0 评论 -
CSS3系列 10 定位布局
定位布局基本介绍CSS中，定位布局是非常常见的技术手段，它可以将任意元素放在页面中任意的位置上。早期的页面基本都是由浮动+定位布局来完成的。我们以京东为例，这就是一个非常好的定位布局小例子：定位布局虽然常用但是不能滥用，他可能会出现一些意料之外的情况，我们应该只对一些特定元素进行定位，而对不需要定位的元素则可对其使用默认文档流和浮动的手段进行布局排列。定位类型 position使用position对一个元素进行定位。它可设置的值如下表所示：值描述static默认定位原创 2021-07-20 08:36:10 · 297 阅读 · 0 评论 -
CSS3系列 09 浮动布局
浮动布局基本介绍浮动布局是CSS早期最常使用的一种布局方式。说白了就是使元素进行漂浮，从而脱离默认文档流排列的一种技术手段。使用浮动布局应该注意以下几点：浮动应当发生在一个大盒子内部（body标签也可以看做一个大盒子）浮动后的元素会影响后面未浮动元素的排列方式浮动元素会自动转换为inline-block状态浮动元素只会在父盒子的content区域，不会溢出到父盒子的padding区域当一个父盒子中所有的元素都进行浮动后，可能会造成父盒子高度塌陷的问题使用浮动对一个元素使用float原创 2021-07-20 08:35:40 · 370 阅读 · 0 评论 -
CSS3系列 08 盒子模型
盒子元素基本介绍每一个标签都可以看做一个盒子，在网页的布局中也是大盒子不断的嵌套小盒子。每个盒子模型都包含以下名词：content：内容区域，可以由width与height来进行宽高设置，是盒子模型体积组成部分之一padding：内边距，指的是content与border之间的距离，是盒子模型体积组成部分之一border：边框，边框也算整个盒子模型的体积组成之一margin：外边距，指的是该盒子与另一个盒子之间的距离如下图所示：一个盒子的可视面积由3部分所构成（content、pad原创 2021-07-20 08:35:09 · 245 阅读 · 1 评论 -
CSS3系列 07 背景处理
背景样式纯色背景 background-color使用background-color可定义纯色背景。代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid原创 2021-07-20 08:34:33 · 204 阅读 · 1 评论 -
CSS3系列 06 数据样式
表格绘制表格 display我们除了可以使用table标签进行表格绘制外，在CSS3中display也同样支持表格的绘制。如下表所示：样式规则说明table对应 tabletable-caption对应 captiontable-row对应 trtable-cell对应 th 或 tdtable-row-group对应 tbodytable-header-group对应 theadtable-footer-group对应 tfoo原创 2021-07-20 08:34:01 · 218 阅读 · 1 评论 -
CSS3系列 05 文本控制
基础设置字体家族 font-family使用font-family可定义多个字体，浏览器会按照从左至右的顺序进行查找这些字体。为什么需要定义多个字体？原因是如果你只使用了一种字体而恰好用户的计算机中并没有该字体就会降低显示效果。代码示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible原创 2021-07-20 08:33:28 · 182 阅读 · 0 评论 -
CSS3系列 04 常见单位
像素大小pxpx是固定的像素单位，如果你的网页要在多端进行使用那么尽可能的少使用它，它不具有响应式的特性。如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="原创 2021-07-20 08:32:58 · 212 阅读 · 1 评论 -
CSS3系列 03 属性继承
选择器优先级不同的选择器具有优先级，如果一个元素同时被多个选择器所选择且设置了同名样式时，它会按照优先级来判定应用哪一个选择器的样式。如果优先级相同，则下面的选择器生效，常见优先级示例：行内式渲染：1000id选择器：100class选择器：10name选择器：1当使用组合选择器时，优先级会进行累加，如下所示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">原创 2021-07-20 08:32:27 · 196 阅读 · 0 评论 -
CSS3系列 02 元素选择器
基本选择器* 通用选择器*会选择所有元素，无视层级。常用于做样式清除，如内边距、外边距清除等。示例如下，将所有的标签元素文本设置为红色：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"原创 2021-07-20 08:31:56 · 453 阅读 · 2 评论 -
CSS3系列 01 基础知识
CSS介绍基本介绍CSS全称为Cascading Style Sheet，译为层叠样式表。它能够为HTML进行样式美化以及页面布局。如果将单纯的HTML所构成的页面当做一副素描画，那么CSS的作用就是为这幅素描画进行上色处理。当然CSS也能对HTML文档进行布局，让其不再使用默认的文档流排列方式，而是利用CSS让元素进行自由的组合、排列。值得一提的是在早期没有出现CSS时，对HTML布局我们大多会使用table标签来进行，但是CSS诞生后就不会那么做了，使用CSS布局更加的方便。关于CSS的学原创 2021-07-20 08:31:21 · 169 阅读 · 0 评论