前端学习自用笔记（一）

CSS字体属性

font属性复合写法

body {
	font: font-style font-weight font-size/line-height font-family;
}

复合选择器

链接伪类选择器

按照LVHA的顺序声明:link, :visited, :hove, :active
实际开发常用写法：

a {
	...
}
a:hover {
	...
}

CSS的背景

背景属性复合写法

body {
	background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
}

CSS三大特性

优先级

各选择器权重如下：

选择器	选择器权重
继承或*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=“”	1,0,0,0
!important 重要的	∞无穷大
复合选择器会有权重的叠加。

盒子模型

边框（border）属性复合写法

div {
	border: 宽度 样式 颜色;  /*没有顺序*/
}

内边距（padding）属性复合写法

值的个数	表达的意思
padding: 5px;	1个值，代表上下左右都有5像素的内边距
padding: 5px 10px;	2个值，代表上下内边距为5像素，左右内边距为10像素
padding: 5px 10px 20px;	3个值，代表上内边距为5像素，左右内边距为10像素，下内边距为20像素
padding: 5px 10px 20px 30px;	4个值，代表上为5像素，右为10像素，下为20像素，左为30像素，顺时针
外边距（margin）同理。

外边距合并

嵌套块元素外边距合并塌陷问题解决方法：
① 为父元素定义上边框；
② 为父元素定义上内边距；
③ 为父元素添加overflow:hidden；
④ 浮动、固定，绝对定位的盒子不会有塌陷问题。

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除网页元素的内外边距。

* {
	padding: 0; /* 清除内边距 */
	margin: 0; /* 清除外边距 */
}

行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距。但是转换为块级元素或行内块元素就可以自由设置了。

清除浮动

为什么要清除浮动？

① 父级没有高度；
② 子盒子浮动；
③ 影响下面的布局。

清除浮动——额外标签法

也称隔墙法。在浮动元素末尾添加一个空的块级元素标签，例如<div style="clear:both"></div>，或者其他标签如<br />等。缺点：添加很多无用的标签，结构化较差。

清除浮动——父元素添加overflow

给父元素添加overflow:hidden属性。缺点：无法显示溢出部分。

清除浮动——:after伪元素

给父元素添加。

.clearfix::after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {  /* IE6、7专有 */
	*zoom: 1;
}

清除浮动——双伪元素

给父元素添加。

.clearfix::before, .clearfix::after {
	content: "";
	display: table;
}
.clearfix::after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

定位（position）

定位的拓展

浮动元素会压住它下面的标准流的盒子，但不会压住下面标准流盒子里文字。
绝对定位（absolute）、固定定位（fixed）元素会压住它下面的标准流的所有内容。

溢出文字省略号显示

单行文字溢出显示省略号

/* 1.先强制一行内显示文本 */
white-space: nowrap; /* 默认normal自动换行 */
/* 2.超出的部分隐藏 */
overflow: hidden;
/* 3.文字用省略号替代超出的部分 */
text-overflow: ellipsis;

多行文本溢出显示省略号

有较大的兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）

overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型 */
display: -webkit-box
/* 限制在一个块元素显示的文本行数 */
-webkit-line-clamp: 2;
/* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

CSS初始化

每个网页都必须首先进行CSS的初始化（消除不同浏览器对HTML文本呈现的差异）。

/* 把所有标签的内外边距清零。有些网站不推荐使用。 */
* {
	margin: 0;
	padding: 0;
}
/* 斜体的文字不倾斜 */
em, 
i {
	font-style: normal;
}
/* 去掉li的小圆点 */
li {
	list-style: none;
}
img {
	/* 照顾低版本浏览器如果图片有链接有边框的问题 */
	border: 0; 
	/* 取消图片底下的空白缝隙 */
	vertical-align: middle; 
}
/* 鼠标悬停时变换样式 */
button {
	cursor: pointer;
}
body {
	/* CSS3 抗锯齿性 */
	-webkit-font-smoothing: antialiased;
	font: ...; 
}
/* 清除浮动 */
.clearfix::after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {  
	*zoom: 1;
}

Unicode编码字体：把中文字体的名称用相应的Unicode编码来代替，可以有效避免浏览器解释CSS代码时出现乱码的问题，比如：宋体 \5B8B\4F53。