三、盒子模型和表单

最新推荐文章于 2024-05-21 18:20:21 发布

LeicyII

最新推荐文章于 2024-05-21 18:20:21 发布

阅读量120

点赞数

分类专栏：尚硅谷前端学习文章标签： html css css3

本文链接：https://blog.csdn.net/leicyii/article/details/125196933

版权

尚硅谷前端学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

@[TOP] 盒子模型和表单

第一节盒子模型简介

1.1 盒子模型属性

margin 外填充（外边距): 决定了盒子与盒子之间的距离
两个值：上下左右
三个值: 上左右下
border 边框
padding 内填充（内边距）:决定了内容与边框之间的距离
content 内容

1.2.1 margin 居中

margin:auto/* 居中效果*/
text-align:center;

1.2.2 盒子距离

水平盒子：
        两者margin之和（左侧盒子的右侧margin ，右侧盒子的左侧margin）不管是display还是float都一样。
垂直盒子：
        普通块状元素：取两者较大值（上边盒子的下侧margin,下边盒子的上侧margin）
        浮动元素：两者margin之和（上边盒子的下侧margin ，下边盒子的上侧
margin）
行内元素的margin：a span input img
        a和span标签在垂直方向的Margin和padding没有起作用。水平可以
        img和input标签在垂直方向和水平方向都可以使用。
推荐：包含盒子之间的位置关系（垂直方向）推荐使用padding调整！

第二节：浮动框架

iframe:

就是页面中嵌套的一个子浏览器窗口

< a href="" target="aaa" >< /a>
 < iframe name="aaa" src="默认显示的页面">
 < /iframe> 
此标签就表示浮动框架 超链接的target指明页面在哪个窗口显示

1、定位方式

静态定位 static
默认值，标准文档流的方式，流式布局，块状元素从上往下，行内元素从左到右。
相对定位 relative
相对定位：相对于自己本身原有的位置，发生偏移。没有脱离文档流偏移：设置 top(距离顶部),left(距离左边) ,right(距离右边),bottom(距离底部)
绝对定位 absolute

1.如果没有：以浏览器窗口左上角原点为基准，偏移。 
2.如果定位：以已经定位的父(不仅仅是直接父亲还包含以上元素)元素为基准，偏移。
包含块: 设置postion属性为relative,absolute,fixed任意一种，那么该容器就变为了包含块。 那么此时，包含块中的子元素，
进行定位偏移的时候,会以包含块为基准进行偏移。 一般推荐用relative属性作为包含块设置。
absolute,fixed会脱离文档流，没法自动居中 
偏移：设置 top(距离顶部),left(距离左边) ,right(距离右边),bottom(距离底部)

固定定位fixed
固定定位：将元素固定在页面中的某个位置上，不随页面的滚动而滚动。案例：见课堂案例

第三节：表单

表单:收集用户数据，提交给服务器。注册，登陆，添加商品

3.1 input属性

属性：
name：表单元素的名称 区分表单元素。 
	value: 表单元素的初始值 一般指 text/password 
	checked: 单选或者多选中的默认选中项 checked="checked/true" 
	selected: 下拉框中的默认选中项 
	placeholder 输入提示语 
	readonly 只读属性
	disabled 失效 可以用于按钮和选项
	required 必填验证 
html中：
	type: 确定输入的类型 
	text 任意文本 
	password 密码 
	radio 单选 
	checkbox 多选/复选
	image 图片类型 
	button 按钮
	file 文件 
	hidden 隐藏
	reset 清空/重置 
	submit 提交

3.2select&option标签

<select> 
<option></option> 
</select>

3.3 textarea标签

<textarea cols="" rows=""></textarea> 
<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
</head> 
<body>
 <!-- 表单使用：form标签在页面上没有任何效果展示 
 form表单属性： action="URL" URL表示请求发送的路径 
 URL:统一资源定位符 http://www.baidu.com?username=张三&password=12345&file=123.txt http:// 网络协议 www.baidu.com
域名====》对应IP地址
? 分隔符 分割 域名与数据
 username=张三 请求携带的数据
& 分隔多个数据。
method 方式方法 ：表示表单提交的方法
method="get/post" get默认值
get:如果是get方式 会将数据追加到 浏览器的地址栏中 不好，
1.不安全
2.可以提交的数据有限制 大小
post: 相对安全
是以数据块的形式向服务器发送数据。
作用域：起作用的区域/范围。
表单元素：
<input />输入框
属性：
type: 类型 通过给type不同的属性值，来控制input的输入类型。默认text
h5之前的值：
text :任意文本类型
password :密码类型 非明文
radio :单选类型
checkbox :复选 /多选
button :普通按钮
image :图片
hidden :隐藏 有一些属性，我们需要把它发送到后台，但是又不
file :文件
reset :清空/重置
submit :提交
h5之后新增：
time
date
datetime
datetime-local
color
range
week
month
number
name 名字：用来区分表单元素的值。
value 值 ：表单元素的值 也可以用来设置表单元素的初始值
readonly : 只读
disabled : 失效
placeholder:输入提示
maxlength: 输入的最大长度
required : 必填项验证
checked : 默认被选中 (单选框/复选框中使用)
selected : 下拉框中的默认选中项
readonly="readonly/true"
disabled="disabled/true"
 true真 /false假
 <select></select>下拉框
<option></option>下拉框中的选项
<select>创建可供选择的下拉框
<option>--请选择--</option>下拉框中的选项
<option>郑州</option>
<option>广州</option>
<option disabled>兰州</option>
<option selected>惠州</option>
<option>杭州</option>
</select>
<textarea></textarea>多行文本框
-->
<form action="http://www.baidu.com" method="get">
用户：<input type="text" name="username" value="12345" maxlength="6"/><b
密码：<input type="password" required placeholder="请输入密码" name="passw
性别：<input type="radio" name="sex"/>男 <input type="radio" checked name
爱好：<input type="checkbox">听歌
<input type="checkbox" checked>跳舞
<input type="checkbox">rap <br/>
上传文件：<input type="file" name="file"><br/>
<input type="button" disabled value="普通按钮"/><br/>
<input type="image" src="../../images/4.gif"/><br/>
<input type="hidden" name="hid" value="你好哈哈哈">
<input type="reset" value="清空"/>
<input type="submit" value="提交"/>
<h1>=======================================</h1>
time:<input type="time"><br/>
date:<input type="date"><br/>
datetime-local:<input type="datetime-local"><br/>
month:<input type="month"><br/>
week:<input type="week"><br/>
color:<input type="color"><br/>
range:<input type="range"><br/>
<!-- min:最小 max:最大 step:间隔 -->
number:<input type="number" min="5" max="10" step="2"><br/>
<select><!-- 创建可供选择的下拉框 -->
<option>--请选择--</option><!-- 下拉框中的选项 -->
<option>郑州</option>
<option>广州</option>
<option disabled>兰州</option>
<option selected>惠州</option>
<option>杭州</option>
</select>
<textarea cols="5" rows="5"> </textarea>
</form>
</body> 
</html>