HTML

35s

于 2021-02-17 16:39:35 发布

阅读量286

点赞数 1

分类专栏：前端基础

本文链接：https://blog.csdn.net/qq_40429067/article/details/113835245

版权

4 篇文章 0 订阅

订阅专栏

在html中div、 p、hx、form、ul 、 li、dl、dd就是块级元素。css属性设置display:block就是将元素显示为块级元素。块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行；（一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置；
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

在html中，span、a、label、input、 strong 和em就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。内联元素特点：
1、和其他元素都在一行上；
2、元素的宽度就是它包含的文字或图片的宽度，不可改变。

注意：为 a 元素设置了宽和高，但都没有起到作用，原因是a在默认的时候是内联元素，内联元素是不可以设置宽和高的。

内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。inline-block元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。

注意：img是inline元素，但是他同时也是替换元素，他有着特殊的表现：

1. 可以设置width/height;
1. 默认的，img元素在屏幕占据的空间与其图片的实际像素一致，除非CSS有设置或者自身的width/height HTML 属性有设置；
1. 如果img标签的包裹元素为也为inline元素，则img的边界可以超出其直接父元素的边界，直到自己的宽、高达到最大或者设定值为止，而且文档流中img的兄弟元素也不能遮盖住img。最常见的就是a里面包含的img；
1. 所以从行为上看,img元素作为替换元素，有着类似于Inline-block的行为，尽管在SPEC里面，他的确是一个inline元素。

form标签里面嵌套表单，可以实现表单里面按钮的具体功能，比如，reset,submit
form标签的action属性，传递表单数据提交的地址。
form标签的enctype="multipart/from-data"属性，可以上传文件。
form表单里的name属性，负责绑定数据，在后台显示 name:{输入的数据}，value属性用来区别特殊标签(没有输入的标签，例如，checkbox)的数据绑定，在后台显示 name:{value}，表示用户选择了哪一个。
name相同，value不同，形成互斥并且代表不同的值。
select标签里的option标签也是同样适合通过相同的name，不同的value来区分用户真正选择了什么。
form标签的method属性，规定数据传递的方式，如post，get。

float:left;
控制元素的漂浮，但是会脱离父级元素，如果要想漂浮但是又不脱离父级元素，需要用clear:both;(在使用了float:left的块级元素后面添加一个块级标签，写入clear:both属性值)
另一种方法让所有子标签装在父级标签里
为父级标签添加一个伪类after，并把css设置为

.clearfix:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}

position:fixed;
固定定位，相对于浏览器窗口定位。
把元素固定在窗口的一个位置，无论页面怎么活动，元素始终保持在固定位置不动
position:absolute;
绝对定位，相对于浏览器窗口定位。
但是会随着页面的滚动，一起滚动。
position:realitive;
相对定位，一般单独使用没有什么效果，需要结合position:absolute;，使元素相对于使用了realitive的父级元素相对定位，不再以浏览器窗口为基准。(这里的父级元素不是亲父级元素，当使用了absolute定位时，标签会一直往上寻找一个带有realitive的父级元素，如果没有，就是以body(浏览器窗口为准))。

关注