css要点总结

css总结

1. box-sizing：content-box | border-box

/*

* content-box: 设置的宽度，高度为content的

*      border-box: 设置的宽度，高度为content+ padding +border 

*/

 div

{
    box-sizing:border-box;/*默认是content-box*/
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    width:50%;
    float:left;
}

	2. "dpi_scale": 1.0

	/* 此问题时同学遇到的sublime，导航栏中文变空格无法显示，*/

	解决方案：在preference -》设置用户-》最后一行 ："dpi_scale": 1.0

	3.clear: both;

	/*问题描述是：当前元素之前的元素设置了float，当前元素也会默认浮动*/

	解决方案：在当前元素样式中添加 clear: both;

4. 字体属性：

属性	属性含义	属性值
font-family	使用什么字体	所有字体
font-style	字体是否斜体	normal、italic、oblique
font-weight	字体的粗细	normal、bold
font-size	字体的大小	绝对大小/相对大小

说明：

不建议在font-family中设置超过宋体/黑体之外的字体,会导致未装字体的计算机显示不正常

5. list-style-image

/*问题描述：如何改变无序列表的image样式*/

解决：list-style-image:url（此处为路径）;}

  6. height&line-height

/*问题描述：height&line-height的区别*/

解答：line-height：

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，

分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

简单的说就是：文本设置的行高内垂直居中

height：

height就是高，通常height是对于某个div或者图片来弄的。

另外：line-height等于height时文字会垂直居中