六、定位、定位技巧、层级属性、浮动与定位的对比、表单、表单属性、

最新推荐文章于 2022-10-08 11:37:25 发布

小豆很优秀

最新推荐文章于 2022-10-08 11:37:25 发布

阅读量393

点赞数

分类专栏： HTML的基本信息 HTML5 css 文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_52426181/article/details/110228479

版权

HTML5 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML的基本信息

14 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

一、定位

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>

小豆很优秀

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
六、定位、定位技巧、层级属性、浮动与定位的对比、表单、表单属性、

一、定位1、css的三大布局机制标准流块级元素：垂直方向上一个接一个的排列行级、行块级元素：水平上依次排列（换行或者空格会被解析为一个小空隙）浮动使元素实现水平排列（没有间隙）定位可以使元素自由摆放自己的位置2、定位定位是由定位模式和边偏移属性构成3、偏移属性left 距离左侧的偏移量right 距离右侧的偏移量top 距离顶部的偏移量bottom
复制链接

扫一扫

专栏目录