exialym的博客

编写灵活的CSS灵活性我们先来看一段代码：.noReusableButton{ padding: 6px 16px; border: 1px solid #446d88; background: #58a linear-gradient(#77a0bb, #58a); border-radius: 4px; box-shadow: 0 1px 5px gray;

连字符的使用在排版良好的书和杂志中，文字都是两端对齐的。但是在CSS中我们很少这么用，因为书里有连字符来解决长单词会带来的一行中空白过多的情形，而CSS没有。 在CSS Text Level 3中，有这么一个新的值，叫hyphens，可选none，manual和auto。#hyphens{ width:200px; text-align: justify; -webkit-hyphen

浮动CSS允许浮动任何元素。浮动元素首先，会以某种方式将浮动元素从文档的正常流中删除，不过它还是会影响布局。一个元素浮动时，其他内容会“环绕”该元素。 浮动元素的外边距不会与其他元素的外边距合并。浮动的详细内幕包含块，浮动元素的包含块是其最近的块级祖先元素。 浮动元素会生成一个块级框，不论元素本身是什么。它会像块级元素一样摆放和表现。对浮动元素声明 display:

表格式化我们先来看看组装表的基本方法，并了解表中的元素相互之间有什么关系。这称为表格式化。表的视觉编排CSS对于表元素和内部表元素有很分明的界限。在CSS中，内部表元素生成矩形框，这些框有内容，内边距和边框，但是没有外边距。因此，不能通过指定外边距来定义单元格之间的间隔。如果试图对单元格、行或任何其他内部表元素应用外边距，CSS兼容浏览器只会将其忽略（只有总标题例外）。 使用display的不同值

选择适当的鼠标指针

根据内容指定宽度假如我们有如下结构：figure> img src="img/adamcatlace.jpg" /> figcaption> The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer. figcaption>fi

弹性动画

使用前缀background: rgb(255, 128, 0); background: -moz-linear-gradient(0deg, yellow, red); background: -o-linear-gradient(0deg, yellow, red); background: -webkit-linear-gradient(0deg, yellow, red); backgr

各种特殊的阴影阴影有5个值： box-shadow: 0 5px 4px -4px black; 浏览器创建阴影的大概过程是这样的： 先创建一个和原有元素大小相同的块，颜色由最后一个值指定。 接下来由前两个值指定左偏移和上偏移。 第三个值来给定模糊的大小，你给了4，就意味着在现在块的边界向外向里分别模糊4。 第四个值用来在现有的块的基础上调整块的大小，给-4相当于在4个方向上都缩小

背景图片指定背景图像的同时可以再指定一个背景色。这往往是个好主意。在图片没加载出来或图片有透明度时。 允许向任何元素应用背景图像，可以是块级元素也可以是行内元素。

透明边框如果我们想要一个白色背景和半透明白的边框我们该怎么办呢~ 如果你对边框和背景的关系不太了解：border: 10px solid hsla(0,0%,100%,.5); background: white;这样你是看不到透明边框的，因为背景本身是会铺到边框里的。 使用background-clip: padding-box;可以使背景只铺到内边距。border:

继承(Inheritance)是从一个元素向其后代元素传递属性值所采用的机制。确定应当向一个元素应用哪些值时，户代理不仅要考虑继承，还要考虑声明的特殊性，另外需要考虑声明本身的来源。这个过程就称为层叠(cascade)。本章将讨论这3种机制之间的关联：特殊性、继承和层叠。特殊性实际上，可能同一个元素可以使用两个或多个规则来选择，每个规则都有其自己的选择器。 显然，每一对规则中只有一个胜出，因为所匹

数字CSS中有两类数字，整数和实数。百分数百分数值几乎总是相对于另一个值，这个值可以是任意的：可能是同一元素另一个属性的值，也可以是从父元素继承的一个值，或者是祖先元素的一个值。接受百分数值的属性会对所允许的百分数值定义某些限制，还会 定义百分数计算到什么程度。颜色命名颜色h1 {color: maroon;}RGBh1 {color: rg

字体系列这是最乱的地方，几乎所有的字体都有多种名字。同种字体的不同风格（斜体，加粗等等）也有不同的名字，为了解决这个问题，CSS使用font-family表示一个系列的字体，包括这种字体的各个风格。

缩进和水平对齐缩进text-indent：length | percentage | inherit 将Web页面上一个段落的第一行缩进，用于块级元素。水平对齐text-align：left | center | right | justify | inherit 用于块级元素 justify是两端对齐文本，它将使文本行的两端都放在父元素的边界上，调整字符间距，使每行

基本框CSS假定每个元素都会生成一个或多个矩形框，这称为元素框。各元 素框中心有一个内容区(content area)。这个内容区周围有可选的内边距、边框和外边距。这些项之所以被认为是可选的，是因为它们的宽 度可以设置为0，实际上这就从元素框去除了这些项。 可以用多种属性设置各外边距、边框和内边距，如margin-left或border-bottom。内容的背景(例如某种颜色或平铺图像)

灵活的椭圆这里要注意，border-radius是个简写，它可以拆成4个部分，8个值。border-top-left-radiusborder-top-right-radiusborder-bottom-right-radiusborder-bottom-left-radius可以简写到一个里面，规则和padding什么的一样。border-radius: 50% / 50p

基本元素框所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小，因此，每个框影响着其他元素框的位置和大小。默认地，一个可以显示的文档由多个矩形框组成，这些矩形框分布开，从而不会相互重叠（一般情况下）。另外，根据某些限制，这些框要尽可能地少占空间，同时还要保证相互之间有足够的空间，以便清楚地看出哪些内容属于哪个元素。 外边距使用百分数

传统的网页布局基于盒装模型，使用display，position，float属性来达成各种布局。 对于一些特殊的布局使用这些来实现不是很方便，比如垂直居中。 Flex应运而生，它可以简便、完整、响应式地实现各种页面布局。 Chrome 21，FF22，IE 10，Safari 6.1及以上的浏览器都支持Flex。 Flex布局将成为未来布局的首选方案。基本概念任何一个容器都可以指定为Flex