随笔分类 -  css

（转）垂直居中
摘要：一、利用 position 和负边距利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个可视化说明：代码如下:/* 代码实现：* 设定宽度和高度，父节点为 position:relative; CSS是这样写的:*/.selector { ... 阅读全文
posted @ 2015-06-16 14:06 心胸广阔 阅读(106) 评论(0) 推荐(0)
伪类（before和after在这里）
摘要：一、before和after伪类before 在之前插入样式结果演示after 在之后插入样式结果是二、root伪类设置最底层的样式，可用于插入背景图片三、input：enabled{......} 设置所有已启用的input元素input：disabled{......} 设置并且禁止对应... 阅读全文
posted @ 2015-06-09 12:26 心胸广阔 阅读(620) 评论(0) 推荐(0)
css3选择器
摘要：一、通用选择器E~F：任何在E元素之后的同级F元素E+F：在E元素后一个的同级F元素E>F：所有在E元素下一级中的F元素二、属性选择器E[style="xxx"] ，如 input[type=text]{background-color: blue;}；只有在body中E包含style="xxx"... 阅读全文
posted @ 2015-06-09 12:23 心胸广阔 阅读(106) 评论(0) 推荐(0)
css3过度和动画
摘要：一、过度（transition）transition：[transition-property] || [transition-duration] || [transition-timing-function] || [transition-delay]；transition-property 参与... 阅读全文
posted @ 2015-06-09 12:22 心胸广阔 阅读(351) 评论(0) 推荐(0)
css布局
摘要：1、width 宽2、height 高3、文本font-family 设置字体样式如：微软雅黑font-size 设置字体大小font-style：normal（常规字体） | italic（斜体） | oblique（倾斜） 字体的风格font-weight：normal（正常） | bold（加... 阅读全文
posted @ 2015-06-09 12:20 心胸广阔 阅读(128) 评论(0) 推荐(0)
盒模型Box Model（浮动）
摘要：一、标准盒模型的大小：border+padding+content（width） 怪异盒模型大小：padding+border二、displayinline 默认，且变为行由内容撑开block 变为块元素，前后会自带有换行符none 不会显示元素（只是隐藏掉，但还在布局中）inline-bloc... 阅读全文
posted @ 2015-06-09 12:19 心胸广阔 阅读(180) 评论(0) 推荐(0)
响应式
摘要：一、文本分栏栏的数量控制：-webkit-column-count：number；栏间距：-webkit-column-gap：长度单位；栏宽度：-webkit-column-width：长度单位；栏间隔间的线条：-webkit-column-rule：长度单位 线条样式 颜色；跨栏显示：-webk... 阅读全文
posted @ 2015-06-09 12:17 心胸广阔 阅读(186) 评论(0) 推荐(0)
css3渐变、背景、倒影、变形
摘要：一、背景切割background-clip语法：background-clip：border-box | padding-box | content-box；border-box 超出border外的背景割掉padding-box 超出padding外的背景割掉content-box 超出c... 阅读全文
posted @ 2015-06-09 12:10 心胸广阔 阅读(2034) 评论(0) 推荐(0)
css3边框、阴影
摘要：一、图像边框border-image语法：border-image：border-image-source（图片）|| border-image-slice（裁剪位置）|| border-image-repeat（重复性）；例子：border-image：url（xxx.jpg） 33.3%（可以有... 阅读全文
posted @ 2015-06-09 12:05 心胸广阔 阅读(186) 评论(0) 推荐(0)
PS定位
摘要：一、定位：按标准看谁离得近来进行覆盖：什么都没有（最远）、浮动（远）、定位（近）二、positionabsolute 绝对定位，能堆叠在上一层下面，脱离文档流relative 相对定位，按照原来所在的位置进行定位，不脱离文档流static 该值为position的默认值fixed 可定位相对于浏览器... 阅读全文
posted @ 2015-06-09 12:04 心胸广阔 阅读(341) 评论(0) 推荐(0)
三层嵌套
摘要：一、三层嵌套css部分HTML部分演示结果三层嵌套时，最外层平铺，而inner_left和inner_right可以互换位置 阅读全文
posted @ 2015-06-09 12:02 心胸广阔 阅读(329) 评论(0) 推荐(0)
css基础
摘要：一、 css的引入方式1.头部引入特点：优点：1.速度快，无服务器请求压力； 2.相对于外部引入单页代码量少。缺点：1.不易改版与维护； 2.代码较乱不易前后台沟通。2.标签内引入特点：1.优先级最高； 2.冗余代码多，代码量大； 3.不利于维护。3.外部引人然后特点：优点：1.一个css文件可以控... 阅读全文
posted @ 2015-06-09 12:01 心胸广阔 阅读(256) 评论(0) 推荐(0)