共计 3398 个字符，预计需要花费 9 分钟才能阅读完成。
CSS通常称为CSS样式表或层叠样式表(级联样式表)，主要用于设置HTML页面中的文本内容，为用户展现较具观赏的外表的。以下是小编来在优化网站时遇到的CSS一些小知识点。
边距清空
body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldse,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body{font-size:12px;}
img{border:none;}
li{list-style:none;}
input,select,textarea{outline:none;}
a{text-decoration:none;}清除浮动
.clearfix:after{conter:"";display:block;clear:both;}
.clearfix{zoom:1;}浏览器当做编辑器
浏览器地址栏输入代码，可直接将浏览当做编辑器
data:text/html,<html contenteditable>鼠标隐藏
*{cursor:none!important;}文字模糊效果
p{color:transparent;text-shadow:#111 0 0 5px;}居中样式
垂直居中样式(translate css3需IE9)
.center-vertical{position:relative;top:50%;transform:translateY(-50%);}水平居中样式(translate css3需IE9)
.center-horizontal{position:relative;left:50%;transform:translateX(-50%);}多重边框
div{box-shadow:0 0 0 6px rgba(0,0,0,0.2),0 0 0 12px rgba(0,0,0,0.2),0 0 0 18px rgba(0,0,0,0.2),0 0 0 24px rgba(0,0,0,0.2);height:200px;margin:50px auto; width:400px;}实时编辑css（IE6无效）
<!DOCTYPE html>
<html>
<body>
<style style="display:block" contentEditable>
body{color:blue}
</style>
</body>
</html>文本框灰置
有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使
<input type="text" name="input1" value="鹿泽">鹿泽的内容，”鹿泽”两个字不可以修改。实现的方式归纳一下，有如下几种。
方法1: onfocus=this.blur() 当鼠标放上就离开焦点
<input type="text" name="input1" value="鹿泽" onfocus=this.blur()>方法2:readonly
<input type="text" name="input1" value="鹿泽" readonly>
<input type="text" name="input1" value="鹿泽" readonly="true">方法3: disabled
<input type="text" name="input1" value="鹿泽" disabled="true">css3 移动web样式媒体查询的变化
外联 ：当屏幕等于小于480px调用new_file.css内联：当屏幕大于480px调用使用本样式
<style>
@media screen and (max-width:480px){
body {
background: blue;
}
}
</style>一定要注意and后面的空格
设置文本居中
text-align:center属性规定元素中的文本的水平对齐方式，设置文本居中。
text-align的center应用在一个容器上，它只针对容器里面的文字以及容器里面的display为inline或者inline-block的容器，如果里面的容器display为block，则里面的容器的内容不会居中。
text-align具有向下传递性，会不断地向子元素传递。如果设置一个div，则其子div中的内容也会居中。
margin:0 auto自动对齐，设置块元素或与之类似的元素居中。
用margin：0auto使元素产生位置变化，需要将其放在div中。需要使文本居中，只要将文本放在一个div中即可。不过，使用margin的时候需要注意的情况比较多，稍不注意的时候就容易导致margin失效。
float：left或margin：100px将magrin：0auto的效果覆盖。
使用margin需要指定DOCTYPE.DOCTYPE是指定浏览器用哪一种标准解析HTML代码，如果不指定，可能会不失效。此外，DOCTYPE前不能够有代码，否则也会导致margin；0auto失效。
CENTER
使布局居中。
<center>是将所有被包含的元素都居中显示,而text-align：center只是将元素下面的内联元素居中显示。但HTML5中不支持<center>，不建议使用该方法。
设置文本两端对齐
text-align:justifytext-align:justify属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用。
IE中要实现块内单行两端对齐需要使用其私有属性text-align-last:justify配合，text-align-last要生效，必须先定义text-align为justify。
line-height:0解决标准浏览器容器底部多余的空白
.content{
text-align:justify;
text-align-last:justify;
line-height:0;
height:44px;
}说明：模块使用[换行符]或[空格符]后，webkit浏览器中会引起最后一个模块有多余空白，使用font-size:0可清除该空格。
@media all and (-webkit-min-device-pixel-ratio:0){
.content{
font-size:0;
}
}说明：
text-align-last:justify目前只有IE支持，标准浏览器需要使用.demo:after伪类模拟类似效果。
opera浏览器需要添加vertical-align:top才能完全解决底部多余的空白,且子类必须是inline-block元素。
.content:after{
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;
}设置文本溢出省略
CSS单行文本溢出省略问题
.overhidde{
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}这里的width属性是必须的，因为需要知道它的宽度是多少，才能判断溢出；
overflow:hidden;是为了隐藏溢出的文本；
white-space:nowrap;默认。空白会被浏览器忽略；
text-overflow:ellipsis;显示省略符号来代表被修剪的文本。
css多行文本溢出省略问题
.overhidden2{
height:53px;
width:100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}在这里height属性和overflow属性相结合是为了隐藏省略号一下的文本，大家可以试一下不加的效果，就一目了然了。
line-clamp属性是为了控制文本显示多少行。
关于display和box-orient，在这里简单说一下：
必须定义display属性才可以对box进行划分。
box-orient属性指定一个box子元素是否应按水平或垂直排列。
