随笔分类 -  css

input获得焦点时改变placeholder文本的样式
摘要：HTML: CSS: 阅读全文
posted @ 2017-05-07 21:36 loveyunk+ 阅读(3769) 评论(0) 推荐(0)
行内替换元素的行内框高度
摘要：img元素 font-size和line-height对图片的行内框没有任何影响。换句话说，就是这两个值不论怎么变也不会影响图片的垂直位置 但它还是有一个相对的line-height值，vertical-align的百分比值相对于元素的line-height来计算。 img下外边距边界与基线对齐，就 阅读全文
posted @ 2017-03-28 23:10 loveyunk+ 阅读(480) 评论(0) 推荐(0)
块级元素与行内元素
摘要：块级元素与行内元素对比 1. 块级元素各自占据一行，垂直方向排列 ，旁边不能有其他元素，相当于它在元素框之前和之后生成了“分隔符” 行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行 2. 块级元素可以设置宽与高,宽度不设置情况下默认为100% 行内设置宽高不起作用（可以 阅读全文
posted @ 2017-03-27 13:27 loveyunk+ 阅读(501) 评论(0) 推荐(0)
css水平垂直居中
摘要：margin法（水平居中） 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 定位法（水平垂直居中） 首先绝对定位，设置top:50%; left:50%; 然后再利用负margin把它向 阅读全文
posted @ 2017-02-08 11:55 loveyunk+ 阅读(331) 评论(0) 推荐(0)
边框内圆角实现方法
摘要：边框内圆角效果 方法一：div嵌套法 方法二：ouline与box-shadow 方法三：伪元素法 阅读全文
posted @ 2017-02-07 14:53 loveyunk+ 阅读(459) 评论(0) 推荐(0)
三栏宽度自适应布局
摘要：左中右三栏布局，左右两栏宽度固定（要想不固定将宽度值改为百分值即可），中间栏宽度自适应。 方法一（圣杯布局） 圣杯布局的原理就是当子元素处于浮动状态时，设置负margin，子元素会叠盖到兄弟元素之上。 代码分析 步骤1: 创建框架 为容器container添加左内边距为左栏的宽度，右内边距为右栏的宽 阅读全文
posted @ 2017-01-30 23:19 loveyunk+ 阅读(485) 评论(0) 推荐(1)
前端面试题整理（html篇）
摘要：1、Doctype作用？标准模式与兼容模式各有什么区别? 2、页面导入样式时，使用link和@import有什么区别？ 3、HTML5 为什么只需要写 <!DOCTYPE HTML>？ HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它 阅读全文
posted @ 2017-01-16 14:10 loveyunk+ 阅读(251) 评论(0) 推荐(0)
css改变滚动条样式
摘要：/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 10px; height: 12px; background-color: #F5F5F5; } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0... 阅读全文
posted @ 2016-12-27 08:23 loveyunk+ 阅读(229) 评论(0) 推荐(0)
阿里巴巴iconfont使用方式
摘要：IconFont的作用就是用字体的格式来取代图片、特殊字体的展示，用得比较多的就是一些纯色的图标，具体主要由当前css3属性里的自定义字体(@font-face)来实现。 1.首先在Iconfont-阿里巴巴矢量图标库上面将你需要的图标点击购物车按钮加入“暂存架”； 2.选择完所有要用的图标后“添加 阅读全文
posted @ 2016-12-26 15:38 loveyunk+ 阅读(11538) 评论(0) 推荐(2)