排版
排版 :只要使用定位必须有一个相对位置的参照物 relative
具体定位的那个元素需要加position:absolute (绝对定位的意思) 具体到某个地方 ,特别详尽的意思
浏览器使用绝对定位的时候,浏览器会逐层向上级元素找position属性 如果父级没有就会继续向上级查找position ,一直找到position为止,如果找不到就会以body为相对位置。
position两个属性 absolute属性 relative属性
具体位置 给一个参照物
页面布局
页面布局分两个部分 结构层和布局层
结构层指 搭载我们页面的框架( 遵循浏览器的规则)标准文档流
布局层 指 针对我们框架内部结构进行排版 (用后代选择器或子代选择器做结构层)
每当写一个模块先套两个<div>,一个结构层 (尽量只设置width;margin:0 auto),一个布局层
注意能不使用浮动解决问题的时候,尽量不要用浮动。
盒子标签<div> 意思是:就是一个容器 ,可以装任何标签
细节:块级元素的宽 ,如果没有设置宽,就是父级的宽 如果没有设置高就是内容的高度
单位问题:百分比 给一个元素设置宽是50%,那么这个百分之五十相对于他的父级
窗口是能看见的内容,网页时整体(html)
relative和absolute的区别
absolute脱离了标准文档流
relative不会 虽然给值了 但依然会占着原来的位置
relative有在形影分离 所以一般情况下不建议添加值,一般给子元素当参照位置或是对元素进行微调
absolute的一种压盖现象“压盖”效果
z-index层次关系 可以改变元素的层叠位置 所有标签的默认值为0 ,z-index的值越大该元素就在上方
备注:以后做定位的时候经量保持“子绝父相”(儿子绝对定位,父级相对定位)
position:fixed; 固定定位 当内容很多的时候 ,滚动滚动条的时候fixed会固定在那个位置 ,始终不变
脱离标准流的属性 float; absolute; fixed; position:static (静态 系统默认的)
form表单 唯一一个跟后台有关系的标签
<form:action="" method="post"></from>
action(提交的位置) method(提交的方式)
method后面两个属性值 post(加密)和get (不加密)
get是 http的url上提交的
post加密在http中的一个body对象上提交的
<form></form>
<input type="text" /> 文本框
<input type="password" /> 密码框
<input type="radio" /> 单选框
<input type="checkbox" /> 多选框
<input type="button" value=""/> 普通按钮
<input type="submit" value""/> 提交按钮
http 是一种协议 就是客户端和服务端连接的一种协议 (超文本传输协议)
下拉列表
<select name="">
<option value=" 给后端看的 " > 前端看的 </option>
</select>
<input type="reset" value="" /> 重置列表
margin 塌陷如何取消:overflow:hidden