一.语义化
通俗一点就是：明白每个标签的用途,比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用em标签标示强调等等。
语义化的好处
1.更容易被搜索引擎收录。
2.更容易让屏幕阅读器读出网页内容。
二.简写
①盒模型代码
1.如果top,right,bottom,left的值相同 可缩写为margin:10px;
2.如果top和bottom值相同，left和right的值相同 可缩写为margin:10px 20px;
3.如果left和right的值相同,可以缩写为margin:10px 20px 30px
P:padding，border，margin缩写方法是一致的
②颜色值缩写
关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半.
③字体缩写
网页中的字体CSS样式代码也有他自己的缩写方式。
body{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;
}
这么多行代码可以缩写为1句
body{font:italic small-cap bold 12px/1.5em "宋体",sans-serif}
PS
1.使用这一简写方式你至少需指定font-size和font-family属性，其他属性（font-weight,font-style,font-variant,line-height）如未使用将懂使用默认值
2.在缩写时font-size与line-height中间要加入"/"斜杠
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：body{font:12px/1.5em “宋体”,sans-serif;}
只是有字号，行间距，中文字体，英文字体设置。
三.颜色值
在网页中的颜色设置是非常重要，有字体颜色(color)，背景颜色(background-color),边框颜色(border)等，设置颜色的方法也有很多种
1.英文命令颜色 p {color:red;}
2.RGB颜色
p{color:rgb(133,45,200);}
p{color:rgb(20%,33%,25%);}
每一项的值可以是0-255之间的整数，也可以是%-100%的百分数
3.十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是RGB设置，但是其每一项的值由0-244变成了十六进制00-ff.
p{color:#00ffff;}
四.长度值
长度单位总结一下，目前比较常用到px(像素)，em,%百分比，要注意其实这三种单位都是相对单位。
1.像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点(CSS规范中假设“90像素=1英寸”)。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素(px)作为单位
2.em
就是本元素给定字体的font-size值，如果元素的font-size为14px，那么1em=14px;如果font-size为18px,那么1em=18px.
3.百分比
p{font-size:12px;line-height:130%}设置行高(行间距)为字体的130%(12*1.3=15.6px);
五.水平居中设置
1.行内元素
如果被设置元素为文本，图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。
2.定宽块元素
当被设置元素为块状元素时用text-align：center就不起作用了
这时也分为两种情况：定宽块状元素和不定宽块状元素
①满足定宽和块状两个条件的元素是可以通过设置"左右margin值为auto"来实现居中的.
②不定宽度的块状元素有三种方法居中
1.加入table标签。利用table标签的长度自适应性-即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定)，因此可以看做义工丁宽度块元素，然后再利用定宽度块居中的margin的方法，使其水平居中.
第一步:为需要设置的居中的元素外面加入一个table标签(包括<tbody>,<tr>,<td>).
第二步：为这个table设置"左右 margin居中"
2.设置display：inline方法:与第一种类似，显示类型设为行内元素，进行不定宽度元素的属性设置
这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题；它将块状元素的display类型改为inline,变成行内元素，所以少了一些功能，比如设定长度值
3.设置position:relative和let：50% 利用相对定位的方式，将元素向左偏移50%，即达到居中的目的
六.垂直居中
我们在实际工作也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中。
1.父元素高度确定的单行文本
通过设置父元素的height和line-height高度一致来实现.(height：该元素的高度，line-height:行高,指在文本中，行与行之间的基线间距离)
line-height 与font-size的计算值之差，在CSS中称为间距，分为两半，分别加到一个文本行内容的顶部和底部。这种文字行高与块高一致带来了一个弊端；当文字内容的长度大于块的宽时，就有内容脱离了块
2.父元素高度确定的多行文本
方法一：使用插入table(包括tbody、tr、td)标签，同时设置vertical-align：middle。
css中有一个用于竖直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用
方法二:在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell（设置为表格单元显示），激活vertical-align属性，但注意IE6、7并不支持这个样式,兼容性比较差
七.隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none除外）设置以下2个句之一：
2. float : left 或float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以display:inline-block（块状元素）的方式显示，当然就可以设置元素的width和height了，且默认宽度不占满父元素。
网友评论