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

最新推荐文章于 2022-12-27 16:03:57 发布

VIP文章 Serien、

最新推荐文章于 2022-12-27 16:03:57 发布

阅读量231

点赞数

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

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

版权

图片居中

给图片父级加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
```

最低0.47元/天解锁文章

Serien、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端入门学习之表单元素列举和图片居中的方法——day04

图片居中给图片父级加text-algin加center;padding-left;img{display:block;margin:0 auto;}margin应用实现已知宽度的块元素水平居中:margin:0 auto;auto浏览器自动计算,参考父元素和元素宽度margin-top:-1px;表示缩短边框之间距离;元素特性分析块级元素:独占一行;默认宽度100% (未定宽度的情况下,总占位为100%);支持宽高,行高四个方向的padding,margin,line-h
复制链接

扫一扫