随笔分类 -  CSS

移动web之一像素问题
摘要：一、为什么会有一像素问题 弄明白这个问题，首先要知道DPR了。 DPR（device pixel ratio）pixel等于picture element。设备像素比，是默认缩放100%的情况下，即DPR=设备像素个数/理想视口像素个数(device-width)。 1.设备像素：设备的物理像素，任 阅读全文
posted @ 2017-12-24 18:12 Chen_cong 阅读(1168) 评论(0) 推荐(0)
display:table和display:table-cell的妙用
摘要：display的table和table-cell一般情况下用的不多，所以很少有人去关注它，但他们两个联手起来会给你惊喜！ 这里抛出这样一个问题，如下，让块里的多行文字垂直居中？一说到垂直居中就会想到，单行文字垂直居中line-height等于height；块级元素垂直居中，position定位或者f 阅读全文
posted @ 2017-12-21 10:06 Chen_cong 阅读(88305) 评论(2) 推荐(8)
sticky footer布局
摘要：一、什么是sticky footer 在网页设计中，Sticky footers设计是最古老和最常见的效果之一。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。 二、应用场景案例 如下： 当页面内容不够长，比较少时，’X’关闭按钮粘贴在视窗底 阅读全文
posted @ 2017-12-19 19:41 Chen_cong 阅读(435) 评论(0) 推荐(0)
制作图标字体
摘要：一、图标字体的优劣势 优势： 1、轻量性：一个图标字体比一系列的图像要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。 2、灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、H 阅读全文
posted @ 2017-12-07 19:09 Chen_cong 阅读(795) 评论(0) 推荐(0)
CSS中的BFC详解
摘要：引言： 这篇文章是我对BFC的理解及总结，带你揭开BFC的面纱。你将会知道BFC是什么，形成BFC的条件，BFC的相关特性，以及他的实际应用。 一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说 阅读全文
posted @ 2017-11-19 23:35 Chen_cong 阅读(57337) 评论(5) 推荐(12)
width:100%以什么为基准的测试
摘要：起初是遇到这样一个问题：当盒模型设为box-sizing:border-box;(移动端上经常这么干)。子盒子的width：100%，子盒子的width等于父盒子contend的长度还是condend+padding+border的长度？ css和html: 结果： （second的width）=（ 阅读全文
posted @ 2017-11-01 19:40 Chen_cong 阅读(1721) 评论(0) 推荐(0)