随笔分类 - CSS
摘要：CSS实现渐隐渐现效果 实现渐隐渐现效果是比较常见的一种交互方式，通常的做法是控制display属性值在none和其它值之间切换，虽说功能可以实现，但是效果略显生硬，所以会有这样的需求——希望元素消失时具有平滑的效果。 实现 opacity opacity是用以设置透明度的属性，单纯将opacity
阅读全文
摘要：CSS实现展开动画 展开收起效果是比较常见的一种交互方式，通常的做法是控制display属性值在none和其它值之间切换，虽说功能可以实现，但是效果略显生硬，所以会有这样的需求——希望元素展开收起能具有平滑的效果。 实现 max-height 首先想到的是通过height在0与auto之间切换，但是
阅读全文
摘要：实现文字滚动播放 实现文字滚动播放，通过使用CSS3动画与Js控制来实现，由于使用CSS动画来控制偏移限制较多，因此通常还是使用Js来实现。 实现 CSS Animation 使用CSS动画方法，使用position: relative配合left属性来控制文字元素距离左侧相对偏移的距离。此方法的主
阅读全文
摘要：CSS实现图形效果 CSS实现正方形、长方形、圆形、半圆、椭圆、三角形、平行四边形、菱形、梯形、六角星、五角星、心形、消息框。 正方形 <section> <div id="square"></div> </section> <style type="text/css"> #square{ widt
阅读全文
摘要：实现毛玻璃效果 使用CSS实现毛玻璃效果，使用CSS滤镜filter中的blur属性实现。 实现 首先定义一个填充满整个屏幕的背景。 <style type="text/css"> body{ width: 100vw; height: 100vh; margin: 0; background-im
阅读全文
摘要：CSS常用单位 CSS的长度单位主要有%、px、in、cm、ch、mm、ex、pt、pc、em、rem、vw、vh、vmin、vmax，按照单位的计算方式大致可以分为绝对长度单位、相对长度单位、百分比单位。 绝对长度单位 px 像素 通常而言，一个CSS像素代表屏幕设备的一个像素点，但是对于高分辨率
阅读全文
摘要：display的值及作用 display属性可以设置元素的内部和外部显示类型，元素的外部显示类型将决定该元素在流式布局中的表现，例如块级或内联元素，元素的内部显示类型可以控制其子元素的布局，例如grid或flex。目前所有浏览器都支持display属性，但是对于属性值的兼容性仍需注意。 外部显示 这
阅读全文
摘要：如何避免FOUC FOUC即无样式内容闪烁也可以称为文档样式短暂失效，主要就是指HTML已加载而样式表并未加载，此后样式表再加载而产生的闪烁现象。 样式表前置 根据浏览器渲染的顺序，将CSS在<head>中引入或者嵌入，相对于将CSS放到<body>或者页面底部来说，可以使页面渲染速度加快，这对于页
阅读全文
摘要：CSS隐藏元素的方法 使用CSS隐藏元素的主要方式有diaplay: none;、opacity: 0;、visibility: hidden;、position: absolute; overflow: hidden;、clip-path: polygon(0 0, 0 0, 0 0, 0 0);
阅读全文
摘要：文本溢出截断省略 文本溢出截断省略是比较常见的业务场景，主要分为单行文本溢出截断省略与多行文本溢出截断省略，单行的截断方案比较简单，多行截断相对比较复杂。 单行溢出省略 单行文本溢出截断省略直接使用CSS即可，其无兼容问题，文本溢出范围才显示省略号，否则不显示省略号，省略号位置显示刚好，但是只能作为
阅读全文
摘要：Float浮动 中`float`属性会使元素浮动，使元素向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 实例 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 使用 意味着使用块布局，其会在 非块级元素情况下修改 值的计算值。 一个浮动元素会尽量向左或向右移动，直到它的
阅读全文
摘要：Position定位 中`position position static relative absolute fixed sticky inherit`。 static 属性是 元素的默认值，即没有定位，遵循正常的文档流对象，对于 、`bottom left right z index`属性的设置
阅读全文
摘要：块级格式化上下文 块级格式化上下文 ，是 页面的可视 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域，是用于布局块级盒子的一块渲染区域，并且与这个区域的外部毫无关系，是一个独立的区域，是一个环境。 触发BFC 根元素``。 浮动元素，元素的 不是 。 绝对定位元素，元素
阅读全文
摘要：响应式布局的实现 响应式布局指的是同一页面在不同屏幕尺寸或者在不同的设备下有不同的布局，能够在大屏设备以及小屏设备获得更好的浏览体验，简单来说就是页面适应终端而无需为每个终端制作单独的页面。 媒体查询 通过使用 媒体查询来实现响应式布局，针对不同的媒体类型设置不同的样式规则，可以根据视窗、设备高度与
阅读全文
摘要：CSS3新特性 CSS3是最新的CSS标准，旨在扩展CSS2.1。 圆角 通过border-radius属性可以给任何元素制作圆角。 border-radius: 所有四个边角border-*-*-radius属性的缩写。 border-top-left-radius: 定义了左上角的弧度。 bor
阅读全文
摘要：CSS引入方式 将CSS作用到HTML主要有四种方式，分别为HTML元素添加内联样式、<style>标签嵌入样式、<link>标签引入外部样式、@import导入外部样式。 内联方式 <div style="color: red"></div> 特点 不需要额外的HTTP请求。 适合HTML电子邮件
阅读全文
摘要：SVG基础 SVG可缩放矢量图形Scalable Vector Graphics是基于可扩展标记语言XML，用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式，SVG于2003年成为W3C推荐标准。 示例 <
阅读全文
摘要：Table布局 <table>最常用的也是最正确的使用方法是制作表格，由于其对占据的空间有着划分的作用，便可以使用<table>来布局。 实例 实现一个简单的布局，将表格的border、cellpadding、cellspacing全部设置为0，表格的边框和间距就不占有页面空间，它只起到划分空间的作
阅读全文
摘要：Grid布局 目前CSS布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个成员的位置。不同之处在于，Flex布局是轴线布局，只能指定成员针对轴线的位置，可以看作是一维
阅读全文
摘要：Flex布局 Flex布局也称弹性布局，可以为盒状模型提供最大的灵活性，是布局的首选方案，现已得到所有现代浏览器的支持。 基础 通过指定display: flex来标识一个弹性布局盒子，称为FLEX容器，容器内部的盒子就成为FLEX容器的成员，容器默认两根轴线，水平的主轴与垂直的交叉轴，主轴的开始位
阅读全文