HTML最全笔记（第三弹）

最新推荐文章于 2023-02-23 10:59:15 发布

鸡腿子-麦麦呀！

最新推荐文章于 2023-02-23 10:59:15 发布

阅读量265

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/m0_64923859/article/details/127487593

版权

31.text-decoration: none

去除标签的下划线

32.position

static(默认定位)
relative（相对定位）

left、right、top、bottom 的调整都是相对于当前元素 static 布局位置进行的调整。

left：50px，表示距离自己原来位置左侧 50px top: 50px，表示距离自己原来位置顶部 50px
absolute（绝对定位）而 absolute 是寻找最近的非 static 的祖先节点进行偏移。
1. 文档第一张下面的所有 DOM 元素，自动往上移动占据了第一张图片的位置，文档流（布局）已经没有为第一张图预留空间了
2. 第一张图片脱离了文档流，变成了第二个图层，再在新的图层中往右下偏移 50px
3. absolute 被称为 绝对定位 绝对定位不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移，来确定元素位置
fixed（固定定位）

固定定位和绝对定位类似，但元素的包含块为屏幕视口（viewport）

固定定位不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
sticky（粘性定位）

注意 MOUNTAIN 的效果，在它滚动到顶部时，黏在了顶部。而当页面往下面滚动时，MOUNTAIN 又会恢复其在文档中的位置，这种效果就是 sticky 的效果，我们看下代码
```
h1 {
  position: sticky;
  color: yellowgreen;
  top: 50px;
  z-index:1;
}
```

33.float

float —— 中文意思浮动，当然就有往左浮动，往右浮动。这就是 float 的两个最基本的属性:

left
right

在这里，我们分别设置两个图标的 CSS 如下：

.logo {
  float: left;
}

.avatar {
  float: right;
}

在什么时候需要使用 float 呢？主要使用场景有两种：

如果我们想要一组元素同时靠左靠右对齐，可以使用 float，正如上面案例一样
如果我们想要文字围绕图片，可以使用 float，这个大家先了解下，后面用到，我们会具体讲到。

浮动坍塌

如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候，那么它的高度就会踏缩为零。这是因为浮动元素脱离了文档流，包围它们的父块中没有内容了，所以“”塌陷“”了。

方法一、使用带clear属性的空元素鉴第47个知识点

方法二：使用CSS的overflow属性

方法三：给浮动元素的容器添加浮动

方法四：使用CSS的:after伪元素

34.opacity

\1. 作用

设置元素的透明背景

\2. 取值

(1) 取值范围0~1

(2) 0表示完全透明，1表示完全不透明，0.5表示半透明

35.nav ，main，header, main ,section,aside,footer

nav：一般用于表示此区块是导航区域

main：一般用于表示此区块是网页的主体区域

<!-- 头部 -->
<header>header</header>
<!-- 主体 -->
<main>
    <!-- 导航 -->
    <nav>nav</nav>
    <!-- 区块 -->
    <section>section</section>
    <section>section</section>
</main>
<!-- 侧边栏 -->
<aside></aside>
<!-- 底部 -->
<footer></footer>

36.cursor：

default：默认光标（通常是一个箭头） auto：默认，浏览器设置的光标 crosshair：光标为十字线 pointer：光标为一只手 move：光标为某对象可移动,方向键盘

text：光标 I

grab:变成看似可拖动的手

zoom-in:放大

zoom-out:缩小

37.元素水平居中