web学习笔记(五)

这篇具有很好参考价值的文章主要介绍了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; (强制不换行使用)*/

也可设置为:表示水平方向和垂直方向同时居中文章来源地址https://www.toymoban.com/news/detail-795989.html

    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表示度数。

到了这里,关于web学习笔记(五)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web学习笔记(十五)

    目录 1.Date对象 1.1日期对象的概念 1.2Date()方法的使用  1.3Date()常用方法汇总 1.4例题:用函数编写一个倒计时 2.函数 2.1函数的概念 2.2函数的使用 2.3函数的参数 2.4函数的声明   2.5函数的返回值 2.6异步函数 3特殊函数类型 3.1匿名函数 3.2箭头函数  3.3 函数形参和实参个数不匹

    2024年02月02日
    浏览(29)
  • web学习笔记(七)

    目录 1.css动画 1.1动画的编写格式 1.2引入动画 1.3用动画实现简单轮播图的效果 2.媒体查询 2.1媒体查询的编写格式 2.2媒体查询总结 3.html表示大小的单位 动画需要先编写出想要的动画,然后在所需位置引入动画。动画的命名是随意的,可以根据自己的习惯命名。 动画的编写格

    2024年01月23日
    浏览(34)
  • web学习笔记(八)

    目录 1.使用swiper制作轮播图的步骤: 1.1引入Swiper库: 1.2定义HTML结构: 1.3初始化Swiper对象: 1.4配置选项: 1.5补充: 2.补充css属性 2.1clip属性 2.2columns  列 3.伪对象选择符 3.1伪对象选择符的定义 3.2常见的伪对象选择符 3.3常见伪类选择符的使用格式 首先需要在网页中引入Swip

    2024年01月18日
    浏览(25)
  • web学习笔记(四十四)

    目录 1. 接口 1.1 什么是接口 1.2 接口的请求过程 1.3 接口文档 1.3.1 什么是接口文档 1.3.2 接口文档的组成部分 1.3.3 接口文档示例  2. XMLHttpRequest 2.1 什么是XMLHttpRequest 2.2 XHR发起Get请求的步骤 2.3 XHR发起post请求的步骤 2.4 什么是查询字符串   2.5 什么是XML        使用Ajax 请求数

    2024年04月17日
    浏览(35)
  • web学习笔记(十八)

    目录 1.函数的参数 1.1显式参数 1.2隐式参数 (1)this (2)Arguments 1.3伪数组转换为真数组 2.函数补充知识点 2.1函数可以调用另一个函数 2.2闭包函数 2.3递归函数 2.4回调函数 2.5高阶函数 显式参数就是我们自定义的参数。 JavaScript函数定义显式参数时没有指定数据类型。 系统给定的

    2024年02月21日
    浏览(34)
  • web学习笔记(十七)

    目录 1.Bootstrap知识点汇总 1.1什么是Bootstrap 1.2引入Bootstrap 1.3Bootstrap提供的类名  1.4Bootstrap栅格系统 2.Math对象常用方法和属性汇总 2.1属性 2.2方法 Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。 可以在页面引入在线文件,也可以将文件

    2024年01月21日
    浏览(38)
  • web学习笔记(十九)

    目录 1.作用域 1.1作用域的概念 1.2作用域的分类 1.2.1全局作用域 1.2.2局部作用域 1.2.3块级作用域(ES6新增  ) 2.变量作用域 2.1全局变量 2.2局部变量 3.作用域链  3.1作用域链的定义 4.垃圾回收机制 4.1定义 4.2如何避免内存泄漏 5.预解析 我们平时声明的变量的名字,并不是在所有

    2024年02月22日
    浏览(31)
  • web学习笔记(二十八)

    目录 1.JSON 1.1JSON简介 1.2JSON的语法 1.3JSON字符串分类  1.4JSON方法  2.数据存储  2.1会话存储 2.1.1会话存储的特点 2.1.2会话存储的常用方法  2.2本地存储 2.2.1本地存储的特点 2.2.2本地存储的常用方法  2.3两者的共同点 JSON(JavaScript Object Notation)是JavaScript的对象表示法,是轻量级

    2024年03月24日
    浏览(41)
  • Web 学习笔记 - 网络安全

    目录 m前言 正文 XSS 攻击 简单示例 XSS 防御 CSRF  Web 安全方面的基本知识是有很必要的,未必就要深入理解。本文主要介绍常见的网络攻击类型,不作深入探讨。 网络攻击的形式种类繁多,从简单的网站敏感文件扫描、弱口令暴力破解,到 SQL 注入,再到复杂的网络劫持等,

    2023年04月24日
    浏览(49)
  • web学习---Vue---笔记(1)

    该笔记是记录尚硅谷的Vue学习视频的笔记,视频地址为:学习视频地址 Vue组件化的特点 组件化 声明式编码 虚拟DOM+Diff算法,尽量复用DOM节点 H5的组件,是把某一个模块封装,里面写HTMLCSSJS等,算是一个页面里面的某个模块。在移动端,可能算是一个单独的view 移动端的组件

    2023年04月08日
    浏览(30)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包