随笔分类 - CSS、CSS3
关于CSS相关的所有内容。
摘要：响应式布局原理 媒体查询应用 响应式布局示例 外部样式的引入方式 一、响应式布局原理 1.1响应式布局特点：网页宽度自动调整、尽量少使用绝对宽度、字体的大小使用相对单位（rem、em）、布局尽量使用浮动（流式布局）。 1.2响应式布局核心技术：媒体查询（@media）。 @media是css的@规则
阅读全文
摘要：viewport与移动设备适配的核心问题是什么？ meta标签与移动适配的相关内容 移动web适配 一、viewport与移动设备适配的核心问题是什么？ 在前面一篇博客（移动端web布局：像素与成像的基本原理）中详细的介绍了像素相关的原理，只是对屏幕清晰度做了一些演示，但在移动web中关于像素的问题
阅读全文
摘要：1.vs code： 安装两个插件： sass easy sass 2.webstorm： 安装Ruby:http://www.ruby-lang.org/zh_cn/ 我的是win10 x64系统，地址在这里：https://rubyinstaller.org/downloads/ 其他根据系统相
阅读全文
摘要：配置第三方图标库的相关（博客）教程： https://www.cnblogs.com/linyihai/p/10575668.html https://www.cnblogs.com/ceceliahappycoding/p/10821966.html 制作svg图标字体可以参考下面这些连接的内容：
阅读全文
摘要：SVG简介 SVG画线与矩形 SVG画圆、椭圆、折线 SVG画多边形和文本 SVG透明度与线条样式 SVG的Path标签 SVG线性渐变、放射性渐变 SVG高斯模糊 SVG虚线以及简单的动画 SVG的viewbox（比例尺） 一、SVG简介 SVG全称Scalable Vector Graphics
阅读全文
摘要：PostCss是什么？ PostCSS在webpack中的基本应用 一、PostCss是什么？ 如果有深入学习PostCss需求的话可以参考大漠的资料：https://www.w3cplus.com/blog/tags/516.html 大概来说postcss是一个用来处理css的系统程序，它不是c
阅读全文
摘要：less的安装与基本使用 less的语法及特性 一、本地使用less的方法 Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。是一种动态样式语言，属于css预处理语言的一种。 下载后找到less.js：less.js-2.5.3\dist\less.j
阅读全文
摘要：2D视图模型解析 3D视图模型解析 平移 旋转 伸缩 扭曲 z轴方向平移与perspective的神秘关系 matrix()终极变幻的方法 一、2D视图 2D视图就是默认平面上的每个点都与视线垂直，图形不会随视角变化发生视图变形。 二、3D视图 3D视图就是图形假设了一个视角和透视点，图形根据视角和
阅读全文
摘要：transition-property transition-duration transition-timing-function transition-delay animation-name animation-iteration-count animation-direction anima
阅读全文
摘要：弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-content flex-flow 弹性盒子子项的属性与应用 order align-self flex
阅读全文
摘要：盒模型:标准盒模型、混杂盒模型 什么时候会触发混杂模式？ 为什么要混杂模式渲染规则盒模型？ box-sizing:content-box、border-box 关于盒模型的一些其他样式和属性值 盒模型:标准盒模型、混杂盒模型 一、盒模型：标准渲染规则盒模型、混杂模式渲染规则盒模型 标准渲染模式盒模型
阅读全文
摘要：Text-Decoration text-shadow text-decoration Font font font-face Text 常用Text属性 Multi-column Multi-column Multi-column可以实现瀑布流布局吗？ Multi-column实现小说翻页功能 T
阅读全文
摘要：background-color(CSS2) background-image background-position background-size background-repeat background-attachment background-origin background-clip
阅读全文
摘要：Border-CSS1的属性 Border-CSS1：border Border-CSS1：border-style Border-CSS1：border-width Border-CSS1：border-color Border-CSS1的属性 Border-CSS3的属性 Border-CSS3
阅读全文
摘要：Relationship Selectors：关系型选择器 Attribute Selectors：属性选择器 Pseudo-Element Selectors:伪元素选择器 一、Relationship Selectors:关系型选择器 1. E + F : 选择E的下一个兄弟元素并且满足条件F
阅读全文
摘要：一、元素的块级与行级特性 在CSS属性display控制元素是否及如何显示的特性，常用的值有none、inline、block、inline-block，在CSS3中还有一些新的特性状态，在这里不做讨论。 这里我们主要讨论display在CSS布局中涉及到主要属性值inline、block、inli
阅读全文
摘要：一、CSS的定义方式 1.内部样式：<style></style> 2.行间样式：<div style="width:100px;height:100px;"> 3.外部样式：<link rel="stylesheet" type="text/css" href="地址" > 注：浏览器异步加载ht
阅读全文
