来源于从网页搭建入门Java Web
好多基础的东西都忘记了,补起来!!
浮动
float
脱离文档流,但不会脱离文字流
清除浮动,让其回归到文档流中
- 法一 对父容器添加
overflow: hidden
css属性
- 法二 对父容器伪类
after
进行css属性设置(注意,伪类一定要设置content
属性)
- 法三 在浮动元素后添加一个
div
标签并设置属性
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| .container::after { content: "."; display: block; height: 0; visibility: hidden; clear: both; zoom: 1
.container>.clear-fix { content: "."; display: block; height: 0; visibility: hidden; clear: both; }
|
定位
static
- 使元素定位于常规/自然流中
- 忽略top,right,bottom,left,z-index属性
- 两个元素的margin等于最大的那个
- 具有固定width,height的元素,设左右margin为 auto,margin会自动扩大填满剩余宽度(居中)
relative
- 脱离常规/自然流,但是在其中仍有他的位置
- 使其变成定位祖先元素(和absolute相关)
- 他的后代都可以相对于他进行绝对定位(absolute)
- 用top等定位是相对于其在常规流中的位置
- 使浮动元素产生偏移 (top…),控制偏移顺序 (z-index)
![](image1.png)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .container>div { width: 100px; height: 100px; background: #f0f0f0; border: 1px solid #000; text-align: center; line-height: 100px; position: relative; box-sizing: border-box;
float: left; z-index: 5; } .container>div:nth-child(2) { left: -50px; z-index: 1; } </style> </head> <body> <div class="container"> <div>A</div> <div>B</div> <div>C</div> </div> </body> </html>
|
- absolute
- 脱离常规流
- 未设置大小则会填充最近的定位祖先元素(relative)
- 尺寸设为百分比时相对的使其最近的定位祖先元素
- 居中技巧
![](image2.png)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .parent { position: relative; width: 200px; height: 200px; background: #f0f0f0; } .child { width: 80px; height: 80px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #000; } </style> </head> <body> <div class="parent"> <div class="child"> </div> </div> </body> </html>
|
- fixed
- 和absolute区别,相对于视窗做绝对定位
- 继承absolute特点
- 居中技巧
![](image3.png)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
| <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> html, body { margin: 0; } .page { width: 100%; height: 5000px; background: #f0f0f0; }
.login { position: fixed; width: 300px; height: 200px; background: #555; top: 50%; left: 50%; margin-left: -150px; margin-top: -100px; } </style> </head> <body> <div class="page"> <div class="login"></div> </div> </body> </html>
|
如何遍历JavaScript对象的值
1 2 3 4
| var obj = {name: "aaa", age: 12} for (key in obj) { console.log(obj[key]); }
|
一些忘记的基础api
- 三种提示框
alter
prompt
confirm
- 对窗口window进行操作
- open
- close
- moveTo
- resizeTo
- 获取屏幕大小
- window.screen.availWidth
- window.screen.availHeight高度
写在最后
因为有前端基础,所有这部分就快速地过了一遍,比较java工程师技能树里前端不是非常重要的的,课程要求写页面,所有我就非常认真地写了,纯html+css,没有js,第一个用到了flex布局,觉得蛮好用的,第二个了解到了rgba
的用法,css三角形的绘制,用到了scss这种css增强型语言,解决复杂页面样式简直就是利器,没有搭建gulp或者webpack环境,直接用intellij IDEA自带的file watcher编译的,效果如下,源码链接
![](image4.png)
![](image5.png)
后面主攻java了,加油!!!