1.盒子模型
1.1 什么是盒子模型
(1)margin 外填充(外边距):决定了盒⼦与盒⼦(平级盒⼦,嵌套盒⼦)之间的距离,主要改变盒子的位置,对盒子内部没有影响
margin:30px; 四个边都是30
margin:30px 60px; 上下 左右
margin:30px 60px 90px; 上 左右 下
margin:30px 60px 90px 120px; 上右下左 顺时针
border 边框
padding 内填充(内边距):决定了内容与边框之间的距离,设置后会改变盒子的大小
padding:20px;
padding:20px 40px;
padding:20px 40px 60px;
padding:20px 40px 60px 80px;
(padding后边值代表的方向与上方margin相同)
content 内容:width,height
(2)margin的居中效果
margin:0px auto;能使盒子水平居中,0px可以改变
(3)盒子之间的距离
水平盒子:
⽔平盒⼦间距是两者margin之和 (左侧盒⼦的右侧margin ,右侧盒⼦的左侧
margin)不管是display还是float都⼀样。
垂直盒子:
普通块状元素:取两者较⼤值(上边盒⼦的下侧margin,下边盒⼦的上侧margin)
浮动元素:两者margin之和 (上边盒⼦的下侧margin ,下边盒⼦的上侧
margin)
行内元素margin:
a和span标签在垂直⽅向的margin和padding不起作⽤,⽔平会起作用。
行内块元素margin:
img和input标签在垂直⽅向和⽔平⽅向都可以使⽤。
包含盒子(嵌套盒子)之间的位置关系(垂直方向)推荐使用padding调整
1.2 W3C盒子和IE盒子
(1)W3C盒子
margin、border、padding、content四部分相互独立
(2)IE盒子
margin、border、padding、content(cntent包含border和padding)
当一个盒子的margin、padding、border、content四部分都设定好后,标准W3盒子需要占据的位置是margn*2+border*2+padding*2+宽(或高),而IE盒子需要占据的位置是margin*2+宽(或高)。W3C盒子的实际大小是border*2+padding*2+宽(或高),IE盒子实际大小是设定的宽(或高)。
(3)两种盒子之间的切换
box-sizing:border-box/content-box;
2.浮动框架
iframe: 就是⻚⾯中嵌套的⼀个⼦浏览器窗⼝
< a href="" target="aaa" >< /a>
< iframe name="aaa" src="默认显示的⻚⾯">< /iframe> 此标签就表示浮动框架
超链接的target指明⻚⾯在哪个窗⼝显示
3.定位
3.1 什么是定位
将元素放到页面的指定位置上,任意放置。
3.2 定位(position)
(1)静态定位static
默认的定位方式,标准文档流方式,流式布局,块状元素从上往下,行内元素从左到右,一行占满后另起一行。
(2)相对定位relative
相对于自己本身的位置发生偏移,没有脱离文档流,本身位置不会被占用。
偏移:设置 top(距离顶部),left(距离左边) ,right(距离右边),bottom(距离底部)
(3)绝对定位
先判断父(不仅仅是直接父亲还包含以上元素,直到body元素)元素有没有进行定位(相对定位、绝对定位、固定定位)
1)如果父元素没有定位:以浏览器窗口左上角原点为基准进行偏移。
2)如果父元素有定位:以已经定位的父元素为基准偏移。
包含块:设置postion属性为relative,absolute,fixed任意⼀种,那么该容器就变为了包含块。
那么此时,包含块中的⼦元素,进⾏定位偏移的时候,会以包含块为基准进⾏偏移。⼀般推荐⽤relative属性作为包含块设置(布局原则:外相内绝)。
绝对定位有些类似于浮动效果,当仍有区别,浮动并不是完全脱离文档流,绝对定位会完全脱离文档流,跑到另外一个层次上,不在文档中占据位置。
(4)国定定位fixed
将元素固定于页面中的某个位置上,元素不随页面的滚动而滚动。
4.表单
表单用于收集用户数据,将用户数据信息提交给指定的服务器。例如网站的注册登录页面。
4.1 表单创建、使用
<body>
<form action="" method=“get/post">
<!--form是表单的根元素
action:设置提交的目标地址
method:提交方式
get(地址栏可以看到数据) 这种方式并不安全,且可以提交的数据有限制大小
post(地址栏看不到数据) 相对安全,是以数据块的形式向服务器发送数据
-->
表单元素
</form>
</body>
4.2 表单常用标签和属性
(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新增的类型:
color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
(老式的浏览器不支持html5新增的输入类型,会被视为text类型)
(2)select和option标签(下拉框标签)
<select>
<option></option>
<option></option>
</selcet>
(3)textarea标签(文本域标签),大小可以自行调节
<textarea cols="" rows=""></textarea>