![](https://img-blog.csdnimg.cn/20200310101635595.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS
文章平均质量分 70
CSS
WindrunnerMax
这个作者很懒,什么都没留下…
展开
-
CSS实现渐隐渐现效果
CSS实现渐隐渐现效果实现渐隐渐现效果是比较常见的一种交互方式,通常的做法是控制display属性值在none和其它值之间切换,虽说功能可以实现,但是效果略显生硬,所以会有这样的需求——希望元素消失时具有平滑的效果。实现opacityopacity是用以设置透明度的属性,单纯将opacity设置为0只能从视觉上隐藏元素,而元素本身依然占据它自己的位置并对网页的布局起作用,它也将响应用户交互例如点击事件,对于其添加过渡属性可以显示动画效果,使用transitionend事件监听过渡完成之后隐藏元素,此原创 2021-02-03 11:45:02 · 6274 阅读 · 1 评论 -
CSS实现展开动画
CSS实现展开动画展开收起效果是比较常见的一种交互方式,通常的做法是控制display属性值在none和其它值之间切换,虽说功能可以实现,但是效果略显生硬,所以会有这样的需求——希望元素展开收起能具有平滑的效果。实现首先想到的是通过height在0与auto之间切换,但是结果可能并不会是我们所预期的那样,原因是我们将要展开的元素内容是动态的,即高度值不确定,因此height使用的值是默认的auto,从0px到auto是无法计算的,因此无法形成过渡或动画效果。据此我们可以使用max-height,将m原创 2021-01-29 18:22:03 · 6699 阅读 · 0 评论 -
实现文字滚动播放
实现文字滚动播放实现文字滚动播放,通过使用CSS3动画与Js控制来实现,由于使用CSS动画来控制偏移限制较多,因此通常还是使用Js来实现。实现CSS Animation使用CSS动画方法,使用position: relative配合left属性来控制文字元素距离左侧相对偏移的距离。此方法的主要问题在于left是100%是相对于父级元素的宽度来说的,因此这个值的设定要取决于父级元素的宽度和本身元素内容的宽度。<!DOCTYPE html><html><head>原创 2021-01-21 15:06:09 · 1449 阅读 · 0 评论 -
CSS实现图形效果
CSS实现图形效果CSS实现正方形、长方形、圆形、半圆、椭圆、三角形、平行四边形、菱形、梯形、六角星、五角星、心形、消息框。正方形<section> <div id="square"></div></section><style type="text/css"> #square{ width: 100px; height: 100px; background: #4C98F7原创 2020-08-31 13:22:31 · 605 阅读 · 0 评论 -
实现毛玻璃效果
实现毛玻璃效果使用CSS实现毛玻璃效果,使用CSS滤镜filter中的blur属性实现。实现首先定义一个填充满整个屏幕的背景。<style type="text/css"> body{ width: 100vw; height: 100vh; margin: 0; background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB8原创 2020-07-06 12:04:43 · 1291 阅读 · 0 评论 -
CSS常用单位
CSS常用单位CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax,按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位。绝对长度单位px 像素通常而言,一个CSS像素代表屏幕设备的一个像素点,但是对于高分辨率屏幕而言一个CSS像素往往占多个设备像素,也就是说有多个屏幕像素点来表示1px,1px = 1in / 96。<style type="text/css"> div{ hei原创 2020-06-30 13:26:26 · 1247 阅读 · 0 评论 -
display的值及作用
display的值及作用display属性可以设置元素的内部和外部显示类型,元素的外部显示类型将决定该元素在流式布局中的表现,例如块级或内联元素,元素的内部显示类型可以控制其子元素的布局,例如grid或flex。目前所有浏览器都支持display属性,但是对于属性值的兼容性仍需注意。外部显示这些值指定了元素的外部显示类型,实际上就是其在流式布局中的角色,即在流式布局中的表现。display: nonedisplay: none;是CSS1规范,无兼容性问题,该属性值表示此元素不会被显示,依照词义是原创 2020-06-18 13:17:56 · 4544 阅读 · 0 评论 -
如何避免FOUC
如何避免FOUCFOUC即无样式内容闪烁也可以称为文档样式短暂失效,主要就是指HTML已加载而样式表并未加载,此后样式表再加载而产生的闪烁现象。样式表前置根据浏览器渲染的顺序,将CSS在<head>中引入或者嵌入,相对于将CSS放到<body>或者页面底部来说,可以使页面渲染速度加快,这对于页面内容比较丰富的网站或者网络链接较慢时相当重要。假如将样式表放置于底部,就会导致浏览器还未加载样式表就开始渲染页面,无法渐进式渲染页面而直接从无样式状态立即跳转到有样式状态,就会造成FOU原创 2020-06-12 17:13:58 · 868 阅读 · 0 评论 -
CSS隐藏元素的方法
CSS隐藏元素的方法使用CSS隐藏元素的主要方式有diaplay: none;、opacity: 0;、visibility: hidden;、position: absolute; overflow: hidden;、clip-path: polygon(0 0, 0 0, 0 0, 0 0);、height: 0; overflow: hidden;。diaplaydisplay: none;属性依照词义是真正隐藏元素,使用这个属性,被隐藏的元素不占据任何空间,用户交互操作例如点击事件都不会生效,原创 2020-06-11 10:26:48 · 1062 阅读 · 0 评论 -
文本溢出截断省略
文本溢出截断省略文本溢出截断省略是比较常见的业务场景,主要分为单行文本溢出截断省略与多行文本溢出截断省略,单行的截断方案比较简单,多行截断相对比较复杂。单行溢出省略单行文本溢出截断省略直接使用CSS即可,其无兼容问题,文本溢出范围才显示省略号,否则不显示省略号,省略号位置显示刚好,但是只能作为单行文本溢出截断省略的解决方案。<section> <div class="t1">很长很长很长很长很长很长很长很长的文本</div> <div cla原创 2020-06-06 20:34:19 · 930 阅读 · 0 评论 -
Float浮动
Float浮动CSS中float属性会使元素浮动,使元素向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。实例元素的水平方向浮动,意味着元素只能左右移动而不能上下移动。使用float意味着使用块布局,其会在display非块级元素情况下修改display值的计算值。一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素会脱离文档流但不会脱离文本流,当浮动时其不会影响周围的盒子模型,但是文字会环绕在浮动元素周围,可以认为文档流与文字流是分层结原创 2020-05-23 11:17:41 · 1242 阅读 · 0 评论 -
Position定位
Position定位CSS中position属性是比较常用的元素定位方案,position常用的取值有static、relative、absolute、fixed、sticky、inherit。staticstatic属性是HTML元素的默认值,即没有定位,遵循正常的文档流对象,对于top、bottom、left、right、z-index属性的设置都被忽略。文档流,指的是盒子元素排版布局过程中,元素会自动从左往右,从上往下的流式排列。文本流,指的是文字元素排版布局过程中,元素会自动从左往右,从上原创 2020-05-22 12:08:16 · 1002 阅读 · 0 评论 -
块级格式化上下文
块级格式化上下文BFC块级格式化上下文Block Formatting Context,是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域,是用于布局块级盒子的一块渲染区域,并且与这个区域的外部毫无关系,是一个独立的区域,是一个环境。触发BFC根元素<html>。浮动元素,元素的float不是none。绝对定位元素,元素的position为absolute或fixed。行内块元素,元素的display为inline-block。表原创 2020-05-16 12:47:26 · 1040 阅读 · 0 评论 -
响应式布局的实现
响应式布局的实现响应式布局指的是同一页面在不同屏幕尺寸或者在不同的设备下有不同的布局,能够在大屏设备以及小屏设备获得更好的浏览体验,简单来说就是页面适应终端而无需为每个终端制作单独的页面。媒体查询通过使用CSS媒体查询来实现响应式布局,针对不同的媒体类型设置不同的样式规则,可以根据视窗、设备高度与宽度、设备方向、分辨率等进行不同CSS适配。使用link链接<!--<link ...原创 2020-05-05 18:27:14 · 1215 阅读 · 0 评论 -
CSS3新特性
CSS3新特性CSS3是最新的CSS标准,旨在扩展CSS2.1。圆角通过border-radius属性可以给任何元素制作圆角。border-radius: 所有四个边角border-*-*-radius属性的缩写。border-top-left-radius: 定义了左上角的弧度。border-top-right-radius: 定义了右上角的弧度。border-bottom-ri...原创 2020-04-27 14:24:36 · 1267 阅读 · 0 评论 -
CSS引入方式
CSS引入的方式将CSS作用到HTML主要有四种方式,分别为HTML元素添加内联样式、<style>标签嵌入样式、<link>标签引入外部样式、@import导入外部样式。内联方式<div style="color: red"></div>特点不需要额外的HTTP请求。适合HTML电子邮件与富文本编辑器的使用。内联样式比外部样式具有...原创 2020-04-21 11:51:32 · 1247 阅读 · 0 评论 -
SVG基础
SVG基础SVG可缩放矢量图形Scalable Vector Graphics是基于可扩展标记语言XML,用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式,SVG于2003年成为W3C推荐标准。示例<?xml version="1.0" standalone="no"?><!DO...原创 2020-04-14 12:24:48 · 1337 阅读 · 0 评论 -
Table布局
Table布局<table>最常用的也是最正确的使用方法是制作表格,由于其对占据的空间有着划分的作用,便可以使用<table>来布局。实例实现一个简单的布局,将表格的border、cellpadding、cellspacing全部设置为0,表格的边框和间距就不占有页面空间,它只起到划分空间的作用,如果布局复杂,可以在单元格中再嵌套表格,单元格中的元素或者嵌套的表格用a...原创 2020-04-07 11:10:05 · 1577 阅读 · 0 评论 -
GRID布局
GRID布局目前CSS布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一定的相似性,都可以指定容器内部多个成员的位置。不同之处在于,Flex布局是轴线布局,只能指定成员针对轴线的位置,可以看作是一维布局。Grid布局则是将容器划分成行和列,产生单元格,然后指定成员所在的单元格,可以看作是二维布局。...原创 2020-04-06 13:36:28 · 1559 阅读 · 0 评论 -
FLEX布局
FLEX布局FLEX布局也称弹性布局,可以为盒状模型提供最大的灵活性,是布局的首选方案,现已得到所有现代浏览器的支持。基础通过指定display: flex来标识一个弹性布局盒子,称为FLEX容器,容器内部的盒子就成为FLEX容器的成员,容器默认两根轴线,水平的主轴与垂直的交叉轴,主轴的开始位置叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start...原创 2020-04-04 13:25:30 · 1460 阅读 · 0 评论 -
CSS样式优先级
CSS优先级当样式表比较复杂时,很容易出现多个样式对作用于一个标签的情况,这时就需要注意CSS优先级来决定哪些样式会被作用于该标签,哪些会被覆盖。选择器的优先级对于标签自有的属性,选择器的优先级规则为内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器当如下几个选择器作用于同一个标签时本例显示的颜色为red,可以在...原创 2020-03-20 12:17:14 · 1594 阅读 · 0 评论 -
CSS选择器
CSS选择器使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到选择器。HTML页面中的元素就是通过CSS选择器进行控制的。id选择器<div id="s1">id选择器</div><style type="text/css"> #s1 { color: red; }</style&...原创 2020-03-08 13:10:24 · 1546 阅读 · 0 评论 -
CSS盒子模型
CSS盒子模型所有的HTML元素都可以看作是一个盒子将盒子模型拆分,则包括 外边距+边框+填充+内容显得专业一些,box model = margin+border+padding+content------------------------------------------| margin | | --------...原创 2020-03-06 12:11:33 · 1459 阅读 · 0 评论 -
CSS伪类与伪元素
CSS伪类与伪元素CSS引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。伪类伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的。比如说,当用户悬停在指定的元素时,我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有...原创 2020-03-02 13:19:33 · 1442 阅读 · 0 评论 -
CSS实现垂直居中布局
垂直居中首先将<html>与<body>的高度设置为100%(为演示父元素不定宽高的效果),并清除<body>的默认样式 html,body{ margin: 0; height: 100%; }垂直居中大致分为两类,父元素定宽高与父元素不定宽高,将两类样式以及子容器设定好 .set-parent,....原创 2020-02-28 11:03:43 · 1539 阅读 · 0 评论