html+css学习心得

最近一周在学习html+css的知识，总结一下学习心得。

1、css选择器

在网页样式设计时，有三种方法：行内样式，内部样式，外部样式。
一般采用的是外部样式，它利于维护，方便复用，也实现了网页内容与样式分离。
在优先级上，行内样式>内部样式>外部样式
所以选择器在设计样式时，显得非常重要。以下是几种常用选择器：

1. class选择器 .className{}
2. id选择器 #idName{}
3. 通用选择器 *{}
4. 标签选择器 标签Name{}
5. 后代选择器 标签Name 标签Name{}
6. 子代选择器 标签Name>标签Name{}
7. 兄弟选择器 标签Name+标签Nmae{}
8. 元素选择器 [元素Name=“元素值”]{}
9. 伪类选择器 ：
   link 未被访问的
   visited 已被访问的
   active 正在活动的
   hover 鼠标指针停留时
10. 添加内容 ：
    before 之后添加
    after：之前添加

2、css元素

关于css元素大致可以分为以下2类：

1. 块级元素：p，div，h（n），ul，li，form，table等
2. 行内元素：span，a，img，input等

主要区别
块级元素：可以容纳块级元素和行内元素，符合盒子模型，可进行宽高，边距，边框设计。
行内元素：只能容纳行内元素，不可进行宽高设计，和左右内边距，以及外边距。但是也有特殊情况，比如input和img元素，虽然属于行内元素，但是也符合盒子模型。

3、盒子模型

关于布局，不得不提到盒子模型，可以说，对盒子模型理解的透彻程度关系到能否学好布局。
ie6及更低级版本的ie游览器之外，盒子模型基本可以理解为以下情况

这个模型适用于所有的块级元素，通常在进行网页进行布局和编写样式时，都以这个模型为基准，能在编程时，知道哪个地方属于哪一块元素，被哪一行的代码控制。
有一个box-sizing属性设置为border-box时，宽高将包含border和padding值，有时在进行布局时也会用到。
行内元素也可以通过设置display属性变为盒子模型再进行样式布局。

4、浮动

普通文档流：
	块级元素：从上到下
	行内元素：从左到右 ，当前一行显示不下的是，会自动换行
浮动：
	脱离普通文档流，不在占据页面的空间，其他未浮动的元素会自动补齐
	当父元素未设定高度时将受到影响  
	浮动的元素会停靠在父元素的左边或右边或者停靠在其他已经浮动的元素的边缘上
	浮动元素高度不受父元素的管控，但是宽度仍然在父元素的管辖中
	浮动了的元素会变成行内块元素
清除浮动影响：
	1、使用clear属性  none 默认值 left right both
	2、对于父元素的影响
		2.1 直接设置父元素的高度  弊端必须要知道父元素的准确高度
		2.2 父元素也浮动 弊端 后续元素任然有影响
		2.3 设置父元素的overflow  取值为hidden或auto  弊端 如果有子级内容要是溢出显示的话，也被一同隐藏了
		2.4 在父元素中追加子元素 并且设置其clear的属性为both  
		2.5 使用after伪类选择器追加内容
	当受影响的是文本、行内元素，行内块元素时采用环绕式的方式排列   
	不会被浮动元素压在底下，会巧妙的避开浮动元素

5、定位

相对定位：
	元素不会脱离文档流  元素原有的位置会保留
	以自身的位置为目标做较小的偏移
	适用场合：实现元素微调的时候
	
绝对定位：
	元素脱离文档流  不占据页面的空间
	元素相对于它最近的已定位的祖先元素实现位置的初始化；
	如果没有已经定位的祖先元素，那么元素会相对于body或者是html最大的祖先元素实现位置的初始化	
	已定位：position的属性值设置为：relative absolute fixed
	绝对定位的一些影响
		绝对定位的元素变成块级元素
		绝对定位的元素可以使用margin，但是auto会失效
		
固定定位：
	作用：将元素固定在页面可视区的某个位置处，不会随着滚动条变化而移动
	固定定位的元素会脱离文档流
	固定定位的元素会变成块级元素
	固定定位永远是相对于body实现定位
	适用场合：侧边栏、回到顶部按钮。

6、其他

结构化标签

为了减少命名麻烦，可以使用header、nav、section、footer标签进行布局

表单

表单：主要是收集用户的各种类型数据，提交数据请求到服务器。由表单元素和表单控件构成的功能性标签
	1、表单元素
		属性
		action:主要作用是规定表单提交的动作  提到到服务器上处理的URL
				默认值：提交到本页
		method:指表单数据提交的方式
				get 默认值
					数据提交的大小限制  2kb   
					显示提交  用户数据可以显示在地址栏
					适用场合：向服务器要数据时
				post
					数据提交的大小不受限制
					隐式提交  提交的数据非专业人士看不见
					适用场合：向服务器提交数据时
			enctype
				表单数据进行编码的方式
				取值 
				application/x-www-form-urlencoded  默认值
				multipart/form-data 上传文件时适用
				text/plain
	2、表单控件
		input组元素	
			type属性 默认值 text
			属性：
				type
				value 值 要提交到服务器的值
				name 控件名称，服务器端适用，没有做名称，无法提交
					名称  匈牙利命名方式  类型+功能
				disabled 禁用控件 改属性，主要出现在控件中表达禁用  boolean类型的属性
			textarea
			选择框
			其他

边框阴影

box-shadow：
	h-shadow:必须 阴影的水平偏移距离 + 右偏移  - 左偏移
	v-shadow:必须 阴影的垂直偏移距离 + 下偏移  -上偏移 
	blur: 模糊距离
	spread：阴影的尺寸
	color  阴影的颜色
	inset 将默认的外阴影更改为 内阴影

溢出处理

overflow：
	visible  默认值  溢出可见
	hidden   溢出部分被裁减掉，且不可见
	scroll  滚动  不论内容是否溢出都出现滚动条
	auto  自适应  溢出边出现滚动条
	overflow-x  横向溢出的处理
	overflow-y  纵向溢出的处理

堆叠

z-index
	取值：
	 	没有单位的数字，值越大，约靠上   
	 	可以是负数（用的少），设置了负值 该元素被压在所有元素之下  包括文档流中的元素
	只作用于在  元素的定位设置为relative absolute fixed的元素。
	因为这些元素如果不指定z-index 则后来者居上
	父子关系的元素不能使用z-index修饰堆叠顺序，永远是子压在父上