前端入门学习之表单元素列举和图片居中的方法——day04

最新推荐文章于 2024-05-02 14:20:31 发布

Serien、

最新推荐文章于 2024-05-02 14:20:31 发布

阅读量277

点赞数

分类专栏： html/css 文章标签： html css

本文链接：https://blog.csdn.net/weixin_44194443/article/details/115378355

版权

本文介绍了前端开发中如何实现图片居中，包括使用text-align和margin属性。还探讨了CSS的margin应用，例如水平居中和调整边距。接着分析了块级、内联及内联块元素的特性，并讨论了display属性在框类型转换中的作用。此外，文章详细讲解了HTML表单元素，如input、select和textarea，以及表单的属性和用法。

摘要由CSDN通过智能技术生成

图片居中

给图片父级加text-algin加center;
padding-left;
img{display:block;margin:0 auto;}

margin应用

实现已知宽度的块元素水平居中:margin:0 auto;
auto浏览器自动计算,参考父元素和元素宽度
margin-top:-1px;表示缩短边框之间距离;

元素特性分析

块级元素:
1. 独占一行;
2. 默认宽度100% (未定宽度的情况下,总占位为100%);
3. 支持宽高,行高四个方向的padding,margin,line-height
  1. 基本所以css属性
4. div,h1-h6,p,ul,ol,li,dd,dt,dl,hr
内联元素:
1. 可以在一行排列
2. 默认不支持宽高和行高,不支持垂直方向的margin值和padding值
3. 代码视图的折行,空格会引起间隙问题(给父元素加font-size:0;消除间隙)
4. 适应内容,宽度由内容撑开
5. Span,a,strong,b,i,del,em,sup,sub
内联块元素(行级块):
1. 既支持宽高,又可以在一行排列
2. img;
text-align,text-indent:适用于块元素\内联块

框类型转换display

block显示为块;
inline-block显示为内联块;
inline显示为内联;
常用场景:
1. 内联转换为块或者内联块,如实现a标签有宽高,并列排序;
2. 块转化为内联块

表单

作用:收集不同类型的用户输入;
表单区域:
1. form
2. 将我们收集到的数据信息提交给数据处理程序;
3. 一个文档可以有多个表单,但表单不能嵌套;
表单元素:
1. input:空元素
  1. type类型不同,表示的意义不同:
    1. type="text"表示单行文本输入框(文本域);
    2. type="password"表示密码输入框(密码域)-默认掩码处理;
    3. type="radio"表示单选按钮🔘
      1. 指定同一个name属性,组成单选按钮组
    4. type="checkbox"表示复选框;
    5. type="button"表示普通按钮;
    6. type="submit"表示提交按钮:带有提交功能;
    7. type="reset"表示重置按钮:清空所有表单元素的值;
    8. type="image"表示图像域,另一种类型的提交按钮;
    9. type="file"文件域上传文件;
    10. type="hidden"隐藏域:无显示;
2. select:列表菜单:option选项;
3. textarea文本区域:多行文本输入框,默认用户可以重置大小;
4. 表单:
  1. 给表单元素添加标注或者注解;
  2. 通过for="id名称"属性绑定表单元素,点击label也可以使表单元素处于[获取焦点状态]
  3. 内联元素
表单元素的相关属性:
1. 内联块: 可以在一行排列,支持宽高;
2. name="" :表单元素的名称,作为数据的键名;
3. value=""属性初始值+按钮上的文字;
4. action=""跳转页面;
5. checked:单选框和复选框处于选中状态;
6. disable:处于禁用状态,颜色置灰,不可提交数据;
7. readonly:只读,不可以修改,但可以提交数据;
8. placeholder="": 输入提示占位符;(ie9以下不支持);
9. selected:适用于option,让选项处于预选定状态;
10. size=“3”:可以用于指定select可显示的选项个数,默认为1;
11. maxlength=“10”:允许输入的最长字符数;
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset
```