【鸿蒙开发从0到1-day03】

2024-09-01 02:04
文章标签 开发 鸿蒙 day03

本文主要是介绍【鸿蒙开发从0到1-day03】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

css进阶

  • 一.结构伪类选择器
  • 二.伪元素选择器
  • 三.PxCook
  • 四.盒子模型
  • 五.清除默认样式
  • 六.盒子模型-元素溢出
  • 七.外边距问题-合并现象
  • 八.行内元素-内外边距的问题
  • 九.盒子模型-圆角
  • 十.盒子的过渡属性
  • 十一.盒子模型 - 阴影
  • 十二.透明度
  • 十三.总结

一.结构伪类选择器

选择器                                     说明
E:first-child                      查找第一个E元素
E:last-child						查找最后一个E元素
E:nth-child(N)					查找第n个E元素(第一个元素N的值为1)

在这里插入图片描述
运行结果:
在这里插入图片描述

ps:想要设置段落1样式,不能通过.box p:first-child{}
div E:first-child{}代表的是即是div中的E孩子并且
E孩子必须是div中的第一个孩子,div E:lastchild也是如此E:nth-child(公式)根据元素的结构关系查找多个元素功能															公式偶数标签										2n奇数标签										2n-1,2n+1找到五的倍数的标签								5n找到5个以后的标签(包含5)							n+5找到五个以前的标签(包含5)						-n+5

在这里插入图片描述
运行结果:
在这里插入图片描述

二.伪元素选择器

作用: 创建虚拟元素(伪元素),用来摆放装饰性的内容

选择器 说明
E::before 在E元素里面最前面添加一个伪元素
E::after 在E元素里面最后面添加一个伪元素

ps:必须设置content:属性,用来设置伪元素的内容,如果没有内容,则引号留空即可
伪元素默认行内显示模式
权重和标签选择器相同

在这里插入图片描述
运行结果:
在这里插入图片描述

三.PxCook

是一款切图设计的工具软件,支持psd文件的文字,颜色,距离自动智能识别
开发面板(自动智能识别)
设计面板(手动测量尺寸和颜色)
点击设计模块,通过左边窗格中的工具进行测量
空格键+鼠标 =  拖拽
删除: 选中+delete

四.盒子模型

作用:布局网页,摆放盒子的内容
内容区域--width&height
内边距---padding(内容和盒子边缘之间)
边框线--border
外边距--margin(出现在盒子外边)

border(快捷键bd)属性值 : 三个属性值不区分顺序
边框线粗细 数字+px
线条样式 solid dashed虚线 dotted点线
颜色 color
也可以单方向设置边框border-left/top/right/bottom
在这里插入图片描述
运行效果:
在这里插入图片描述

	padding内边距:设置内容与盒子边缘之间的间距
属性名padding /padding-方位名词ps内边距会撑大盒子从而改变盒子的大小如果padding只有一个取值,那么他就是四周都是这个内边距
也可以通过padding-方位名词可以只对一个方向进行内边距设置如果padding有多个值,那么就是从上开始顺时针赋值,如果当前方向没有值,就是与其对面的值保持一致

在这里插入图片描述
运行结果:
绿色区域就是内边距
在这里插入图片描述

外边距(margin):设置盒子与盒子之间的距离
也可以使用margin-方位对每个方位设置不同的外边距

在这里插入图片描述
运行结果:
上外边距20px
左外边距20px:
在这里插入图片描述

盒子水平居中:margin: 0px  auto;前提条件:1盒子必须具有具体的长宽尺寸2.元素必须是块级元素

在这里插入图片描述
运行结果:
在这里插入图片描述

五.清除默认样式

比如默认的内外边距,标题标签,a标签,ul,li,p,em/i

在这里插入图片描述
运行结果:
在这里插入图片描述
在这里插入图片描述

六.盒子模型-元素溢出

overflow:hidden:溢出隐藏scroll:无论是否溢出都会有滚轮auto:只有溢出了才会有滚轮

在这里插入图片描述
运行结果:
hidden:
在这里插入图片描述
scroll:
在这里插入图片描述
auto:
在这里插入图片描述

七.外边距问题-合并现象

margin合并问题:
场景:垂直排列的兄弟元素,上下margin会合并
现象:取两个margin最大的值生效
在这里插入图片描述
上面那个div的外边距20px而下面的div外边距30px,垂直合并,之间的间距只会保留更大的30px

运行结果

塌陷问题:
塌陷的原因: 两个相互嵌套的盒子,给内部的盒子
设置外边距,会把父元素拉下来

解决办法:
1.取消子子级得margin给父元素加padding进行设置(给父元素设置box-sizing)
2.给父元素加哦overflow:hidden
在这里插入图片描述
运行结果:
在这里插入图片描述

八.行内元素-内外边距的问题

行内元素

      场景:行内元素添加margin和padding,无法改变元素垂直位置水平方向是会生效的

解决办法:

	给行内元素添加 line-height,可以改变垂直位置

在这里插入图片描述
运行结果:
在这里插入图片描述

九.盒子模型-圆角

作用:设置元素外边框的圆角
boder-radius:属性值
属性值:数字+px / 百分比
ps:属性值指定的是圆角半径

运行结果:
在这里插入图片描述
设置一个圆形:
1.形状要求是一个正方形,圆角属性值设置为长宽的一半,或者50%
设置一个胶囊形
1…形状要求是一个长方形
2.border-radius值设置为高度的一半
在这里插入图片描述
运行结果:
在这里插入图片描述

十.盒子的过渡属性

transition:就是使得某个操作能够有延迟效果,一般配合hover使用
第一个属性all 全部属性
第二个值代表过渡的时间,单位是s
在这里插入图片描述
运行结果:
在这里插入图片描述

十一.盒子模型 - 阴影

属性名 box-shadow

十二.透明度

属性名 opacity
设置整个元的透明度(包含背景和内容)
rgba中的a只能设置背景的透明度而对内容无效
0完全透明 1不透明
0-1之间的小数是半透明状态

十三.总结

本章主要学习盒子模型的一些操作,内外边距,绘制圆形,胶囊形状的盒子,盒子模型的一些塌陷问题,margin的合并问题,以及详细的解决这些问题的方法

这篇关于【鸿蒙开发从0到1-day03】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1125637

相关文章

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1

如何基于Python开发一个微信自动化工具

《如何基于Python开发一个微信自动化工具》在当今数字化办公场景中,自动化工具已成为提升工作效率的利器,本文将深入剖析一个基于Python的微信自动化工具开发全过程,有需要的小伙伴可以了解下... 目录概述功能全景1. 核心功能模块2. 特色功能效果展示1. 主界面概览2. 定时任务配置3. 操作日志演示

JavaScript实战:智能密码生成器开发指南

本文通过JavaScript实战开发智能密码生成器,详解如何运用crypto.getRandomValues实现加密级随机密码生成,包含多字符组合、安全强度可视化、易混淆字符排除等企业级功能。学习密码强度检测算法与信息熵计算原理,获取可直接嵌入项目的完整代码,提升Web应用的安全开发能力 目录

一文教你如何解决Python开发总是import出错的问题

《一文教你如何解决Python开发总是import出错的问题》经常朋友碰到Python开发的过程中import包报错的问题,所以本文将和大家介绍一下可编辑安装(EditableInstall)模式,可... 目录摘要1. 可编辑安装(Editable Install)模式到底在解决什么问题?2. 原理3.

Python+PyQt5开发一个Windows电脑启动项管理神器

《Python+PyQt5开发一个Windows电脑启动项管理神器》:本文主要介绍如何使用PyQt5开发一款颜值与功能并存的Windows启动项管理工具,不仅能查看/删除现有启动项,还能智能添加新... 目录开篇:为什么我们需要启动项管理工具功能全景图核心技术解析1. Windows注册表操作2. 启动文件

使用Python开发Markdown兼容公式格式转换工具

《使用Python开发Markdown兼容公式格式转换工具》在技术写作中我们经常遇到公式格式问题,例如MathML无法显示,LaTeX格式错乱等,所以本文我们将使用Python开发Markdown兼容... 目录一、工具背景二、环境配置(Windows 10/11)1. 创建conda环境2. 获取XSLT

Android开发环境配置避坑指南

《Android开发环境配置避坑指南》本文主要介绍了Android开发环境配置过程中遇到的问题及解决方案,包括VPN注意事项、工具版本统一、Gerrit邮箱配置、Git拉取和提交代码、MergevsR... 目录网络环境:VPN 注意事项工具版本统一:android Studio & JDKGerrit的邮

Python开发文字版随机事件游戏的项目实例

《Python开发文字版随机事件游戏的项目实例》随机事件游戏是一种通过生成不可预测的事件来增强游戏体验的类型,在这篇博文中,我们将使用Python开发一款文字版随机事件游戏,通过这个项目,读者不仅能够... 目录项目概述2.1 游戏概念2.2 游戏特色2.3 目标玩家群体技术选择与环境准备3.1 开发环境3

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t