![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 75
qq小小布丁
内向
展开
-
css居中
1、flex实现div #wrap设定高度重的垂直居中 .wrapper{ display: flex; justify-content:center; /*flex-start | flex-end | center | space-between | space-around;*/ align-items:center; height:300px; }原创 2016-09-26 14:15:52 · 324 阅读 · 0 评论 -
基础sass
一、安装 参考:http://www.jianshu.com/p/5bfc9411f58f sass依赖于ruby,首先安装ruby,对于window电脑安装如下(mac自带有ruby): 1)官网下载相应的ruby安装包 2)安装过程中,除了记得勾选“add Ruby executables to your PATH”之外,其它都是一键点到底 3)安装完成之后可再次使用ruby -v检测原创 2017-09-09 10:45:36 · 444 阅读 · 0 评论 -
sass学习三--控制指令和表达式
1、if.article{ padding:if(1+1 !=2, 20px , 30px);}编译后.article { padding: 30px; }2、@if @else if @else@if返回除false 或 null 之外的任何结果$a:bbb;p{ @if($a == aaa){ color:#fff; }@else原创 2017-09-14 09:57:34 · 894 阅读 · 0 评论 -
css3布局
含固定宽度的弹性布局<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <title>layout</title> <style> html{ height: 100%; } body{ height: 1原创 2017-07-27 20:56:46 · 251 阅读 · 0 评论 -
modal模态框的实现
1、html实现如下:<div class="modal"> <div class="modal-content"> <div class="modal-header"> <span>添加活动</span> <span id="modal-icon-cancel" class="modal-icon-cancel">x</sp原创 2017-07-10 16:13:55 · 1308 阅读 · 0 评论 -
css3中的媒体查询
实现默认header为红色;sliderbar为绿色,固定宽度为200px;footer为蓝色当屏幕小于600px时,显示三列 媒体查询 .header{ background-color: red; float:left; height:20px; width:50%; } .sliderbar{ backgro原创 2016-10-20 18:06:00 · 218 阅读 · 0 评论 -
媒体查询
@media screen and (min-width:1001px){ figure{width: 33.33%;}}@media screen and (min-width:601px) and (max-width:1000px){ figure{width:50%;}}@media screen and (max-width:600px){ figure{width:100%原创 2016-09-30 21:34:04 · 229 阅读 · 0 评论 -
css3学习之:transform
transform用于处理元素变形1、translate:主要用于对象平移,两个参数,第一个参数对应X轴,第二个属性对应Y轴,如果第二个参数未提供,默认值为0如tansform:translate(10px,10px);2、rotate:主要2D旋转,需要先有transform-origin属性,不设置,默认为中心如transform:rotate(90de原创 2016-09-30 21:32:33 · 505 阅读 · 0 评论 -
css中绝对定位absolute和相对定位relative
参考:http://blog.163.com/love_heartbreaking/blog/static/124561901201211334714800/在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolute,static,fixed分的不是很清楚,以致经常会出现让人很郁闷的结果。今天研究了一下,总算有所了解。在此总结一下:先看下原创 2016-09-28 10:14:58 · 339 阅读 · 0 评论 -
css水平和垂直居中
参考:http://www.cnblogs.com/fu277/archive/2012/09/13/2400118.html1.水平居中(1) 文本、图片等行内元素的水平居中 给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。(2) 确定宽度的块级元素的水平居中 通过设置margin-left:auto;和margi原创 2016-09-27 22:20:36 · 288 阅读 · 0 评论 -
css中BFC格式化上下文
参考:http://www.cnblogs.com/leejersey/p/4412785.html什么是BFCBFC(Block Formatting Context-块级格式化上下文),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则。例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和cl原创 2016-10-09 12:00:23 · 222 阅读 · 0 评论 -
css属性
参考:https://www.zhihu.com/question/31317160历史混沌未分天地乱,CSS的诞生就是为了终结当时由推动Web世界繁荣的首功之臣HTML引发的混乱局面。在1990~1993年Web世界还处于一片荒芜的时候,HTML这个勤劳而艰难生存的族群带着描述段落、标题、超链接等结构性内容(后来这些成员荣升HTML国的贵族,经过几次战乱并一直生活到现在)的技能给We原创 2016-09-26 19:55:11 · 381 阅读 · 0 评论 -
sass基础二
三、 基本用法 1、变量 2、字符串中的变量 3、计算:+ - * / 4、嵌套 5、注释/!**/四、代码重用 //导入@import //继承@extend //mixin @include 传参,指定默认值 //颜色函数 //插入文件:@import “xx.scss”五、高级用法 //@if 1==2 {} @else{} //循环:@for ifrom1t原创 2017-09-09 16:46:34 · 293 阅读 · 0 评论