H5和CSS的基础部分

框模型、盒子模型(标准盒模型)

组成：内容(width和height)、内边距、边框、外边距
元素占地宽度：左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距

外边距margin

- 单方向外边距设置：
上外边距margin-top:10px;
下外边距margin-bottom:10px;
左外边距margin-left:10px;
右外边距margin-right:10px;
-margin的简写形式：
margin:10px;四个方向10px
margin:10px 20px;第一个值代表上下10、第二个值代表左右20
margin:10px 20px 30px;上10、左右20px、下30px
margin:10px 20px 30px 40px;上10、右20、下30、左40
- 块级元素的水平居中
元素左右方向的margin值为auto即可
- 在使用margin时遇到的问题
1.垂直方向外边距合并,以大值为准(子元素没有浮动)
2.不能设置尺寸的元素,行内元素中b,strong,i,em,u,s,del,span,a垂直方向外边距不生效
3.外边距传递问题
	内外嵌套的两个元素,如果给子元素设置margin-top会传递给父元素(父元素没有边框、子元素父元素没有浮动)

内边距padding

- 单方向内边距的设置
上内边距padding-top:10px;
- 四个方向内边距的设置
同margin的使用方法
padding:10px 20px;
- 在使用padding时遇到的问题
1.padding是强制塞一个间距进去,所以尺寸要对应减掉,否则元素会被撑大
2.不能设置尺寸的元素,行内元素中b,strong,i,em,u,s,del,span,a垂直方向内边距不生效(元素的位置不会变化)

溢出属性

 overflow:visible默认值,溢出可见、hidden溢出隐藏、scroll滚动条、auto自动添加;控制水平和垂直两个方向 overflow-x:;控制水平方向溢出 overflow-y:;控制垂直方向溢出

元素的显示类型display

***1.display:none;元素消失,空间不再占据
***2.display:block;转为块级元素
3.display:inline;转为行内元素
4.display:inline-block;转为行内块(既具备块级元素能设置宽高的特点,还具备行内元素不换行的特点)
5.display:list-item;

鼠标移入父元素控制子元素效果

父元素:hover 子元素{
样式
}

定位position

1.相对定位position:relative;
	- 参考物：元素本身位置
	- 是否脱离文档流：否
	- 偏移距离：
	top自己的顶部距离自己顶部的距离
	bottom自己的底部距离里自己底部的距离
	left
	right
	- 用处：实现元素位置的微调,而且保留了元素的初始位置
2.绝对定位position:absolute;
	- 参考物：外层具有position属性的元素,如果都没有找到则参考浏览器空白文档区域
	- 是否脱离文档流：是
	- 偏移距离：
	top自己的顶部距离参考物顶部的距离
	bottom自己的底部距离参考物底部的距离
	left自己的左侧距离参考物左侧的距离
	right
	- 用处：相互叠加效果,而且元素初始位置空间不再占据
2.1 z-index定位元素的层叠顺序
	z-index:4;值越大越靠前，没有单位 默认值为0，可以为负值
3.固定定位position:fixed;
	- 参考物：浏览器空白文档区域
	- 是否脱离文档流：是
	- 偏移距离
	- 用处：不随滚动条滚动
4.粘性定位position:sticky;
- 参考物：浏览器空白文档区域的顶部
- 是否脱离文档流：否
- 偏移距离top
- 用处：吸顶效果

透明度

1.background:rgba(255,255,255,0-1之间的小数)
数值越小越透明
没有继承性
2.opacity:0-1之间的小数;
background:rgb();
opacity:0.4;
有继承性
3.问题：IE6/7/8浏览器不支持以上两种透明度写法
filter:alpha(opacity=40);

锚点

1.点击的位置
<a href="#anchor"></a>
<a href="页面路径#anchor"></a>
2.跳转到的位置
<div id="anchor"></div>
3.<a href="#">点我返回顶部</a>
返回页面顶部的空链接

伪元素选择器、伪对象选择器

:first-letter第一个字符
:first-line第一行
:before在元素前面追加文字、图片或者元素
	.box:before{
		content: "小红："; 追加文字
	}
	.box:before{
		content: url(img/zuiku_71.png); 追加图片
	}
	.wrap:after{ 追加元素
		content: "";
		display: block; 默认元素为行内
		width: 100px;
		height: 100px;
		background: green;
	}
:after在元素后面追加文字、图片或者元素

表单元素补充

1.单选按钮
	<input type="radio" name="gender" value="male">男
	<input type="radio" name="gender" value="female" checked>女
	- 相同的name,不同的value
	- 默认被选中checked="checked"可以简写为一个checked
2.复选框
	<input type="checkbox" name="city" value="bj">北京
	<input type="checkbox" name="city" value="sh">上海
	<input type="checkbox" name="city" value="sz">深圳
	- 相同的name,不同的value
	- 默认被选中checked="checked"可以简写为一个checked
3.下拉菜单
	<select name="age" size="5">
		<option value="a">0-12岁</option>
		<option value="b">13-18岁</option>
		<option value="c">19-30岁</option>
		<option value="d">30以上</option>
	</select>
	- size显示的条数,不规定的话只显示1条
	- 默认被选中selected="selected"可以简写为一个selected
4.多行文本域
	<textarea name="intro" rows="4" cols="40"></textarea>
	- rows显示的行数
	- cols一行显示的字符数(一个汉字是两个字符)
		更建议使用width和height来更改文本域的尺寸
	- resize: none;禁止更改元素的尺寸
5.文件上传
	<input type="file">
6.表单字段集
	<fieldset>
		<legend>百度</legend>
		<p>
			百度一下你就知道
		</p>
	</fieldset>
7.关联文本
	方法一：
	<label>
		<input type="checkbox" name="tiaokuan" value="agree"/>我同意此条款
	</label>
	方法二：
	<input type="checkbox" name="tiaokuan" value="agree" id="agree"/>
	<label for="agree">我同意此条款</label>
		for要和id属性相关联

表格补充

1.表格行分组
	thead表头、tbody表主体、tfoot表尾
	tr行，th表头单元格(文本加粗并居中)
2.表格标题
	<caption></caption>
3.表格边框
	td,th{
		border: 1px solid #000;
	}
4.单元格间距
	table{border-spacing:20px;}
5.单元格合并
	table{border-collapse:collapse;}
6.表格标题位置
	table{caption-side: bottom;}
7.无内容单元格隐藏
	td{empty-cells: hide;}
	- 生效的前提是单元格不能合并
8.固定表格布局
	table{table-layout:fixed;}
	不仅要固定每一列的宽度，也要固定表格宽度