web学习笔记（五）

目录

1.补充css选择器

1.1:nth-child() 选择器

1.2 z-index

1.3 vertical-align:center;

1.4元素显示或隐藏。

1.用透明度实现隐藏：

2.display:none;

3. visbility:hidden;

1.5设置圆角：

1.6首行缩进：

2.定位

2.1固定定位

2.2相对定位

2.3绝对定位

2.4粘性定位

2.5静态定位

2.6当宽高不固定时元素定位居中：

​​3.阴影和图标

3.1 阴影

3.2 三角图标

---

1.补充css选择器

1.1:nth-child() 选择器

• :nth-child(n)  选择器匹配父元素中的第 n 个子元素，元素类型没有限制。n可以是一个数字，一个关键字，或者一个公式。注释：n从1开始。冒号前写父元素的标记。

1.2 z-index

• 不带单位

• 可以是正值也可以是负值（建议正值）。

• 数值越大层级越靠上。

• 相同数值标签在下，页面显示效果在上。

• 在元素有定位的时候才生效，（静态定位除外）。

1.3 vertical-align:center;

• 该属性只能用于 行内元素 和 置换元素（例如 图像和表单输入框）垂直对齐 ，此属性不继承。

1.4元素显示或隐藏。

1.用透明度实现隐藏：

• 格式：opacity: 0;
• 当透明度为0时实现隐藏，但元素隐藏后所占空间依旧存在。

2.display:none;

• 使用display:none；将元素隐藏后元素所占空间也将被清除，相当于把元素删除了。

3. visbility:hidden;

• visbility:visible;表示元素显示。
• visbility:hidden;和opacity: 0;相似，都是元素隐藏后所占空间依旧存在，但opacity: 0;可以设置0.5半透明状态，而visbility只能显示或者隐藏元素。

1.5设置圆角：

格式：border-radius:50%;

也可以设置具体的数值。

1.6首行缩进：

格式：text-indent:;

一般是缩进两个字符，也可以通过首行缩进为负值，实现将文字隐藏的效果。

2.定位

2.1固定定位

• 格式： position: fixed;
• 以屏幕为参考物，跟父元素有无定位没关系，用left:20px;和top: 30px;确定位置。
• 加定位后上浮一层，脱离原本的文档流，排版容易错乱。
• 此时使用margin:auto；属性会不生效，因为不在同一个文档流了。

2.2相对定位

• 格式： position: relative;
• 参照物为没有加定位时该盒子的位置。
• 用left:10px;和top: 10px;来确定位置。

• left和top里面跟的值是相对自身原位置发生多少的改变，而不是以屏幕为坐标。

2.3绝对定位

• 格式：position: absolute;
• 当没有父级元素或者有父级元素但父级元素没有加定位时，参照物为网页的第一屏。
• 在编写页面时，通常给父级元素添加相对定位 position: relative;，子元素加绝对定位（子绝父相），这样既可以把父元素当参照物，又不会影响页面的布局。
• 当父元素本身就有定位时，就可以直接给子元素加定位了，不需要要求父元素必须是相对定位。

2.4粘性定位

• 格式;position: sticky;
• 有点像固定定位和相对定位的结合（元素根据原位置发生改变，然后固定在屏幕上，当滚动屏幕时，该元素一直固定在屏幕上）。

2.5静态定位

• 格式： position: static;
• 静态定位相当于取消定位。

2.6当宽高不固定时元素定位居中：

格式：

     left: 50%;
    transform: translateX(-50%);
    /* 设置宽高不固定元素水平居中,通常搭配 white-space:nowrap; (强制不换行使用)*/

也可设置为：表示水平方向和垂直方向同时居中

    left: 50%;
    top: 50%;
    transform: translate(-50%，-50%);
    white-space:nowrap;

  

​​3.阴影和图标

3.1 阴影

1. 设置阴影的格式：box-shadow:x轴偏移量 y轴偏移量 羽化值 阴影的颜色 ；
2. x轴偏移量 y轴偏移量 羽化值的大小用px表示，右下方向是正方向，左上方向为负方向。
3. 给阴影颜色后面添加inset可以得到一个内阴影。

3.2 三角图标

1. 三角图标的原理就是将不需要的边框设置为透明的,从而得到我们需要的图标，再通过定位将图标移到所需要的位置，
2. transparent表示透明，eg:border-top:10px solid transparent；（设置上边框为10px实线。透明色）
3. 也可以将正方形通过旋转成为；菱形，然后定位到合适位置，再给父元素加溢出隐藏。
4. 旋转的格式：transform:rotare(45deg)    deg表示度数。