盒子模型和表单

最新推荐文章于 2023-03-01 20:19:25 发布

mxz_l

最新推荐文章于 2023-03-01 20:19:25 发布

阅读量333

点赞数

文章标签： css3 css html5

本文链接：https://blog.csdn.net/mxz_l/article/details/125227361

版权

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标签（文本域标签），大小可以自行调节