随笔分类 -  CSS3

css中单位px和em,rem的区别
摘要：国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？PX特点1. IE无法调整那些使用px作为单位的字体大小；2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；3. Firefox能够调整px和em，rem，但是96%以... 阅读全文
posted @ 2015-12-23 17:00 dengzk 阅读(163) 评论(0) 推荐(0)
CSS布局（弹性盒模型）
摘要：一、弹性盒模型介绍1、弹性盒模型介绍—基础知识 弹性盒模型（FlexibleBox或Flexbox）是一个CSS3新增布局模块，官方称为CSSFlexibleBoxLayoutModule，用于实现容器里项目的对齐、方向、排序（即使在项目大小位置、动态生成的情况）。弹性盒模型最大的特性在于，能够动... 阅读全文
posted @ 2015-12-02 13:41 dengzk 阅读(591) 评论(0) 推荐(0)
base.css
摘要：@charset “utf-8″;/*@名称: base@功能: 重设浏览器默认样式*//* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */html{color:#000;background:#fff;-webkit-text-size-adjust: 100%;-ms-tex... 阅读全文
posted @ 2015-11-13 14:26 dengzk 阅读(183) 评论(0) 推荐(0)
CSS中的“形状”
摘要：CSS所能展现出的”形状“下面的所有案例的实现都只用到了一个html元素（例如div）。虽然CSS在每一种浏览器中都有兼容性差异，但是这些例子至少支持一种以上浏览器（例如chorme）。正方形 矩形圆形 椭圆形尖角朝上的三角形尖角朝下的三角形尖角朝左的三角形尖角朝右的三角形尖角在左上的三角形尖... 阅读全文
posted @ 2015-11-11 17:23 dengzk 阅读(205) 评论(0) 推荐(0)
css 牛人blog
摘要：http://www.cssmagic.cn/https://github.com/cssmagic/blog/issues 阅读全文
posted @ 2015-11-01 14:46 dengzk 阅读(119) 评论(0) 推荐(0)
position
摘要：1. 引言 本文将用一篇文章介绍position（定位），在学习position之前，我们应该去思考一个问题：什么情况下我们需要定位？如果没有定位将无法满足我们怎样的需求？我们要知道，被人类创造出来的每一个知识，都有它的用途，都要解决一些之前遇到的问题。 如果没有定位，我们做出来的网页将会是按部... 阅读全文
posted @ 2015-11-01 12:08 dengzk 阅读(366) 评论(0) 推荐(0)
display
摘要：1. 引言 网页的所有元素，除了“块”就是“流”，而且“流”都是包含在“块”里面的（最外层的body就是一个“块”）。在本系列一开始讲《浏览器默认样式》的时候，大家也都看到了浏览器默认样式中规定了html元素哪些属于“块”（剩下的就是“流”）。这部分知识非常重要也非常基础，因此在所有的前端面试题中... 阅读全文
posted @ 2015-11-01 12:07 dengzk 阅读(636) 评论(0) 推荐(0)
float—下篇
摘要：float内容比较多，咱们分上、下两篇来介绍，上篇已经写完，这是下篇。建议大家先把上篇看了，再来看下文，精彩内容不要掠过啊。1. 清除float 《上篇》中我们提到，float具有“破坏性”，它会导致父元素“坍塌”，这将不是所要看到的。如何去避免float带来的这种影响呢（也就是我们常说的“清除浮... 阅读全文
posted @ 2015-11-01 12:03 dengzk 阅读(165) 评论(0) 推荐(0)
float—上篇
摘要：1. 引言 对于我们所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人——你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。 这就是我们又爱又恨的——float。所以，系统的学一学float是非常非常重要的。除了看书和看博... 阅读全文
posted @ 2015-11-01 12:02 dengzk 阅读(162) 评论(0) 推荐(0)
盒子模型
摘要：1. 引言 从这一节开始，我们就进入本系列的第三部分——css呈现。本部分将描述css在页面的几种布局和呈现的特性。包括两类：文字、块。 第一类——文字。这部分相对比较简单一些，例如设置字号、字体、颜色、背景色、是否加粗等。重点的地方在于设置字体、设置行高、文字相关的距离都用相对值，这些东西在《... 阅读全文
posted @ 2015-11-01 11:57 dengzk 阅读(176) 评论(0) 推荐(0)
-webkit-line-clamp 实现限制文字显示多少行，多余的用...
摘要：-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：display: -webkit-box;必... 阅读全文
posted @ 2015-10-30 13:34 dengzk 阅读(2479) 评论(1) 推荐(0)