目录
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当宽高不固定时元素定位居中:
格式:文章来源:https://www.toymoban.com/news/detail-795989.html
left: 50%;
transform: translateX(-50%);
/* 设置宽高不固定元素水平居中,通常搭配 white-space:nowrap; (强制不换行使用)*/
也可设置为:表示水平方向和垂直方向同时居中文章来源地址https://www.toymoban.com/news/detail-795989.html
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
white-space:nowrap;
3.阴影和图标
3.1 阴影
- 设置阴影的格式:box-shadow:x轴偏移量 y轴偏移量 羽化值 阴影的颜色 ;
- x轴偏移量 y轴偏移量 羽化值的大小用px表示,右下方向是正方向,左上方向为负方向。
- 给阴影颜色后面添加inset可以得到一个内阴影。
3.2 三角图标
- 三角图标的原理就是将不需要的边框设置为透明的,从而得到我们需要的图标,再通过定位将图标移到所需要的位置,
- transparent表示透明,eg:border-top:10px solid transparent;(设置上边框为10px实线。透明色)
- 也可以将正方形通过旋转成为;菱形,然后定位到合适位置,再给父元素加溢出隐藏。
- 旋转的格式:transform:rotare(45deg) deg表示度数。
到了这里,关于web学习笔记(五)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!