<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #fd{ width:100px; height:100px; float:left; background:#039} #fd{ width:100px; height:100px; float:left; background:#039} </style> </head> <body> <div id="fd"></div> <div id="fd1"></div> </body>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> #li{ background:#CCC; width:100%; height:100px;/*高*/ line-height:100px;/*行高*/ } </style> </head> <body> <div id="li">小可爱</div> </body> </html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{ margin:0 auto;} /*a大div 宽 高 相对定位*/ #a{ width:500px; height:200px; border: 1px solid #000; position:relative; } /*b方块 宽 高 相对定位*/ #b{ width:120px; height:60px; border:1px solid #00C; position:absolute; top:130px; left:370px;} /*c方块 宽 高 相对定位*/ #c{ width:120px; height:60px; border:1px solid #00C; position:absolute; top:230px; left:315px; z-index:10; background:#000} /*x方块 宽 高 相对定位*/ #x{ width:120px; height:60px; border:1px solid #00C; position:absolute; top:8px; left:257px;} /*y方块 宽 高 相对定位*/ #y{ width:120px; height:60px; border:1px solid #00C; position:absolute; bottom:20px; right:-200px;} /*z大方块 宽 高 相对定位*/ #z{ width:500px; height:200px; border: 1px solid #000; position:relative;} </style> </head> <body> <!--a大div--> <div id="a"> <!--b方块--> <div id="b"></div> <!--c方块--> <div id="c"></div> </div> <!--z大div--> <div id="z"> <!--x方块--> <div id="x"></div> <!--y方块--> <div id="y"></div> </div> </body>
Float：浮动
1.clear：both 要浮动的标签用div包起来，给div设宽高，设行高垂直居中
Line-heiht：行高
1.行高 默认垂直居中
2.最好对一行使用，如果换行了 标签高度就变了
浏览器兼容性
1.将最外层的标签设置高宽，里面用百分比。
盒子模型
1.从内道外，内容、填充物、边框、和别的物品的距离
2.内容：html、内边距：padding 、边框：border、外边框：magin
自适应：box-sizing：border-box
指定宽高、自适应边框、内边距、内容
overflow : hidden 隐藏超出的内容
dispaly : block inline inline - block 转换元素 ； 比如行内元素转块状元素
1.dispaly：bock 转换为块标签
2.dispaly：liline 转换为行标签、
3.dispaly：liline-block 转换为行内块标签
布局顺序
先大色块再小色块再填写内容、（ 高宽要设定 ）、
定位
1.position 正确格式 position：定位 （加 top、left、right、buttom）
2. fixed 绝对定位（相对窗口定位） 自身位置没有了（流氓广告）、
3.absolute 绝对定位 （相对body）
他会相对于最近的有position属性的父标签定位 最上层就是body
4. relative 相对定位 有自身位置，用来微调
cursor 变小手
1.cursor： pointer
div 分层
z-index（1-10 ）