1.将浮动居中
这需要三个盒子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .Bar{ 12 width: 500px; 13 height: 500px; 14 background-color: yellow; 15 16 } 17 /*这里利用将在Bar盒子后面加入father子盒子 18 因为只能放一个 所以会居中 然后在加入一个浮动的盒子 19 作为father的子盒子根据宽度一样添加进去*/ 20 .father{ 21 width: 100px; 22 height: 100px; 23 background-color: cornflowerblue; 24 overflow: hidden; 25 margin: 0 auto; 26 } 27 /*浮动的*/ 28 .set{ 29 width: 100px; 30 height: 150px; 31 32 background-color: darkcyan; 33 margin: 0 auto; 34 float: left; 35 } 36 37 </style> 38 </head> 39 <body> 40 <div class="Bar"> 41 <div class="father"> 42 <div class="set"> 43 </div> 44 </div> 45 </div> 46 47 </body> 48 </html>
2.文本属性和字体属性
这里有两个特殊的属性 text 文本 font 字体
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .tst{ 8 9 width: 100px; 10 height: 100px; 11 background-color: darkorchid; 12 13 14 15 /*字体的粗细 没有单位 400以下无效 16 范围100-900*/ 17 /*font-weight: 900;*/ 18 /*字体的大小*/ 19 /*font-size: 50px;*/ 20 /*文本行高 一行的行高 超过父类 21 向下*/ 22 /*line-height: 500px;*/ 23 /*文本下划线*/ 24 /*text-decoration: underline;*/ 25 /*文本首行缩进 一个字节14px长度*/ 26 /*text-indent: 28px;*/ 27 /*文本首行1em==14px*/ 28 /*text-indent: 1em;*/ 29 /*字体居中*/ 30 /*text-align:center;*/ 31 32 } 33 34 </style> 35 </head> 36 <body> 37 <div class="tst">郭嘉算无遗迹</div> 38 39 </body>
3.关于行高
关于多行文本垂直 这要通过计算由给出的line-height 乘以得出总共几行
再用父类模块剪出总line-height 除以2
最后再用padding 向上加入结果
最后父类盒子长度再减去padding 的值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 160px; 10 font-size: 20px; 11 background-color: red; 12 line-height: 40px; 13 padding-top: 40px; 14 } 15 </style> 16 </head> 17 <body> 18 <div>国家国家国家国家国家国家国家国家国家国家国家</div> 19 20 </body> 21 </html>
4.关于background
可以引用图片为背景 其他都是知识点
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .box{ 8 width: 1000px; 9 height: 1250px; 10 /*background-color: darkorchid;*/ 11 /*这里指可以插入一个颜色 默认最近的*/ 12 13 /*只允许一个图片*/ 14 background: url(./qqq.jpg); 15 background-repeat: no-repeat; 16 17 /*默认是repeat 全部显示*/ 18 /*background-repeat: repeat;*/ 19 /*只在一行显示*/ 20 /*background-repeat: repeat-x;*/ 21 /*只在一竖行显示*/ 22 /*background-repeat: repeat-y;*/ 23 /*固定位置*/ 24 /*background-attachment: fixed;*/ 25 /*横向移动*/ 26 /*background-position-x:0;*/ 27 /*向上移动150px*/ 28 /*background-position-y:-150px ;*/ 29 30 31 } 32 </style> 33 34 35 </head> 36 <body> 37 <div class="box"> 38 39 </div> 40 41 </body> 42 </html>
5.关于透明度
background color;rgba
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .zq{ 8 width: 200px; 9 height: 200px; 10 background-color: rgba(200,25,25,0.1); 11 } 12 </style> 13 </head> 14 <body> 15 <div class="zq"></div> 16 </body> 17 </html>
6.定位
相对定位 绝对定位 固定定位
position:reletive
相对定位只是将定位的盒子作为单独的移动 不会影响其他盒子
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .box1{ 12 width: 200px; 13 height: 200px; 14 background-color: red; 15 } 16 .box2{ 17 width: 200px; 18 height: 200px; 19 background-color: green; 20 position: relative; 21 /*可以使用 top left right bottom*/ 22 top: 20px; 23 left: 100px; 24 z-index: 5; 25 } 26 .box3{ 27 width: 200px; 28 height: 200px; 29 background-color: blue; 30 position: relative; 31 } 32 </style> 33 </head> 34 <body> 35 36 <!-- --> 37 <div class="box1"></div> 38 <div class="box2"></div> 39 <div class="box3"></div> 40 41 42 </body> 43 </html>
绝对定位
绝对定位是将页脚作为原点
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 .box1{ 12 width: 200px; 13 height: 200px; 14 background-color: red; 15 } 16 .box2{ 17 width: 200px; 18 height: 200px; 19 background-color: green; 20 position: absolute; 21 /*这里的距离为离top有40px的是以左上角为坐标原点 22 进行移动的 而且后面的会覆盖前面的*/ 23 top:40px; 24 left:0; 25 } 26 .box3{ 27 width: 250px; 28 height: 200px; 29 background-color: blue; 30 position:absolute ; 31 left: 0 ; 32 top: 50px; 33 } 34 </style> 35 </head> 36 <body style="height: 2000px;"> 37 38 <!-- --> 39 <div class="box1"></div> 40 <div class="box2"></div> 41 <div class="box3"></div> 42 </body> 43 </html>
7.关于父相子绝的例子
左右框
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style > 7 .father{ 8 width: 500px; 9 height: 500px; 10 background-color: darkorange; 11 position: relative; 12 } 13 .set{ 14 width: 50px; 15 height: 50px; 16 line-height: 50px; 17 text-align:center; 18 background-color: darkorchid; 19 color: #ffffff; 20 position: absolute; 21 left: 0; 22 top: 50%; 23 } 24 .bar { 25 width: 50px; 26 height: 50px; 27 line-height: 50px; 28 text-align: center; 29 position: absolute; 30 /*字体颜色和背景颜色*/ 31 background-color: darkorchid; 32 color: #ffffff; 33 top: 50%; 34 right: 0; 35 36 } 37 38 </style> 39 </head> 40 <body> 41 <div class="father"> 42 <span class="bar"><</span> 43 <span class="set">></span> 44 45 46 </div> 47 48 </body> 49 </html>