总结一些自己用的不太多，不清楚的CSS样式：
1、关于换行：
强制不换行 ：
p { white-space:nowrap; }
自动换行 ：
p { word-wrap:break-word; }
说明：自动换行就是，当内容超过设置的宽度的时候就换自动换行。
2、行内元素和快级元素的转换：
块级元素转换成行内元素：
p{display:inline;}
行内元素转换成快级元素：
span{display:block;}
3、垂直对齐：
vertical-align属性设置一个元素的垂直对齐。
值 描述 baseline 默认，元素放置在父元素的基线上。 sub 垂直对齐文本的下标 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的顶端与行中最低的元素的顶端对齐。 text-bottom 把元素的底端与父元素字体的底端对齐。 inherit 规定应该从父元素继承 vertical-align 属性的值。
4、内容溢出会发生什么？
overflow属性指定如果内容溢出一个元素的框，会发生什么。
值 描述 visible 默认值，内容不会被剪切会呈现在设定的范围之外。 hidden 内容会被剪切，多余的内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit 规定应该从父元素继承 overflow 属性的值。
5、控制文本的大小写：
p {text-transform:none;} 默认形式，带有大小写字母的标准文本。
h1 {text-transform:uppercase;} 单词全部大写。
h2 {text-transform:capitalize;} 单词的开头字母大写。
p {text-transform:lowercase;} 单词全部小写。
p {text-transform:inherit;} 继承父元素的text-transform属性。
6、使元素看上去像一个按钮(或者是小图片、视口、用户选项、输入字段。)。
div
{
appearance:button;
-moz-appearance:button; /* 在Firefox上兼容。 */
-webkit-appearance:button; /* 在Safari and Chrome上兼容。 */
}
所有主流浏览器都不支持 appearance 属性。
7、鼠标指针放在一个元素边界范围内时所用的光标形状：
这个属性我一直都没有用过，但是还是要积累一下，以后遇到问题可能又多了一种解决方法。这里举几个常用的，添加一个网址，里面有比较详细的介绍。http://www.runoob.com/cssref/pr-class-cursor.html
<span style="cursor:auto">auto</span><br>
这个是默认值，也就是浏览器设置的光标。
<span style="cursor:default">default</span><br>
默认光标，通常是一个箭头。
<span style="cursor:wait">wait</span><br>
此光标表示程序正在忙或者是正在运行。
8、元素文本装饰：
我一直不怎么明白为什么标签的下划线，用text-decoration：none；来去掉。只是硬背来的，这样感觉很不好，学起来很吃力。今天看了这个终于明白了。
text-decoration 属性规定添加到文本的修饰。
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
a{text-decoration:none;}
我们来看下运行效果。
还有两个：
none 表示的是默认文本，定义的标准文本。
inherit 从父元素继承text-decoration属性。
9、设置元素内部进行分页的行为：
table {page-break-inside:avoid}设置在表格内部时钟进行分页的分页行为。
值 描述 auto 默认，如果必要则在元素内部插入分页符。 avoid 避免在元素内部插入分页符。 inherit 继承父元素实行的属性值。
10、设置元素的最大宽度：
设置段落的最大宽度：
p{max-width:200px;
值 描述 none 默认值是宽度没有最大的限制。 length 定义元素的最大宽度值。 % 定义基于包含它的快级对象的百分比最大宽度。 inherit 继承父元素实行的属性值。
11、合并边框模型：
刚开始我要没有弄懂，直接看效果。
<style>
table, td, th {
border: 1px solid black;
}
</style>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>12</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
</tr>
</table>
看运行效果：
当我加入一条CSS样式后：
table {
border-collapse: collapse;
}
介绍一下其他的：
值 描述 collapse 边框会合并成一个单一的边框，但是会忽略border-spacing和empty-cells属性。 separate 默认值，边框会被分开，不会忽略border-spacing和empty-cells属性。 inherit 继承父元素实行的属性值。 注意：所有浏览器都支持border-collapse属性。
12、指定两个带有边框的
并列排放：
box-sizing 属性语序我们定义元素以适应指定区域。
例如：假如我们需要并排放置两个带边框的框，可以通过将box-sizing设置为border-box。呈现出带有指定宽度和高度的框，并且把边框和内边距放入框中。
值 描述 content-box 指定元素的宽度和高度适用于box的宽度和高度。 border-box 指定宽度和高度确定元素边框box。 inherit 继承父元素实行的属性值。
13、设置元素周围的轮廓：
outline属性可以设置元素周围的轮廓，位于边框的外围，起到突出元素的作用。
可以设置的属性：
值 描述 outline-color 设置边框的颜色。 outline-style 设置边框的样式。 outline-width 设置边框的宽度。 inherit 继承父元素实行的属性值。
<style>
p
{
border:1px solid red;
outline:green dotted 5px;
}
</style>
</head>
<body>
<p>这是outline属性呈现出来的效果</p>
</body>
14、通过过渡，就可以实现简单的动画交互效果。
transition是一个复合属性，包括四个子属性，结合起来完成一个完整的过度效果。
值 描述 transition-property 过渡属性（默认值为all）。 transition-duration 过渡持续时间（默认值为0s）。 transiton-timing-function 过渡函数（默认值为ease函数）。 transition-delay 过渡延迟时间（默认值为0s）。
#test{
height: 100px;
width: 100px;
background-color: pink;
transition-duration: 3s;
}
.test:hover{
width: 500px;
}
<div id="test"></div>
说明：
当鼠标放在宽高为100px的div上时，会在3s的时间把div的宽度变成500px15、剪切一张图片：
clip属性，让一个绝对定位的元素，该元素的尺寸是可见的，可以被修剪成一些形状显示
注意：如果有“overflow：visible”,那么clip这个属性就不起作用。
css 语法： clip: rect(0, 0, 0, 0);
JavaScript语法：object.style.clip=”rect(0px,50px,50px,0px)”
分别表示rect（top,right,bottom,left）
clip:aotu; 默认值不做任何剪切。
16、段落最后一行的对齐方式：
我之前还不知道有单独为最后一行设置了对齐方式的。
text-align-last属性
值 描述 auto 默认值。最后一行被调整，并向左对齐。 left 最后一行向左对齐。 right 最后一行向右对齐。 center 最后一行居中对齐。 justify 最后一行被调整为两端对齐。 start 最后一行向右对齐。 start 最后一行在行开头对齐（如果 text-direction 是从左到右，则向左对齐；如果 text-direction 是从右到左，则向右对齐）。 end 最后一行在行末尾对齐（如果 text-direction 是从左到右，则向右对齐；如果 text-direction 是从右到左，则向左对齐）。 initial 设置该属性为它的默认值，最初的时候。 inherit 从父元素继承该属性。 这里举一个例子：
只需添加：text-align-last：right；
让段落的最后一排右对齐：
如下图：
可以看到最后一排跟右边对齐，根据需求修改属性值就可以啦。
17、设置列表中列表项目标记的位置：
list-style-position属性指示如何相对于对象的内容绘制列表项标记：
值 描述 inside 放置在文本以内，且环绕文本根据标记对齐。 outside 默认值，保持标记位于文本的左侧，放置在文本以外，且环绕文本不根据标记对齐。 inherit 继承父元素的list-style-position属性。 如下图片：
这里添加一个属性就不单独写了，也是关于list-style~：
list-style-image属性使用自定义图片来替换列表前面的标记。
图片展示：
18、关于浮动：
clear属性指定段落的左侧或者右侧不允许浮动元素。
这个属性之前有用过，但是第一次看到这个属性的时候竟然不知道是干嘛的。
值 描述 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 继承父元素的clear属性。
19、关于换行：
word-break属性添加不同的值可以让段落的换行方式改变
值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 现在来看一个例子：
<style>
p.test1
{
width:12em;
border:1px solid #000000;
word-break:keep-all;
}
p.test2
{
width:12em;
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1">这个换行属性值是：keep-all。看看这个换行。看看这个换行。看看这个换行。我们一起来看看这个换行。我们一起来看看这个换行。我们一起来看看这个换行。 来看看这个换行。 来看看这个换行。 来看看这个换行。 来看看这个换行。</p>
<p class="test2">这个换行属性值是：break-all。看看这个换行。看看这个换行。看看这个换行。我们一起来看看这个换行。我们一起来看看这个换行。我们一起来看看这个换行。 来看看这个换行。 来看看这个换行。 来看看这个换行。 来看看这个换行。</p>
<p><b>注意:</b> word-break 属性不兼容 Opera.</p>
</body>运行效果显示如下图片：
20、长单词的换行：
word-wrap属性可以让长单词进行换行。
test{word-wrap：break-word；}
值 描述 normal 使用浏览器默认的换行规则。 break-word 在长单词或者是URL地址内部进行换行。
21、指定外边框的轮廓，也就是也就是外边框距离边框的距离。
outline-offset属性设置轮廓框架在border边缘外的偏移
值 描述 length 轮廓与边框边缘的距离。 inherit 继承父元素的outline-offset属性的值。 如下代码：
<style>
div
{
margin:50px;
width:150px;
padding:10px;
height:70px;
border:2px solid blue;
outline:4px solid red;
outline-offset:20px;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 不兼容 outline-offset属性.</p>
<div>这个 div有一个轮廓边界20 px边境外的边缘。</div>
</body>图片如下：
22、鼠标事件
第一次见这个属性，竟然在菜鸟上面没有搜到相关的信息。
差点打算不写了，但是还是觉得有写的必要。
pointer-events：none；属性顾名思义就是和鼠标事件说拜拜，没有鼠标事件了，变成了常规的页面。
在许多网站上过节的时候页面最上层会用canvas绘制的雨、雪花，避免这些悬浮物遮挡住页面从而影响鼠标点击，可以使用pointer-events：none属性，让这些上方的canvas不会遮挡鼠标事件，让鼠标事件可以穿透上方的canvas来点击页面。
23、滤镜属性：
filter属性定义了元素的可视效果，就是定义了滤镜。（eg：透明度、灰度等~）
语法：filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
值 描述 none 默认值，没有效果。 grayscale(%) 将图像转换为灰度图像。 opacity(%) 转化图像的透明程度。 url() URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。 太多就不举列子了，大家可以百度或者是查看文档。
1657
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
