CSS+HTML基本常用笔记

---

• 了解CSS常用基本命令

---

padding

padding:20px; 上 下 左 右 距离都是20px
padding:20px 30px; 上、下 距离20px 左、右距离都是30px
padding:20px 30px 50px; 上内边距离20px 左右内边距离30Px 下内边距里 50px
padding:20px 30px 50px 80px; 上内边距离20px 右内边距离30Px 下内边距离50Px 左内边距里 50px

内边距padding

• 行内元素没有宽高，但是有内边距

外边距margin

• 外边距合并以最大的外边距距离为准[外边距塌陷]

外边与内边距合并
解决内边距会撑开父盒子大小的问题

• 为父类添加border属性 border:1px solid black
• 为父类添加padding属性 padding:1px;
• 触发BFC overflow:hidden;

padding值不影响父盒子宽度

• 不给父盒子添加宽值属性

宽度剩余法

• 不给子元素指定宽度值

盒子的模型

• box-sizing:content-box; //w3c标准盒子模型，会撑开盒子
• box-sizing:border-box; //不会撑开盒子，内边距都包含在里边

盒子的阴影

box-shadow: 0 2px 3px 5px rgba(0,0,0,0.2);
参数： 水平距离 垂直距离 模糊距离 阴影尺寸大小 阴影颜色
box-shadow: 0 2px 3px rgba(0,0,0,0.2);
参数： 水平距离 垂直距离 模糊距离 阴影颜色

标准流

• document中块级元素自上而下的排列

浮动float
float:left
float:right

• 添加浮动会元素会脱标，但是会拥有设置宽高、外边距的属性
• 如果两个元素都被添加浮动，就会自动排列在同一行
• 如果下一个元素没有浮动，则会出现在添加浮动元素块的下边
• 如果父盒子宽度不够，添加浮动属性的元素会自动提一行

行内元素特性

• 同一行的宽度由各自元素内容决定
• 行内元素不觉有行内块的属性

HTML基本功能划分

• top nav banner main foot

为什么要清楚浮动

• 如果不清除浮动效果，那么下边的元素会自动跑上来

清除浮动

1. 在父类末尾填加空盒子并添加clear:both属性清除浮动效果
2. 给父类添加overflow:hidden 触发BFC清除浮动效果
3. 在父类上添加伪元素清除浮动效果

	.clearfix:after{
   
		content:'';
		display:block;
		height:0;
		visibility: hidden;
	}
	.clearfix{
   
		zoom