1. 盒子模型
1.1 margin外边距(外填充)
margin:上边距 右边距 下边距 左边距(设置了4个边距)
margin:上下边距 左右边距(设置2个边距)
margin:上边距 左右边距 下边距(设置3个边距)
margin:上右下左同时设定(设置1个边距)
1.2 margin居中
margin:auto;居中效果
text-align:center;
1.3 盒子距离
如果两个盒子水平,那么它们之间的距离为两者之间的margin值的和(即左边的右侧margin加上右边的左侧margin)
如果两个盒子垂直,那么它们之间的距离取上边盒子下侧margin与下边盒子的上侧margin的较大值。
如果为浮动的元素,则依然为两者距离之和。
推荐:盒子之间的位置关系(垂直方向)推荐使用padding调整。
1.4 padding内边距(内填充)
padding为盒子内部元素到盒子边框的距离。其四个属性的设定顺序和margin相同分别是:上、右、下、左。
1.5 W3C盒子和IE盒子
1.5.1 w3c盒子(标准盒子模型):
margin 外填充/外边距(两个盒子之间的距离)
boorder 边框
padding 内填充/内边距(内容与边框之间的距离)
content 内容
四部分相互独立。
1.5.2 IE盒子
margin border padding content(包含border和padding)
box-size:border-box/content-box;切换盒子(IE和w3c)
2.浮动框架
2.1 iframe
iframe:就是页面中嵌套一个子浏览器窗口
用法如下:
<a href="" target="目标窗口名称(111)"></a>
<iframe name="窗口名称(111)" src=“默认显示的页面”></iframe>
表示在点击超链接标签后将会在111窗口中显示超链接的内容。
3.定位
3.1 什么是定位?
将元素放到页面的指定位置上。任意防止。绝对定位和固定定位会脱离文档流。
3.2 position定位
3.2.1 静态定位static
默认值,标准文档流的方式,流式布局,块状元素从上往下,行内元素从左到右。
3.2.2 相对定位relative
相对定位:相对于自己本身原有的位置,发生偏移。没有脱离文档流。
偏移:设置top,left,right,bottom
3.2.3 绝对定位absolute
绝对定位:先判断父(不仅仅是直接父亲还包含以上元素)元素没有进行定位(相对定位,绝对定位,固定定位)
1)如果没有:以浏览器窗口左上角原点为基准,偏移。
2)如果定位:以已经定位的父(不仅仅是直接父亲还包含以上元素)元素为基准,偏移。
包含块:容器设置position属性为relative,absolute,fixed任意一种,那么该容器就变为了包含块。此时,包含块中的子元素,进行定位偏移的时候,会以包含块为基准进行偏移。
一般推荐用relative属性作为包含块设置。absolute,fixed会脱离文档流,没法自动居中。
偏移:设置top,left,right,bottom
3.2.4 固定定位fixed
固定定位:将元素固定在某个页面中的某个位置上,部随页面的滚动而滚动。
/* 渐变色 */
/* 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);
/*补间动画*/8transition: transform 1s;
4.表单
表单:收集用户数据,提交给服务器。注册,登录,添加商品。
4.1 表单概述
概念:收集用户信息并将信息发送给指定的服务器程序处理。
4.2 表单的创建/使用
<form action="" method="get/post">
表单元素
</form>
4.3 常用标签和属性
<input /> 标签
属性:
name:表单元素的名称 区分表单元素。
value:表单元素的初始值 一般指 text/password
checked:单选或多选中的默认选中项 checked="checked/true"
selected:下拉框中的默认选中项
placeholder:输入提示语
readonly:只读属性
disabled:失效 可以用于按钮和选项
requried:必填验证
html中:
type:确定输入的类型
text:任意文本
password:密码
radio:单选
checkbox:多选/复选
image:图片类型
button:按钮
file:文件
hidden:隐藏
reset:清空/重置
submit:提交
html5中新增了一些类型:
color:颜色
date:日期
datetime:日期时间
datetime-local:从当前的日期时间开始
month:月份
number:数字
range
search
tel
time
url
week
<select>&<option>标签:下拉选择标签
<select>
<option>选择的内容</option>
<option>选择的内容</option>
</select>
<textarea>标签:用于生成一个设定的文本区域
<textarea cols="设定行" rows="设定列"></textarea>