第一节.盒子模型
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"/><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>
// A code block
var foo = 'bar';
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/118180.html