css3属性详解

深入了解 Flexbox 伸缩盒模型

介绍

Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计。本文将介绍 Flexbox 语法的技术细节。浏览器的支持越来越快,所以当 Flexbox 被广泛支持并应用时你将会快人一步。如果你想知道它是什么并是如何工作的,不妨仔细了解下吧!

为什么需要伸缩布局盒(Flexbox)?

作者长期以来使用表格、浮动、行内块元素和其他 CSS 属性来布局网站内容。然而,这些并不是为复杂的页面和网页应用而设计的。不管是简单的垂直居中,还是灵活的网格布局都很难靠一己之力轻易实现,因此成就了 CSS 网格框架。但是,如果真的需要那么多项目来实现做这些事,为什么不让它来的更简单些呢?Flexbox 的目的就是改变这一切。

CSS3的calc()使用

calc()对大家来说,或许很陌生,不太会相信calc()是css中的部分。因为看其外表像个函数,既然是函数为何又出现在CSS中呢?这一点也让我百思不得其解,今天有一同事告诉我,说CSS3中有一个属性能实现自适应的布局,首先让我想到的是box-sizing,但跟我说还可以计算,这让我不得不想起calc()。因为早先在官网和一些blog上看到相关的介绍,但一直没有深入,也没有自己去测试过。今天花了一下午的时间彻底学习了一下calc()。于是就有了这篇blog,希望对大家有所帮助。

使用CSS3的appearance属性改变元素的外观

前段时间在《修复iPhone上submit按钮bug》中介绍了使用“-webkit-appearance: none; ”来改变按钮在iPhone下的默认风格,其实我们可以反过来思路,使用“appearance”属性,来改变任何元素的浏览器默认风格,简单的说,你可以使用“appearance”属性将“段落p”渲染成button的风格,也可以渲染成“输入框”、“选择框”等效果。那么今天在这篇文章中我们一起来体会一下“appearance”的使用。

CSS3 Media Queries

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码:

  <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

或者这样的形式:

CSS ::Selection

前天在一个前端群中碰到一个网友问了一个有关于唐人CSS帝国中关于选择文本,背景是红色,而文本是白色的问题,如下图所示:

或许大家对这样的实现并不陌生,可是有很多童鞋可能跟我一样,并不知道是如何实现,因为在默认情况下,选择网站文本都是深蓝的背景,白色的字体,就如下本站的而言,选择文本后,背景是深蓝色,而选中的文本就是白色,如下图所示:

CSS3 Multiple Backgrounds

前面几节和大家一起学习了CSS3中给Background新追加的属性:《CSS3 Background-size》、《CSS3 Background-clip》和《CSS3 Background-origin》。

CSS Background-origin

Background-origin是CSS3为Background扩展的第三个属性,从Background-origin字面上不难发现是指背景图片的原点,其实background-origin主要就是用来决定背景图片的定位原点,换句话说就是背景图片定位的起点(

CSS3 Background-clip

上一节在《CSS3 background-size》详细的介绍了CSS3background新增属性之一,今天和大家一起来学习CSS3中有关于Background的第二新属性Ba

CSS3 Background-size

Background大家一定不会陌生,但是CSS3开始,给这个Background属性增加了几个新的属性值 :Background-size,Background-clip

页面

返回顶部