随笔分类 - css
摘要：一、是什么 响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整 描述响应式界面最著名的一句话就是“Content is like water” 大白话便是“如果将屏幕看
阅读全文
摘要：一、是什么 CSS动画（CSS Animations）是为层叠样式表建议的允许可扩展标记语言（XML）元素使用CSS的动画的模块 即指元素从一种样式逐渐过渡为另一种样式的过程 常见的动画效果有很多，如平移、旋转、缩放等等，复杂动画则是多个简单动画的组合 css实现动画的方式，有如下几种： trans
阅读全文
摘要：要实现在页面上点击指定元素时，弹出一个信息提示框。在前面的文章中，我们已经简单介绍了如何使用纯 CSS 创建一个三角形。本文在此基础上，记录如何使用 CSS 创建带三角形的提示框。 实现的原理是创建一个div提示框，然后再创建一个三角形，将三角形用绝对定位（absolute）到提示框对应的位置。 一
阅读全文
摘要：一、是什么 css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更为美观 css3是css的最新标准，是向后兼容的，CSS1/2的特性在CSS3 里都是可以使用的 CSS3 也增加了很多新特性，为开发者带来了更佳的开发体验 从几个
阅读全文
摘要：一、是什么 Flexible Box 简称 flex，意为”弹性布局”，可以简便、完整、响应式地实现各种页面布局 采用Flex布局的元素，称为flex容器container 它的所有子元素自动成为容器成员，称为flex项目item 容器中默认存在两条轴，主轴和交叉轴，呈90度关系。项目默认沿主轴排列
阅读全文
摘要：一、背景 在日常布局中，无论是两栏布局还是三栏布局，使用的频率都非常高 PS: 文末有彩蛋 两栏布局 两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满， 比如 Ant Design 文档，蓝色区域为主要内容布局容器，侧边栏为次要内容布局容器 ❝ 这
阅读全文
摘要：一、是什么 我们在页面布局的时候，经常出现以下情况： 这个元素高度怎么没了？ 这两栏布局怎么没法自适应？ 这两个元素的间距怎么有点奇怪的样子？ ...... 归根究底是元素之间相互的影响，导致了意料之外的情况，这里就涉及到BFC概念 BFC（Block Formatting Context），即块级
阅读全文
摘要：一、前言 在平常的样式排版中，我们经常遇到将某个模块隐藏的场景 通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的 但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法 二、实现方式 通过css实现隐藏元素方法有如下： display:none visibi
阅读全文
摘要：一、背景 在css中我们通常使用px作为单位，在PC浏览器中css的1个像素都是对应着电脑屏幕的1个物理像素 这会造成一种错觉，我们会认为css中的像素就是设备的物理像素 但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的
阅读全文
摘要：一、介绍 传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，且拥有比较良好的兼容性 从CSS3开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了rem、vh、vw、vm等一些新的计量单位 利用这些新的单位开发出比较良好的响应式页面，适应多种不同分辨率的终端
阅读全文
摘要：一、是什么 当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box） 一个盒子由四个部分组成：content、padding、border、margin content，即
阅读全文
摘要：效果一： 代码：<div class="cornerCut">corner cutcorner cutcorner cutcorner cut</div> CSS： .cornerCut{ width:200px; margin: 10px 20px; height: 200px; backgrou
阅读全文
摘要：用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见，比如，侧边栏的部分区域。position:sticky为此而生。 position:sticky用法 p
阅读全文
摘要：<html> <title>动态的边框</title> <style> .border, .border::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .border { width: 200px; heig
阅读全文
摘要：众所周知，图片等一些盒子都可以利用opacity属性来设置不透明度，但是前两天我朋友忽然给我一个截图，截图效果如下 图中红框圈住的位置图片或者说摄像头采集的画面出现了渐变到透明，可以清楚的看到可以看到后面小哥的胳膊，然后问我如何实现这种效果，这下把我难住了（呵 天天给我出难题），我开始在个大论坛开始
阅读全文
