一、定位详细说明
(1)static:静态定位,所有标准文档流中的元素默认值。
该关键字指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置。此时 top、right、bottom、left 属性无效。
(2)relative:相对定位,上浮但不脱离标准文档流。
该关键字指定元素会相对于自身标准文档流中的位置进行相应的偏移,可以给元素设置 top、right、bottom、left 值;
主要用途:微调元素、作为绝对定位的参考(子绝父相)。
(3)absolute:绝对定位,脱离标准文档流。
该关键字指定元素的特点:①没有父元素时,相对于浏览器定位;②有父元素且父元素是static定位时,相对于浏览器定位;③有父元素且父元素是非static定位时,相对于该父元素定位(多层父元素,相对于最近的非static父元素定位);④绝对定位后的元素在页面上脱离标准文档流,不占据位置。
主要用途:对话框的关闭按钮、鼠标悬浮按钮提示(绝对定位的信息文字会换行:white-space:nowrap;)。
总结:设置absolute绝对定位的元素的定位基准是基于祖先里的非static的的元素。
经验总结:如果写了absolute,一般都得补一个relative。如果写了absolute或fixed,一定要补top和left属性。
(4)fixed:固定定位,脱离标准文档流,相对于浏览器定位。
该关键字指定元素定位的参照物总是当前的文档。利用fixed定位,很容易让一个div定位在浏览器文档的某个位置。
主要用途:页面中固定位置的小广告,回到顶部的按钮。忠告:手机 端最好不要用这个属性,bug太多了。
(5)sticky:粘性定位,是relative和fixed两种定位集于一体的特殊定位。(有兼容性问题)
特点:①元素在跨越特定阈值之前为相对定位,之后为固定定位。特定阈值是指top、right、bottom、left其中一个属性,只有设置特定阈值,才能使该定位生效,否则跟relative相对定位相同。(top优先级比bottom高,left优先级比right高);②设定sticky定位元素的任意父节点的overflow属性必须是visible(overflow默认值),否则sticky定位不生效;③父元素是非static定位,则相对于该父元素定位,否则相对于浏览器窗口定位。
主要用途:滑动超过阈值时,隐藏标题栏,小于阈值时,显示标题栏。特别适合导航条上面还有其他内容的页面使用。
二、css样式使用方法
(1)外部样式:通过<link>标记引入外部的css文件(.css)
(2)内部样式:通过<style></style>来书写CSS代码
(3)行内样式:通过style的属性来书写CSS代码
三、清除浮动的方法
(1)额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)
(2)父级添加overflow属性(父元素添加overflow:hidden)
(3)使用after伪元素清除浮动
(4)使用before和after双伪元素清除浮动
(5)父级div定义 height
四、在html中的a标签中,实现在新窗口打开的方属性
target属性。target_blank:在新窗口打开;target_slef:当前窗口打开;target_parent:父frame中打开;target_top:整个窗口打开
五、表单域的基本格式
表单标签,表单域,表单按钮
常用的表单元素,包括:
1. form: 定义供用户输入的表单。
2. fieldset: 定义域。即输入区加有文字的边框。
3. legend:定义域的标题,即边框上的文字。
4. label:定义一个控制的标签。如输入框前的文字,用以关联用户的选择。
5. input: 定义输入域,常用。可设置type属性,从而具有不同功能。
6. textarea: 定义文本域(一个多行的输入控件),默认可通过鼠标拖动调整大小。
7. button: 定义一个按钮。
8. select: 定义一个选择列表,即下拉列表。
9. option: 定义下拉列表中的选项。
input常用type属性如下:
1. text:单行文本输入框,可以通过正整数的size控制框长度。
2. password:密码输入框。
3. radio:单选按钮,同一组的单选按钮必须要有相同的name。
4. checkbox:复选框,同一组的单选按钮必须要有相同的name。
5. button:普通按钮。
6. submit:提交按钮,每出现一次,一个Submit对象就会被创建。
7. reset:重置按钮,会重置当前表单中全部的内容。
8. image:图像形式的提交按钮,写法是“”。
9. hidden:隐藏域,隐藏字段对于用户是不可见的。
10. file:文件域,用于文件上传。