第五章盒子模型和表单 ① 笔记

小丫头爱打盹

已于 2024-04-14 19:06:23 修改

阅读量153

点赞数

分类专栏： # HTML+CSS 文章标签： css3 css html 前端

于 2022-06-11 15:01:58 首次发布

本文链接：https://blog.csdn.net/Liu_wen_wen/article/details/125233280

版权

HTML+CSS 专栏收录该内容

16 篇文章 6 订阅

订阅专栏

第一节.盒子模型

1.1什么是盒子模型

在这里插入图片描述
margin 外填充（外边距）：决定了盒子与盒子(平级盒子，嵌套盒子)之间的距离
border 边框
padding 内填充（内边距）：决定了内容与边框之间的距离
content 内容：width,height

1.2 margin外边距(外填充)

<style type="text/css">
		div{
			border:1px solid red;
			/* 盒子的宽高就是 盒子的内容部分 */
			width:200px;
			height:200px;
			/* 外填充 *//* 主要改变盒子的位置，对盒子内部 没有影响 */
			/* margin:30px; *//* 四个边都是30 */
			/* margin:30px 60px; *//* 上下 左右 */
			/* margin:30px 60px 90px; *//* 上 左右 下 */
			margin:30px 60px 90px 120px;/* 上右下左 顺时针 */
			/* 内填充：内容与边框之间的距离 设置后会改变盒子的大小 */
			/* padding:20px; */
			/* padding:20px 40px; */
			/* padding:20px 40px 60px; */
			padding:20px 40px 60px 80px;
		}
	</style>
</head>
<body>
	<div id="" class="">
</div>
</body>

运行结果如下：
在这里插入图片描述

1.2.1 居中

margin居中
margin:auto;/* 居中效果 */
text-align:center;
< 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调整！

1.3 padding内边距(内填充)

1.4 W3C盒子和IE盒子

盒子模型：
w3c盒子(标准)：
margin 外填充/外边距（两个盒子之间的距离）
border 边框
padding 内填充/内边距（内容与边框之间的距离）
content 内容
四部分相互独立。
IE 盒子：margin border padding content(包含border和padding)
box-sizing:border-box/content-box;切换盒子(IE和w3c)
例如：
盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px，高为
50px
在这里插入图片描述

<!DOCTYPE html >
<html>
	<head>
	<title> New Document </title>
	<meta charset="utf-8">
		<style type="text/css">
			#d1{
				width:200px;
				height:200px;
				background-color:red;
				/*调整盒子模型:ie盒子*/
				box-sizing:border-box;
				border:5px solid black;
				padding:20px;
				margin:50px;
			}
			#d2{
				width:200px;
				height:200px;
				background-color:blue;
				/*调整盒子模型:wc3盒子*/
				box-sizing:content-box;
				border:5px solid orange;
				padding:20px;
				margin:50px;
			}
		</style>
	</head>
	<body>
		<!--盒子模型:ie盒子,wc3标准盒子-->
		<div id="d1">这是一个内容</div>
		<div id="d2">这是一个内容</div>
	</body>
</html>

1.5 案例：页面结构搭建

查看元素的盒子属性:
在这里插入图片描述
(ie浏览器：)

（firefox浏览器：）

页面居中效果


<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<meta name="Generator" content="EditPlus">
		<style type="text/css">
			/*bootstrap:自适应框架*/
			#con{
				width:80%;
				height:500px;
				border:5px solid red;
				/*页面居中*/
				margin:50px auto; /*上下50px 左右auto(自适应)*/
			}
		</style>
		</head>
	<body>
		<div id="con"></div>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html >
<html>
	<head>
		<title> New Document </title>
		<meta charset="utf-8">
		<style type="text/css">
			#con{
				width:800px;
				height:500px;
				border:2px solid red;
				/*页面居中*/
				margin:0px auto;
			}
			#top{
				height:100px;
				background-color:#66ccff;
			}
			#main{
				height:300px;
				background-color:#99ff99;
			}
			#main .left{
				width:200px;
				height:300px;
				background-color:red;
				float:left;
			}
			#main .middle{
				width:300px;
				height:300px;
				background-color:green;
				float:left;
			}
			#main .right{
				width:300px;
				height:300px;
				background-color:blue;
				float:right;
			}
			#foot{
				height:100px;
				background-color:#ff0099;
			}
		</style>
	</head>
	<body>
		<div id="con">
			<div id="top"></div>
			<div id="main">
				<div class="left"></div>
				<div class="middle"></div>
				<div class="right"></div>
			</div>
			<div id="foot"></div>
		</div>
	</body>
</html>

在这里插入图片描述

第二节：浮动框架

iframe: 就是页面中嵌套的一个子浏览器窗口
< a href=“” target=“aaa” >< /a>
< iframe name=“aaa” src=“默认显示的页面”>< /iframe> 此标签就表示浮动框架
超链接的target指明页面在哪个窗口显示

<!DOCTYPE html >
<html>
	<head>
	<title> New Document </title>
	<meta charset="utf-8">
	<style type="text/css">
		iframe{
			width:100%;
			height:500px;
			border:none;
		}
	</style>
	</head>
	<body>
		<a href="page1.html" target="mywin">页面1</a>
		<a href="page2.html" target="mywin">页面2</a>
		<a href="page3.html" target="mywin">页面3</a>
		<!-- <a href="page1.html" >页面1</a>
		<a href="page2.html" >页面2</a>
		<a href="page3.html" >页面3</a> -->
		<hr/>
		<!--浮动框架/浮动窗口/内联框架
		name:定义窗口名，用于超链接的target属性
		src: 定义窗口初始显示的页面
		-->
		<iframe name="mywin" src="page3.html"></iframe>
	</body>
</html>

浮动框架的应用：
在这里插入图片描述

第三节：定位

2.1 什么是定位

将元素放到页面中的指定位置上。任意放置。绝对定位和固定定位会脱离文档流。

2.2 position 定位

2.2.1 静态定位static

默认值，标准文档流的方式，流式布局，块状元素从上往下，行内元素从左到右。

2.2.2 相对定位 relative

相对定位：相对于自己本身原有的位置，发生偏移。没有脱离文档流
偏移：设置 top(距离顶部),left(距离左边) ,right(距离右边),bottom(距离底部)

	<style type="text/css">
		div{
			border:2px solid red;
			height:100px;
		}
		.d2{
			/*相对定位:受文档流的影响，本身位置不会被占用*/
			position:relative;
			/*设置位置偏移*/
			left:10px; /*距离左边20*/
			top:20px; /*距离上边20*/
			/*right:20px; 距离右边20*/
			/*bottom:50px; 距离下边50*/
		}
</style>
<body>
	<div class="d1">DIV1</div>
	<div class="d2">DIV2</div>
	<div class="d3">DIV3</div>
</body>

在这里插入图片描述

2.3.3 绝对定位absolute

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

2.3.4 固定定位fixed

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

2.3 案例

祝福墙

	/* 渐变色 */
	/* radial-gradient径向渐变 */
	background-image: radial-gradient(circle, red, yellow, green);
	/* linear-gradient 线性渐变 */
	background-image:linear-gradient(15deg,blue,green,white,yellow,pink,black,purple);
	/*形状变化*/
	transform: rotate(0deg) scale(1.1,1.3);
	/*补间动画*/
	transition: transform 1s;

在这里插入图片描述
小结：
掌握盒子模型的组成，各个部分的使用
相对定位/绝对定位/固定定位。
页面布局不是由单一的定位方式完成的，是由几种定位方式共同完成。
浮动用来布局整体页面模块的划分。
定位：写其中的某一部分特殊位置的模块

第四节：表单

表单:收集用户数据，提交给服务器。注册，登陆，添加商品
在这里插入图片描述

1.表单概述

概念：收集用户信息并且将信息发送给指定的服务器程序处理。

2.表单的创建/使用

<form action="" method=“get/post">
表单元素
</form>

在页面中没有具体的显示效果。
表单中的属性：
action 行动/行为 action=“url”
url 统一资源占位符。
表示表单提交的地址。指定处理该表单的服务器程序。
https://www.baidu.com/?username=12345&pword=asdfg&sex=on&file=
http://协议
www.baidu.com 域名 —》对应一个ip地址作用：在网络环境中定位主机。
端口号：定位主机服务。
method 方法：表单提交的方法
method = “get/post”; 默认为get
此属性告诉浏览器如何将数据发送给服务器，它指定向服务器发送数据的方法(用
post方法还是用get方法)。
如果值为get，浏览器将创建一个请求，该请求包含页面URL、一个问号和表单的
值。浏览器会将该请求返回给URL中指定的处理程序，以进行处理。值与值之间是通过
&符号连接：
https://www.baidu.com/?username=12345&pword=asdfg&sex=on&file=
？分割链接与数据。值与值之间是通过&符号连接。不安全的
如果将值指定为post，表单上的数据会作为一个数据块发送到处理程序，而不使用请
求字符串。语法为：method = (get | post)；相对安全!
multiple 多个当有文件上传时，用于允许上传多个文件。

3.表单常用标签和属性

3.1 input 标签

<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 提交
html5中新增了一些类型：
在这里插入图片描述
表单元素的作用域：起作用的区域。

3.2 select&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"/><br/>
			密码：<input type="password" required placeholder="请输入密码" name="password" /><br/>
			性别：<input type="radio" name="sex"/>男 <input type="radio" checked name="sex" />女<br/>
			爱好：	<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>

在这里插入图片描述