CSS
关注
分享
扫一扫
StarXDer!!!
这个作者很懒，什么都没留下…
展开
-
CSS非布局样式和重点内容
CSS基础Cascading Style Sheet 层叠 、样式、表可以简单理解为PS中图层的样式和叠加选择器selecter{ prop:value;}选择器用于匹配HTML元素，有不同的匹配规则，多个选择器可以叠加解析方式和性能浏览器的解析方式是从右往左的body div .class{ color：red;}//浏览器先查询.class,再查询对应元素是...原创 2018-11-15 11:57:59 · 1745 阅读 · 0 评论 -
CSS效果实现
效果属性box-shadowtext-shadowborder-radiusbackgroundclip-pathbox-shadow原创 2018-11-16 16:07:33 · 179 阅读 · 0 评论 -
css工程化（PostCSS、webpack）
css工程化目的：让项目更好的运转组织优化构建维护PostCSSPostCSS本身只有解析能力其他的属性全依赖于插件目前有200多个插件PostCSS常用插件postcss-import(atImport) 模块合并autoprefixier 自动添加前缀cssnano 压缩代码cssnext 使用新的css特性precss 变量、mixin、循环（类似...原创 2018-11-18 21:56:45 · 659 阅读 · 0 评论 -
CSS动画
动画的原理：视觉暂留作用画面逐渐变化动画的作用增强用户体验引起用户注意、对操作进行反馈掩饰（loading图）动画的类型transition 补间动画keyframe 关键帧动画逐帧动画transition 补间动画可以监测的内容平移旋转缩放透明度其他的线性变化transition: property 1s , all 3s ;/*设置监听的...原创 2018-11-16 17:05:13 · 130 阅读 · 0 评论 -
css预处理器（less，sass）
css预处理器基于css的另一种语言通过工具编译成css添加了很多css不具备的特性提升CSS文件的组织预处理器提供的功能嵌套 反应层级和约束变量和计算 减少重复代码Extend和Mixin代码片段循环 适用于复杂有规律的样式import CSS文件模块化嵌套body{ padding:0; margin:0;}.wrapper{ b...原创 2018-11-16 20:51:45 · 317 阅读 · 0 评论 -
CSS布局方式
CSS布局知识框架css知识体系中的重点早期以table为主后来以技巧性布局为主现在有flexbox/grid响应式布局常用布局方法table表格布局float浮动+margininline-block布局flexbox布局表格布局优点外部宽度可以固定，内部元素自适应，文字自动vertical-align：middle盒子模型marginborderp...原创 2018-11-15 23:50:21 · 198 阅读 · 0 评论 -
Bootstrap4基本使用知识
Bootstrap一个CSS框架twitter出品提供通用的基础样式Bootstrap4兼容IE10+ (3兼容到9)使用flexbox布局抛弃Nomalize.css提供布局和reboot版本原创 2018-11-18 12:29:53 · 493 阅读 · 0 评论 -
CSS盒子模型深入理解
内容概览基本概念标准模型和IE模型的区别CSS如何设置这两种模型JS如何设置获取和模型对应的宽和高边距重叠是什么边距重叠解决方案（BFC）关于基本概念和标准模型与IE模型的区别就不再赘述，已经有很多前辈写了相关的知识点。这里只贴两张图CSS如何设置这两种模型box-sizing:content-box;box-sizing:border-box;JS如何获取和模型...原创 2018-11-23 14:52:47 · 262 阅读 · 0 评论