一、定位
1、css的三大布局机制
- 标准流
- 块级元素:垂直方向上一个接一个的排列
- 行级、行块级元素:水平上依次排列(换行或者空格会被解析为一个小空隙)
- 浮动
- 使元素实现水平排列(没有间隙)
- 定位
- 可以使元素自由摆放自己的位置
2、定位
定位是由定位模式和边偏移属性构成
3、偏移属性
- left 距离左侧的偏移量
- right 距离右侧的偏移量
- top 距离顶部的偏移量
- bottom 距离底部的偏移量
常见的值: px | % | auto(默认值) | inherit
4、定位的常见属性值
position:static | relative | absolute | fixed;
(1)static
静态定位,用于取消元素的定位时使用
注意:设置偏移属性及z-index属性不生效
(2)relative
相对定位
相对定位是相对于自己原来所在的位置来进行偏移的
特性:
- 提升层级
- 不脱标(不脱离文档流、老家留坑),下方的兄弟元素会将元素原来的位置当做标准流来进行处理
应用场景:
- 微调元素位置
- 跟绝对定位配合使用
(3)absolute
绝对定位
特性:
- 脱离文档流
- 相对于定位父元素来进行定位的(移动的),如果没有定位父元素,会一直往上寻找,直到根元素为止
- 提升层级
- 设置了绝对定位的块级元素,如果设置了宽度按照设置的宽度来显示,如果没有设置宽度,会变成宽度自适应
- 设置了绝对定位行级元素,可以支持宽高
应用场景
-
子绝父相
子元素添加绝对定位,父元素添加相对定位,给子元素设置偏移属性
(4)fixed
固定定位,是一种特殊的绝对定位
固定定位是相对于浏览器窗口来进行定位的
二、定位技巧
子元素在父元素中处于绝对居中的位置
1、margin负值实现绝对居中
关键步骤:
- 子绝父相
- 给子元素设置偏移属性(left:50%;top:50%)
- 给子元素设置margin-left:-自身宽度的一半;margin-top:-自身高度的一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
position: relative;
width: 500px;
height: 500px;
background-color: lightblue;
}
.box {
position: absolute;
left: 50%;
margin-left: -43.5px;
top: 50%;
margin-top: -43.5px;
width: 87px;
height: 87px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
2、margin:auto实现绝对居中(ie8以上)
关键步骤:
- 子绝父相
- 设置四个方向的偏移属性为0
- margin:auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
position: relative;
width: 500px;
height: 500px;
background-color: lightblue;
}
.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 87px;
height: 87px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>
前景图(img)和背景图的区别:
- 是否有实际含义:前景图一般是有实际含义的(广告图、商品详情图、轮播图),背景图一般是没有实际含义的,只是起到装饰作用
- 书写位置:前景图写在body中,背景图是写在样式表中
- 是否重复:前景图默认不重复不平铺、背景图默认是重复和平铺的
- 是否占位:前景图是占位的,而背景图是不占位的
- 是否能被搜索引擎搜索到: 前景图可以被搜索引擎搜索到,而背景图不可以
内联元素(行级)支持宽高的属性有哪些?
display:block | inline-block;
float:left | right;
position:absolute | fixed;
三、层级属性
z-index:正值 | 负值 | 0;
如果有多个定位元素堆叠时会出现层级问题
z-index的值越大,层级越高
默认所有的定位元素的z-index的值为0
注意:
当元素设置了相对定位、绝对定位以及固定定位时可以设置z-index这个属性,静态定位、浮动与标准流中的元素设置z-index无效
四、浮动与定位的对比
1、可以脱离文档流的属性
- float:left | right
- position:absolute | fixed;
2、不同
- 浮动会脱离文档流,但是不脱离文本流
- 定位既脱离文档流,也脱离文本流
3、注意
所有的元素都可以设置以上属性,设置了以上属性后不再区分行级元素、块级元素、行块级元素,都拥有相同属性(可以支持宽高)
五、表单
1、表单的作用
搜集用户信息
2、表单域
form标签用来定义表单域,表单域中的所有内容都会跟随表单域一起提交到服务器
<form></form>
注意:
- 同一个页面中可以有多个form
- form与form之间不能嵌套
3、表单元素
input 输入的意思
<input type="">
type属性用来设置不同的输入类型
(1)text
单行文本输入框,例如:输入姓名、昵称、手机号等
<input type="text">
(2)password
密码框,默认有掩码处理
<input type="password">
(3)radio
单选框
<input type="radio">
(4)checkbox
复选框
<input type="checkbox">
(5)submit
提交按钮
<input type="submit">
(6)reset
重置按钮
<input type="reset">
(7)button
普通按钮
<input type="button">
<!-- button默认是提交按钮 -->
<button>按钮</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
(8)file
文件上传按钮
<input type="file">
注意:
如果实际开发中需要使用文件上传,那么需要给form标签添加enctype属性
<form enctype="multipart/form-data">
<input type="file">
</form>
enctype属性是用来设置表单域在提交时是否需要对里面的所有信息进行编码处理
multipart/form-data 代表不进行任何编码处理
(9)image
图片形式的提交按钮
<input type="image" src="图片路径" alt="替换文本">
注意:src是必须设置的,建议搭配alt一起使用
(10)hidden
隐藏域,对用户来说是不可见的
<input type="hidden">
下拉列表
<select>
<option>列表项1</option>
<option>列表项2</option>
<option>列表项3</option>
......
</select>
注意:一组select中至少应该包含一对option
文本域
<textarea cols="30" rows="5"></textarea>
cols 设置文本域的可见宽度
rows 设置文本域的可以输入的行数
label标签
扩大选区
方法一:直接嵌套
<label><input type="radio">男</label>
<label><input type="radio">女</label>
方法二:for的值跟id值绑定就可以了
<input type="checkbox" id="sleep">
<label for="sleep">睡觉</label>
六、表单属性
1、action属性
定义表单的提交地址
<!-- <form action="https://www.baidu.com"> -->
<form action="#">
<div>
<input type="text">
</div>
<input type="submit">
</form>
2、method属性
定义表单提交时用到了什么http方法
<form method="GET | POST"></form>
-
GET 默认的提交方式
不安全的
https://www.baidu.com?username=123456789&usernc=qwertyuio&userpass=111111&hid=#
-
POST
比较安全的
from 提交的 get 和 post 的区别(了解)
(1)get 是用来从服务器上获得数据,而 post 是用来向服务器上传递数据。
(2)get 将表单中数据的按照 variable=value 的形式,添加到 action 所指向的 URL 后
面,并且两者使用“?”连接,而各个变量之间使用“&”连接;post 是将表单中的数据
放在 form 的数据体中,按照变量和值相对应的方式,传递到 action 所指向 URL。
(3)get 是不安全的,因为用户可以在浏览器上直接看到提交的数据,一些系统内部消
息将会一同显示在用户面前。post 的所有操作对用户来说都是不可见的。
(4)get 传输的数据量小,这主要是因为受 URL 长度限制;而 post 可以传输大量的数据,
所以上传文件只能使用 post。
(5)get 是 form 的默认方法。
3、name属性
给表单域或者表单元素起名字
<div>
姓名: <input type="text" name="username">
</div>
<div>
昵称: <input type="text" name="usernc">
</div>
实现单选按钮只选一个的操作
<div>
性别: <input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex">保密
</div>
4、value属性
设置表单元素的初始值
<div>
姓名: <input type="text" name="username" value="请输入姓名">
</div>
<div>
<input type="hidden" name="hid" value="能看见我吗?">
</div>
提交按钮在不同浏览器下显示的按钮文字不统一(下图是ie中的显示效果)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-feQ2gUVl-1606454127741)(c:/Users/Administrator/AppData/Local/cts/image/201123171516425.png)]
可以使用value来进行统一
<input type="submit" value="注册">d
5、checked属性
设置单选框和多选框的默认选中
<div>
性别: <input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女
<input type="radio" name="sex">保密
</div>
<div>
爱好: <input type="checkbox" name="hobby" >敲代码
<input type="checkbox" name="hobby" >好好敲代码
<input type="checkbox" name="hobby" checked>努力敲代码
</div>
checked等同于checked=“checked”
6、selected属性
设置下拉列表的默认选中项
<select name="city">
<option value="北京">北京</option>
<option value="成都">成都</option>
<option value="吉祥村" selected>吉祥村</option>
</select>
selected等同于selected=“selected”
7、readonly属性
设置只读,只能看不能修改,不能输入
<input type="text" name="username" value="请输入姓名" readonly>
8、disabled属性
设置禁用,不仅不能修改,还不能提交
<input type="text" name="usernc" value="请输入昵称" disabled>
9、maxlength属性
设置最大输入长度的
<input type="text" maxlength="10">
10、size属性
设置下拉列表的可见项数
<select name="city" size="2">
<option value="北京">北京</option>
<option value="成都">成都</option>
<option value="吉祥村" selected>吉祥村</option>
</select>