display 属性用于定义建立布局时元素生成的显示框类型。 语法： display: value; 属性值（display 默认的属性值是 inline） none： 此元素不会被显示。 block： 此元素将显示为块级元素，此元素前后会带有换行符。 inline： 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block： 行内块元素。（CSS2.1 新增的值） list-item： 此元素会作为列表显示。 run-in： 此元素会根据上下文作为块级元素或内联元素显示。 com

DIV可以通过 box-shadow 属性可以设置阴影效果。 box-shadow语法： box-shadow: h-shadow v-shadow blur spread color inset 语法说明： h-shadow： 必需的。⽔平阴影的位置。允许负值 v-shadow： 必需的。垂直阴影的位置。允许负值 blur： 可选。模糊距离 spread： 可选。阴影的⼤⼩ color： 可选。阴影的颜⾊。 inset： 可选。从外层的阴影（开始时）改变阴影内侧阴影 设置示例（给一个置顶高度宽度的黄色

使用table布局可以完美解决垂直对齐。 table布局并不是使用 table 元素，而是使用 display: table 属性 css样式设置如下： <style> /**父级元素**/ .container { display: table; } /**子元素**/ .sub { display: table-cell; vertical-align: middle; } </style> html代码如下： <div class="container"> <a class="sub">崩坏</a

CSS里的颜色渐变分为线性渐变和径向渐变。 ▶ 线性渐变是通过 background: linear-gradient 来实现的 语法： background-image: linear-gradient(direction, color-stop1, color-stop2, ...); 例（从左至右渐变，颜色由 #000000 渐变至 #ffffff） background: linear-gradient(to right, #000000, #ffffff); 通过 to right 来实现方向

超链接下划线是通过 text-decoration 属性来设置的。 以下代码将超链接设置为默认没有下划线，当鼠标放上去后出现下划线。 <style type="text/css"> a{ text-decoration:underline; } a:hover{ text-decoration:none; } </style>

(1)overflow: hidden overflow 属性规定当内容溢出元素框时发生的事情。这个属性定义溢出元素内容区的内容会如何处理。hidden 表示内容会被修剪，并且剪掉的内容是不可见的。 (2)white-space: nowrap 规定文本不进行换行。white-space 属性设置如何处理元素内的空白。nowrap 表示文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 (3)text-overflow: ellipsis text-overflow 属性规定当文本溢出

选择器 示例 示例说明 CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * * 选择所有元素 2 element p 选择所有<p>元素 1 element,element div,p 选择所有<div>元素和<p>元素 1 element element div p 选择<div>元素内的所有<p>元素 1 element>element div>p 选择所有父级是 <div> 元素的 <p

normal: 默认值。浏览器显示一个标准的字体样式。 italic: 浏览器会显示一个斜体的字体样式。 oblique: 浏览器会显示一个倾斜的字体样式。 inherit: 规定应该从父元素继承字体样式。 实例 三个段落设置不同的字体样式： p.normal {font-style:normal} p.italic {font-style:italic} p.oblique {font-style:oblique}