XY笔记4

标签显示模式转换

块转行内：display：inline；
行内转块：display：block；
块、行元素转为行内块：display：inline-block；

块级元素和行内元素的区别

块级元素的特点：

1. 总是独占一行
2. 高度、行高、内外边距都可以控制
3. 宽度（width）默认值是所在页面的100%
4. 可以容纳内联元素和其他块元素

行内元素的特点：

1. 和相邻的行内元素在一行上
2. 可以设置水平方向的padding和margin，但是
   宽、高以及垂直方向的padding和margin无效
3. 行内元素只能容纳文本或其他行内元素
4. 默认宽度就是内容本身的宽度

CSS书写规范

空格规范
选择器和 {}之间必须包含空格

例：.box1 { }

属性名和 ：之间不允许包含空格，；与属性值之间必须包含空格

例：text-align：left；

选择器规范
当一个rule包含多个selector时，每个选择器声明必须独占一行

例：.box1,
	.box2,
	.box3 {
	Width: 200px;
}

选择器的嵌套层级不应大于3级，位置靠后的限定条件应当尽可能精确

例：.box1 div * {
	Width: 200px;
}
.box1 .box2 #username input { }

属性规范
属性定义必须另起一行

例：.box1 div * {
	Width： 200px;
Height：200px;
}

行高
顶线，中线，基线，底线

CSS三大特性

CSS层叠性
指CSS样式可以叠加
CSS继承性
CSS优先级

CSS背景（background）

background-image背景图片

1. background-image: url(image/2.png),url(image/1.png);多张背景
2. background-size背景大小
3. auto图片大小
4. contain设置100%
5. cover设置2个100%，不变形图片
6. background-origin背景图片位置区域
7. background-clip背景剪切位置

background：rgba（0，0，0，0.3）背景透明
最后一个参数是alpha透明度，取值范围在0~1之间
盒子背景半透明，盒子里内容不影响

盒子模型

边框
*border-image边框图片

border-style:边框线样式*
border-上下左右-style
solid实线
dashed虚线
dotted点线
double双实线
border-radius: 50%;圆型角

box-shadow边框阴影
box-shadow: x轴偏移 y轴偏移 阴影大小 颜色;
box-shadow: x轴偏移 y轴偏移 颜色;

border-width:边框宽度
border-上下左右-width

border-radius圆角
border-radius: 左上 右上 右下 左下;
border-radius: 左上 右上左下 右下;
border-radius: 左上右下 右上左下;

表格合并
Table{border-collapse:collapse;}相邻边框合并

内边距（padding）
padding属性用于设置内边距
Padding-top:上内边距
Padding-right:右内边距
Padding-bottom:下内边距
Padding-left:左内边距