CSS（层叠样式表）笔记篇

css选择器权重：行内样式 > id选择器 > class选择器 > 标签选择器

背景图片重复问题：background-repeat: no-repeat—不重复
background-repeat: repeat-x—横向重复
background-repeat: repeat-y—纵向重复
固定背景图片：background-attachment: fixed;
背景图片位置：background-position:200px 200px;（可以结合background-image设置列表(ul、li、dl)的前置图标）
以上可以写在一起：background：url地址 no-repeat fixed 200px 200px;
当我一个网页有很多图片需要加载时，速度会非常慢，这个时候可以把所有图片放在一张图片上，然后通过background-position定位需要显示的图片，具体的值UI会给出。

文本颜色：
color: rgb(red, 0, 0);
color: rgba(255, 0, 0,.5)–.5为设定的透明度，前面的0可以省略。
文本对齐：text-align: center(right)
文本修饰：
text-decoration: overline; --上划线
text-decoration: line-through; --中划线
text-decoration: underline; --下划线
text-decoration: none;–去除下划线
文本转换：
text-transform: capitalize;–单词首字母大写
text-transform: uppercase;–全部转换为大写
text-transform: lowercase;–全部转换为大写
文本缩近：text-indent: 30px;

表单：
<input type="image"/>定义图片作为提交按钮
<input type="file"/>定义文件选择字段和 “浏览…” 按钮，供文件上传。

下拉框：

<select>          
	<option value="" disabled="disabled">--请选择
	</option>         
	<option value="北京">北京</option>       
        <option value="上海">上海</option>      
        <option value="重庆">重庆</option>  
</select>

文本框：

<textarea name="" id="" cols="30" rows="10"></textarea>

注：cols–列数（高度） rows–行数（宽度）

box-sizing:boderbox
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
eg：使用padding时，若加上此属性，盒子不会变大，而是内容宽度做调整
border-collapse属性
为表格设置合并边框模型：
table{
border-collapse:collapse;
}
vertical-align 属性
vertical-align 属性设置元素的垂直对齐方式。
参考：https://www.w3school.com.cn/css/pr_pos_vertical-align.asp
隔行换色

tr:nth-child(odd){
	color:red;
}
tr:nth-child(even){
	color:blue
}

odd：奇数行 even：偶数行

display:none和visibility:hidden区别
display:none–不占空间
visibility:hidden–占空间

CSS的相对定位和绝对定位