随笔分类 -  css less sass

sass和postcss
摘要：sass是css预处理器 需要安装node sass支持 核心是c++编写 集成 1. sass loader 把scss装换成css 1. css loader 找出@import和url()导入的语法，告诉webpack依赖的资源。同时支持css modules、压缩css等 1. style 阅读全文
posted @ 2018-02-24 21:41 快乐~ 阅读(387) 评论(0) 推荐(0)
移动端布局rem em
摘要：1、概念 em作为font size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小 rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小 优缺点：em就是为字体和行高而生的，有些时候子元素字体就应该相对于父元素，元素行高就应该 阅读全文
posted @ 2018-02-24 21:24 快乐~ 阅读(292) 评论(0) 推荐(0)
css盒模型与bfc与布局与垂直水平居中与css设计模式等
摘要：一、css盒子与布局相关 盒子内部的布局 盒子之间的布局visual formatting 脱离正常流normal flow的盒子的布局 absolute布局上下文下的布局 float布局上下文下的布局 flow下的盒子的布局 BFC布局上下文下的布局 IFC布局上下文下的布局 FFC布局上下文下的 阅读全文
posted @ 2018-02-24 21:19 快乐~ 阅读(480) 评论(0) 推荐(0)
css页面布局之左侧定宽，右侧自适应
摘要：二列布局的特征是侧栏固定宽度，主栏自适应宽度。三列布局的特征是两侧两列固定宽度，中间列自适应宽度。 之所以将二列布局和三列布局写在一起，是因为二列布局可以看做去掉一个侧栏的三列布局，其布局的思想有异曲同工之妙。对于传统的实现方法，主要讨论上图中前三种布局，经典的带有侧栏的二栏布局以及带有左右侧栏的三 阅读全文
posted @ 2017-06-30 15:50 快乐~ 阅读(1267) 评论(0) 推荐(0)
css3 转换transfrom 过渡transition 和两个@
摘要：做了一个demo。用到一些css3的动画，还是不太熟练，总结了一下。 1、 -webkit-font-smoothing: antialiased; -webkit-font-smoothing: none: 无抗锯齿 -webkit-font-smoothing: subpixel-antiali 阅读全文
posted @ 2016-06-03 18:02 快乐~ 阅读(1377) 评论(0) 推荐(0)
css3 resize box-sizing outline-offset
摘要：resize：设置用户可以自己调整大小 box-sizing： box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。 content-box，border和padding不计算入width之内 padding-box，pa 阅读全文
posted @ 2016-06-03 17:54 快乐~ 阅读(318) 评论(0) 推荐(0)
css公共样式，初始化
摘要：/* CSS Document */ body, button, select, textarea, input, label, option, fieldset, legend{font-family: 微软雅黑E\8F6F\96C5\9ED1,Tahoma,Verdana;font-size: 12px;line-height: 18px;color: #444;} body, div, ... 阅读全文
posted @ 2016-02-19 19:27 快乐~ 阅读(7055) 评论(0) 推荐(0)
sass的安装与基础
摘要：安装教程：http://www.haorooms.com/post/sass_css 手册：http://sass.bootcss.com/docs/guide/ http://www.w3cplus.com/sassguide/ 视频教程：http://www.maiziedu.com/cours 阅读全文
posted @ 2016-02-18 21:46 快乐~ 阅读(150) 评论(0) 推荐(0)
字体设置的基本原则：转载别人的。。。。
摘要：移动端项目： font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self; pc端(含Mac)项目： font-family:Tahoma,Arial 阅读全文
posted @ 2016-02-17 13:24 快乐~ 阅读(283) 评论(0) 推荐(0)
几篇不错的基础css博客转载
摘要：CSS 巧用 :before和:after：http://web.jobbole.com/85083/ css清除元素间距：http://ouvens.github.io/frontend-css/2015/08/06/css-get-rid-of-gap.html css居中与自适应布局：http 阅读全文
posted @ 2016-02-17 13:23 快乐~ 阅读(179) 评论(0) 推荐(0)
css 中的position z-index em rem zoom 的基本用法
摘要：1、position定位： CSS 定位和浮动 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素 阅读全文
posted @ 2016-02-17 11:15 快乐~ 阅读(824) 评论(0) 推荐(0)