CSS学习(三大特性 盒子模型)

目录

Emmet语法

1.快速生成HTML结构语法

2.快速生成CSS样式语法

CSS的复合选择器

后代选择器

子选择器

并集选择器

伪类选择器

链接伪类选择器

focus伪类选择器

CSS的三大特性

层叠性

继承性

优先级

CSS盒子模型

组成

边框

边框

内边距

外边距

块级盒子水平居中

行内元素和行内块元素水平居中

嵌套块元素垂直外边距的塌陷

清除内外边距


Emmet语法

1.快速生成HTML结构语法

2.快速生成CSS样式语法

CSS的复合选择器

在CSS中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。

●复合选择器可以更准确、更高效的选择目标元素(标签)

●复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的

·常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器

子选择器

并集选择器

伪类选择器

链接伪类选择器

focus伪类选择器

CSS的三大特性

层叠性

相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式。层要性主要解决样式冲突的问题

继承性

优先级

当同一个元素指定多个选择器,就会有优先级的产生。

选择器相同,则执行层叠性

选择器不同,则根据选择器权重执行

CSS盒子模型

组成

边框

复合写法:

边框

内边距

如果盒子本身没有指定width和height,则不会撑开盒子

外边距

块级盒子水平居中

行内元素和行内块元素水平居中

嵌套块元素垂直外边距的塌陷

清除内外边距

这次课看得比较水

截图自黑马pink

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

GESP C++一级真题

PDF图片1-7 点赞❤️关注😍收藏⭐️ 互粉必回🙏🙏🙏

用ThreadLocal解决线程隔离问题

存在的以下代码所示的线程隔离问题: package study.用ThreadLocal解决线程隔离问题;/*线程隔离 - 在多线程并发场景下,每个线程的变量都应该是相互独立的线程A:设置(变量1) 获取(变量1)线程B&a…

Agilent 安捷伦 DSO91304A 高性能示波器

Agilent 安捷伦 DSO91304A 高性能示波器 DSO91304A Infiniium 高性能示波器:13 GHz 13 GHz4个模拟通道高达 1 Gpts 存储器和 40 GSa/s 采样率可以提供更完整的信号迹线捕获更低的本底噪声(50 mV/格时为 1.73 mVrms)和深入的抖动分析功能能够…

我国网络安全领域有哪些法律法规?主要内容是什么?

1. 背景介绍 网络信息安全方面的法规在全球范围内都有相应的立法,我们主要的立法有《网络安全法》、《密码法》、《数据安全法》以及《个人信息保护法》。当前也有一些相关的条例和管理办法,接下来就为大家一一介绍。 2. 法规介绍 在中国,…

Error in onLoad hook: “SyntaxError: Unexpected token u in JSON at position 0“

1.接收页面报错 Error in onLoad hook: "SyntaxError: Unexpected token u in JSON at position 0" Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>) 2.发送页面 &#xff0c;JSON.stringify(item) &#xff0c;将对象转换为 JSO…

《昇思25天学习打卡营第14天|onereal》

第14天学习内容如下&#xff1a; Diffusion扩散模型 本文基于Hugging Face&#xff1a;The Annotated Diffusion Model一文翻译迁移而来&#xff0c;同时参考了由浅入深了解Diffusion Model一文。 本教程在Jupyter Notebook上成功运行。如您下载本文档为Python文件&#xff0c…

跨越界限的温柔坚守

跨越界限的温柔坚守 —— 郑乃馨与男友的甜蜜抉择在这个光怪陆离、瞬息万变的娱乐圈里&#xff0c;每一段恋情像是夜空中划过的流星&#xff0c;璀璨短暂。然而&#xff0c;当“郑乃馨与男友甜蜜约会”的消息再次跃入公众视野&#xff0c;它不仅仅是一段简单的爱情故事&#xf…

PageHelper分页查询遇到的小问题

如果我们是这样子直接查询 pagehelper会拼接导我们的sql语句之后 这样子我们搜索出来的list&#xff0c;就是里面参杂了PageHelper的东西 所以我们可以直接转成我们的Page类型 但是如果我们搜索出来的是List<Blog>&#xff0c;我有些信息不想返回给前端&#xff0c;所以…

【游戏客户端】大话版本slg玩法正式上线~~

【游戏客户端】制作率土之滨Like玩法 大家好&#xff0c;我是Lampard家杰~~ 好久好久没有更新博客了&#xff0c;有不少大佬都在后台私信我催更&#xff0c;但是很悲伤这段时间都忙的不行QAQ 那在忙什么呢&#xff1f;就是在制作一个SLG类的玩法【帮派纷争】啦 &#xff0c;布…

IT高手修炼手册(4)PowerShell命令

一、前言 PowerShell是一个功能强大的命令行界面和脚本环境&#xff0c;它允许用户管理Windows操作系统和应用程序。 二、文件和目录操作 Get-ChildItem&#xff1a;列出指定路径下的文件和文件夹。简写为ls或dir。 Copy-Item&#xff1a;复制文件和文件夹。简写为copy或cp。 M…

2024暑假集训

Day1——枚举 Day2——测试 Day3——贪心 Day4、5——测试 ——————————————————————————————————————————— Day3T7&Day5T7:没思路 Day3T8:不知道怎么排序筛选 Day5T5:没有算法难度&#xff0c;但是不知道怎么处理2队奶牛的情…

moviepy给视频添加字幕很慢的问题解决

前面说了如何通过moviepy给视频添加字幕&#xff1a; https://blog.csdn.net/qq_30594137/article/details/140094118?spm1001.2014.3001.5502 但是真实添加字幕的时候&#xff0c;就会很耗时&#xff0c;这是因为如下问题导致的。 CompositeVideoClip的入参是个list&#x…

ComfyUI+MuseV+MuseTalk图片数字人

电脑配置 GPU12G&#xff0c;如果自己电脑配置不够&#xff0c;选择云gpu&#xff0c;我就是用的这个&#xff0c;自己电脑太老配置跟不上 环境&#xff1a; Python 3.11.8 torch 2.2.1 cuda_12.1 资源提供&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1_idZbF…

基于单片机的 LED 花样照明时钟设计

摘要 &#xff1a; 本设计是基于单片机的 LED 花样照明 &#xff0c; 并附加时钟设计 . 单片机也叫微控制器 &#xff08; Micro Control Unit, 简称 MCU &#xff09;&#xff0c; 因其价格低廉 &#xff0c; 功能强大 &#xff0c; 在实际应用中得到广泛认可 . 本设计…

mac如何安装nvm

​ vue项目开发&#xff0c;热更新&#xff0c;webpack&#xff0c;前辈造的轮子&#xff1a;各类的工具&#xff0c;库&#xff0c;像axios,qs,cookie等轮子在npm上可以拿来直接用&#xff0c;需要node作为环境支撑。 开发时同时有好几个项目&#xff0c;每个项目的需求不同…

关于MCU-Cortex M7的存储结构(flash与SRAM)

MCU并没有DDR&#xff0c;所以他把代码存储在flash上&#xff0c;临时变量和栈运行在SRAM上。之所以这么做是因为MCU的CPU频率很低&#xff0c;一般低于500MHZ&#xff0c;flash的读取速度能够满足CPU的取指需求&#xff0c;但flash 的写入速度很慢&#xff0c;所以引入了SRAM …

VSCode神仙插件——CodeSnap (好看的代码截图)

1 安装 2 使用 选中要截图的代码,右键 此时右侧会出现代码截图的预览图 如果要将截图保存到本地,则点击上图红色框中的图标 也可以点击下面截的图,CtrlC复制,然后就可以CtrlV粘贴到其他应用程序里了

SpringBoot运维篇

工程打包与运行 windows系统 直接使用maven对项目进行打包 jar支持命令行启动需要依赖maven插件支持&#xff0c;打包时须确认是否具有SpringBoot对应的maven插件 <build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><ar…

一篇就够了,为你答疑解惑:锂电池一阶模型-在线参数辨识(附代码)

锂电池一阶模型-在线参数辨识 背景在线 VS 离线 参数辨识递推最小二乘法一阶戴维南Z域离散表达式 背景 锂电池一阶戴维南等效模型的基础知识和离线辨识方法&#xff0c;已经在上一期非常详细地讲解了一轮&#xff08;上期文章请戳此处&#xff09;&#xff0c;本期继续讲解一下…

《昇思 25 天学习打卡营第 11 天 | ResNet50 图像分类 》

《昇思 25 天学习打卡营第 11 天 | ResNet50 图像分类 》 活动地址&#xff1a;https://xihe.mindspore.cn/events/mindspore-training-camp 签名&#xff1a;Sam9029 计算机视觉-图像分类&#xff0c;很感兴趣 且今日精神颇佳&#xff0c;一个字&#xff0c;学啊 上一节&…