![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
韶关是我家
这个作者很懒,什么都没留下…
展开
-
CSS3 总结(二十二)——渐变(CSS3)
渐变(CSS3)CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。CSS3 定义了两种类型的渐变(gradients):类型说明...原创 2020-03-16 22:35:58 · 78 阅读 · 0 评论 -
CSS3 总结(二十一)——BFC
BFCBlock formatting content直译为(块级格式化上下文)。他是一个独立的区域,只有块级盒子参与,它规定了内部的块级盒子如何布局,并且与这个区域外部毫不相干(就是BFC盒子里面怎么布局都不影响外面的布局,个人觉得这个就是以前所学知识的一个综合,感觉有点废话,可能是我前面学习时接触过一些该知识点的缘故吧)。注意:不是所有元素模式都能产生BFC,产生BFC需要满足下面条件...原创 2020-03-16 14:16:03 · 122 阅读 · 0 评论 -
CSS3 总结(二十)——弹性盒子(CSS3)
弹性盒子可用于伸缩布局(即浏览器窗口拉伸的时候,元素会跟着拉伸)。注意:因为该语法规范版本较多,浏览器支持不一致,所以Flexbox布局使用较少。相关内容请查阅:https://www.runoob.com/css3/css3-flexbox.html属性解释(链接中可能有些部分读者不理解或者有错):1.flex(用在弹性子元素):子项目在主轴的缩放比例,如果弹性子元素不指定flex...原创 2020-03-15 19:29:59 · 237 阅读 · 0 评论 -
CSS3 总结(十九)——3D转换(CSS3)
3D转换(CSS3)左手坐标系:注意:-Z指向屏幕。X:右边正的,左边负的Y:下面正的,上面负的Z:外面正的,里面负的3D转换内容部分在2D中(transform和transform-origin)已讲过,在这里就不多写了,上链接:https://www.runoob.com/css3/css3-3dtransforms.html透视效果(perspective属性):透视原理...原创 2020-03-14 21:30:45 · 122 阅读 · 0 评论 -
CSS3 总结(十八)——2D转换(CSS3)
2D转换 (transform)通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。详细API请查看文档(重复的就不多写了,这里只提一些重要的):https://www.runoob.com/css3/css3-2dtransforms.html注意:1.translate(x,y)转换方法中可以使用%,但他是相对于自身的百分比,而不是父级元素的百分比。设置转换中心...原创 2020-03-14 19:09:54 · 134 阅读 · 0 评论 -
CSS3 总结(十七)——过渡
过渡(CSS3)过渡是CSS3中具有颠覆性的特征之一,我们可以不使用Flash动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。相关内容请查看https://www.w3school.com.cn/css3/css3_transition.asp注意:如果所有属性都要添加过渡效果,用all就可以了。transition: all 0.5s; //后面属...原创 2020-03-14 14:03:38 · 93 阅读 · 0 评论 -
CSS3 总结(十六)——伪元素
伪元素伪元素被称为伪元素是因为他们不是真正的页面元素,HTML没有对应的元素,但是其所有用法和表现行为与真正的页面元素一样,可以对其使用诸如页面元素一样的CSS样式,表面上看上去貌似是页面的某些元素来展现,实际上是CSS样式展现的行为,因此被称为伪元素。相关内容请查看:https://www.w3school.com.cn/css/css_pseudo_elements.asp注意:伪元素...原创 2020-03-14 13:06:10 · 151 阅读 · 0 评论 -
CSS3 总结(十五)——滑动门技术
滑动门技术使各种特殊形状的背景能够自适应元素中文本内容的多少,他从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,最常见于各种导航栏的滑动门。主要技术1.CSS精灵技术(说白了就是要背景图像)2.padding撑开宽度实现原理一个标签设置背景图像左侧但不设置宽度(让子元素可以撑开父元素,如果设置了宽度,父元素不会...原创 2020-03-14 12:54:18 · 469 阅读 · 0 评论 -
CSS3 总结(十四)——字体图标
字体图标图片是有诸多优点的,但是缺点很明显,比如图片不断增加的总文件的大小,还增加了很多额外的HTTP请求,这都会大大降低网页的性能,更重要的是,图片不能很好的进行缩放,因为图片放大和缩小会失真,我们后面学习移动端响应式,很多情况下,希望我们的图标是可以缩放的,”字体图标“这个技术可以很好的帮我们解决这个问题。优点1.可以做出跟图片一样可以做的事情,如改变透明度\旋转度等。...原创 2020-03-13 21:19:23 · 144 阅读 · 0 评论 -
CSS3 总结(十三)——精灵技术(sprite)
精灵技术(sprite)背景: 当用户访问一个网站时。需要向服务器发送请求。网页上的每张图像都要经过一次请求才能展现给用户。然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁的接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称为CSS Sprite、CSS雪碧)。精灵技术本...原创 2020-03-13 14:25:19 · 256 阅读 · 0 评论 -
CSS3 总结(十二)——溢出的文字隐藏
溢出的文字隐藏属性说明格式word-break自动换行,word-break属性指定非CJK脚本的断行规则。CJK脚本是中国,日本和韩国(“中日韩”)脚本。取值:1. normal 使用浏览器默认的换行规则。2.break-all 允许在单词内换行(即允许单词拆开显示)。3.keep-all 只能在半角空格或连字符处换行(即不允许拆开单词显示,但如果单词里有"-"或上述提...原创 2020-03-13 13:10:10 · 277 阅读 · 0 评论 -
CSS3 总结(十一)——CSS用户界面样式
用户界面样式所谓的界面样式,就是更改一些用户操作样式,比如更改用户的鼠标样式,表单轮廓,防止表单域拖拽等。但是比如滚动条样式改动受到了很多浏览器的抵制,因此我们就不改滚动条。属性说明格式cursorcursor属性定义了鼠标指针放在一个元素边界范围内时所采用何种系统预定义的光标形状 。常用取值:1.default :默认光标(通常是一个箭头)。2.pointer: 光标...原创 2020-03-13 12:42:43 · 94 阅读 · 0 评论 -
CSS3 总结(十)——元素的显示与隐藏
元素的显示与隐藏在CSS中三个显示和隐藏的属性比较常见,我们要区分开,分别是:display、visibility和overflow。他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。例如页面中的广告,当点击类似关闭不见了,但是我们刷新页面,又会出现。属性说明display使用该属性隐藏元素之后不会保留位置。取值:1.none :此元素不会被显示。2.blo...原创 2020-03-12 22:12:24 · 174 阅读 · 0 评论 -
CSS3 总结(九)——定位
定位元素的定位属性主要包括定位模式和边偏移定位两部分。边偏移定位边偏移属性描述toptop 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。如果 “position” 属性的值为 “static”,那么设置 “top” 属性不会产生任何效果。rightright 属性规定元素的右边缘。该属性定义了定位元素右外边距边界...原创 2020-03-12 19:50:22 · 216 阅读 · 0 评论 -
CSS3 总结(八)——布局流程
布局流程1.确定页面的版心(可视区)。版心失职网页中主体内容所在的区域,一般在浏览器窗口中水平居中显示,常见的宽度值为960px、980px、1000px、1200px等。2.分析页面中的行模块,以及每个行模块中的列模块。3.制作HTML页面,CSS文件。4.CSS初始化,然后开始运用盒子模型的原理,通过div+CSS布局来控制网页的各个模块。...原创 2020-03-11 12:24:45 · 98 阅读 · 0 评论 -
CSS3 总结(七)——浮动
浮动网页布局的核心就是用css来摆放盒子。css的定位机制有三种:普通流(文档流或标准流)、浮动、定位。普通流实际上就是一个网页内标签元素正常从上到下、从左到右排列顺序的意思,比如块级元素占一行,行内元素会按顺序依次前后排列,按照这种大前提的布局排列之下绝对不出现例外情况的叫做普通流布局。浮动最早是用来控制图片,以便其他元素(特别是文字)实现"环绕"图片的效果。慢慢的就用浮动的特性来布局了。设...原创 2020-03-11 12:17:35 · 147 阅读 · 0 评论 -
CSS3 总结(六)——盒子模型
盒子模型padding和margin1.使用padding时,如果未指定盒子的width,则盒子的尺寸不会改变,当指定了时,盒子的尺寸会相应的发生变化。2.行内元素只有左右外边距,没有上下外边距,应尽量避免调整垂直方向的padding,因为可能会与预料的不同(浏览器问题)。3.块元素垂直方向上使用margin时,相邻块元素可能会发生外边距合并,之间的外边距取两者之间的最大值。4.块元素...原创 2020-03-10 21:58:53 · 761 阅读 · 0 评论 -
CSS3 总结(五)——背景属性
背景属性CSS 背景属性用于定义HTML元素的背景。属性描述格式background-colorbackground-color 属性定义了元素的背景颜色。body {background-color:#b0c4de;}(页面的背景颜色使用在body的选择器中)background-imagebackground-image 属性描述了元素的背景图像。默认情况...原创 2020-03-09 13:16:23 · 131 阅读 · 0 评论 -
CSS3 总结(四)——标签显示模式
标签显示模式HTML标签一般分为块标签和行内标签两种类型,也称块元素和行内元素。标签的类型(显示模式)说明特点块级元素(block-level)每个块元素通常都会独自占据一整行或多整行,可以设置宽高、高度、对齐等属性,常用于网页布局和网页结构的搭建。常见的块元素有:<h1>~<h6>、<p>、<div>、<ul>...原创 2020-03-07 16:57:55 · 129 阅读 · 0 评论 -
CSS3 总结(一)——字体属性(Font)
字体属性(Font)属性描述font-sizefont-size 属性可设置字体的尺寸。一般使用相对长度单位px(像素)。font-family规定元素的字体系列。可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识...原创 2020-03-06 15:40:50 · 195 阅读 · 0 评论 -
CSS3 总结(二)——选择器
选择器将css样式作用于特定的HTML元素基础选择器选择器类型说明格式标签选择器(元素选择器)指用HTML标签名称作为选择器,按标签名称分类 ,为页面中某一类标签指定统一的css样式。标签名(元素名){属性1:属性值1;属性2:属性值2;属性3:属性值3;}类选择器类选择器使用"."进行标识,后面紧跟类名。与class属性搭配使用。.类名{属性1:属性...原创 2020-03-06 21:41:58 · 161 阅读 · 0 评论 -
CSS3 总结(三)——文本属性(Text)
文本属性(Text)属性描述colorcolor 属性规定文本的颜色。这个属性设置了一个元素的前景色(在 HTML 表现中,就是元素文本的颜色)。属性值:1.预定义的颜色,如red、green、blue等。2.规定颜色值为十六进制值的颜色(比如 #FF0000,每两位分别代表颜色红绿蓝),当每种颜色中的数值都是同一个的时候可以简写(如#ff2200,#f20),该类方式最常...原创 2020-03-07 12:04:29 · 267 阅读 · 0 评论