元素显示模式

1.块级元素

显示特点:

1.独占一行(一行只能显示一个)

  1. 宽度默认是父元素的宽度
  2. 可以设置宽高

代表标签:div、p、h系列、ul、li、dl、dd、from、header、nav、footer......

2.行内元素

显示特点:

  1. 一行可以显示多个
  2. 宽度和高度默认由内容撑开
  3. 不可以设置宽高

代表标签:a、span、b、u、i、s、strong、ins、em、del......

3.行内块元素

显示特点:

  1. 一行可以显示多个
  2. 可以设置宽高

代表标签:input、textarea、button、select......

特殊情况:img标签有行内块元素特点,但是Chrome调试工具中显示结果是inline

4.元素显示模式转换

目的:改变元素默认的显示特点,让元素符合布局要求

属性

效果

使用频率

display:block

转换成块级元素

较多

display:inline-block

转换成行内块元素

较多

display:inline

转换成行内元素

极少

HTML嵌套规范注意

  1. 块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素......

但是:p标签中不要嵌套div

  1. a标签内部可以嵌套任意元素

但是:a标签不能嵌套a标签

CSS特性—继承性

特性:子元素有默认继承父元素样式的特点(子承父业)

可以继承的常见属性(文字控制属性都可以继承)

  1. color
  2. font-style、font-weight、font-size、font-family
  3. text-indent、text-align
  4. line-height

.......

注意点:可以通过调试工具判断样式是否可以继承

CSS特性—层叠性

特性:

1.给同一个标签设置不同的样式---此时样式会层叠叠加---会共同作用在标签上

2给同一个标签设置相同的样式---此时样式会层叠覆盖---最终写在最后的样式会生效

注意点:当样式冲突时,只有当选择器优先级相同时,才能通过层叠性判断结果

CSS特性—优先级

特点:不同选择器起具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式

优先级公式:继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!Important

注意点:

  1. !important写在属性值的后面,分号的前面!
  2. !important不能提升继承的优先级,只要是继承优先级最低!
  3. 实际开发中不建议使用!Important

权重叠加计算

场景:如果是复合选择器,此时需要通过权重叠加计算方法,判断最终哪个选择器优先级最高会生效

权重叠加计算公式:(每一级之间不存在进位)

比较规则:

  1. 先比较第一级数字,如果比较出来了,之后的统统不看
  2. 如果第一级数字相同,此时再去比较第二季数字,如果比较出来了,之后的统统不看
  3. ......
  4. 如果最终所有数字都相同,表示优先级相同,则比较层叠性(谁写在下面,谁说了算)

注意点:!important如果不是继承,则权重最高,天下第一!

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

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

相关文章

中国判决生效,诺基亚全面与中国手机签署授权协议,降低专利费

日前媒体报道指诺基亚与中国两家手机企业都签署了专利授权协议&#xff0c;全面结束诉讼&#xff0c;而这一切正是在OPPO于去年底在重庆法院就OPPO与诺基亚的专利费诉讼问题&#xff0c;做出裁决之后&#xff0c;要求诺基亚按公平、公正等合理收费原则收取专利费。 这几年诺基亚…

HiveSQL——连续增长问题

注&#xff1a;参考文章&#xff1a; SQL连续增长问题--HQL面试题35_sql判断一个列是否连续增长-CSDN博客文章浏览阅读2.6k次&#xff0c;点赞6次&#xff0c;收藏30次。目录0 需求分析1 数据准备3 小结0 需求分析假设我们有一张订单表shop_order shop_id,order_id,order_time…

动态水印怎么加 怎么去除动态水印 视频剪辑软件 会声会影安激活序列号 会声会影怎么剪辑视频

为了防止白嫖或者增加美观效果&#xff0c;视频制作者可能会采用动态水印的方式&#xff0c;让其他人难以盗取视频使用。动态水印的添加&#xff0c;需要应用到运动路径功能。接下来&#xff0c;本文会教大家动态水印怎么加&#xff0c;怎么去除动态水印的相关内容。感兴趣的小…

第67讲自定义icon实现

element-plus内置有一些常用的icon供我们使用&#xff0c;但是我们假如需要用自己的icon时候&#xff0c;我们可以搞一个icon自定义组件&#xff1b; 先把icons文件放到src下&#xff1b; 再新建一个SvgIcon组件&#xff1b; index.vue <template><svg class"…

【Linux】指令提权-sudo

Hello everybody&#xff0c;新年快乐&#xff01;哈哈&#xff01;今天打算给大家讲讲指令提权的相关知识&#xff0c;虽然内容不多&#xff0c;但有时却很有用。在我们学习过权限&#xff0c;vim后就可以学习指令提权啦&#xff0c;没看过的宝子们建议先去看一看我之前的文章…

【数据存储+多任务爬虫】

数据存储 peewee模块 第三方模块&#xff0c;也需要在cmd中安装。 from peewee import *db MySQLDatabase("spider",host"127.0.0.1",port3306,userroot,password123456 )# 类》表 class Person(Model):name CharField(max_length20) # 类型/约束bi…

C# WinForm开发系列 - DataGridView

原文地址&#xff1a;https://www.cnblogs.com/peterzb/archive/2009/05/29/1491891.html 1.DataGridView实现课程表 testcontrol.rar 2.DataGridView二维表头及单元格合并 DataGridView单元格合并和二维表头.rar myMultiColHeaderDgv.rar 3.DataGridView单元格显示GIF图片 …

第70讲axios后端请求工具类封装

axios工具类封装&#xff1a; // 引入axios import axios from axios;// 创建axios实例 const httpService axios.create({// url前缀-http:xxx.xxx// baseURL: process.env.BASE_API, // 需自定义baseURL:http://localhost:80/,// 请求超时时间timeout: 3000 // 需自定义 })…

Linux中常用的工具

软件安装 yum 软件包 在Linux中&#xff0c;软件包是一种预编译的程序集合&#xff0c;通常包含了用户需要的应用程序、库、文档和其他依赖项。 软件包管理工具是用于安装、更新和删除这些软件包的软件。常见的Linux软件包管理工具包括APT&#xff08;Advanced Packaging To…

Linux第45步_通过搭建“DNS服务器”学习图形化配置工具

学习的意义&#xff1a;通过搭建“DNS服务器”&#xff0c;来学习“图形化配置工具”。“DNS服务器”&#xff0c;我们用不到&#xff0c;但为后期移植linux系统服务&#xff0c;因为在移植系统时&#xff0c;需要用到这个“图形化配置工具”。 1、“menuconfig图形化配置工具…

CodeWave学习笔记--博物馆预约管理系统

场馆信息管理页面搭建&#xff08;PC&#xff09; 首先是场馆实体的创建 页面的搭建 在总览界面下创建子界面venueManage界面 现在总览页中实现跳转场馆管理子界面 设计场馆管理界面 效果 访客预约申请页面搭建&#xff08;H5&#xff09; 添加H5端&#xff0c;点击确认即可 …

Dubbo源码一:【Dubbo与Spring整合】

正常在项目中&#xff0c;我们都是在Spring环境下使用Dubbo&#xff0c;所以我们这里就在Spring的环境下看看Dubbo是如何运作的 入口 在源码下载下来之后&#xff0c;有一个dubbo-demo目录&#xff0c;里面有一个基于spring注解的子目录dubbo-demo-annotation, 里面有一个生产…

第三百一十六回

[tod] 我们在上一章回中介绍了"如何在输入框中处理光标"相关的内容&#xff0c;本章回中将介绍如何添加输入框默认值.闲话休提&#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍 在项目中经常使用输入框获取用户输入的内容&#xff0c;有时候在输入框中反复输入相…

【数学建模】【2024年】【第40届】【MCM/ICM】【E题 财产保险的可持续性】【解题思路】

一、题目 &#xff08;一&#xff09; 赛题原文 2024 ICM Problem E: Sustainability of Property Insurance Extreme-weather events are becoming a crisis for property owners and insurers. The world has endured “more than $1 trillion in damages from more than …

appears to be hung in Auto SQL Tuning task

appears to be hung in Auto SQL Tuning task Oracle 自动定时优化任务执行失败分析 错误现象&#xff1a; Sat Feb 10 03:10:57 2024 Process 0x0x00007FFB81BE44A8 appears to be hung in Auto SQL Tuning task Current time 1707505857, process death time 1707505803 …

Redisson分布式锁 原理 + 运用 记录

Redisson 分布式锁 简单入门 pom <dependency><groupId>org.redisson</groupId><artifactId>redisson</artifactId><version>3.13.6</version></dependency>配置类 package com.hmdp.config;import org.redisson.Redisson;…

【Spring MVC篇】参数的传递及json数据传参

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【Spring MVC】 本专栏旨在分享学习Spring MVC的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 一、普通参数的传…

CVE-2012-1823 漏洞复现

CVE-2012-1823 PHP SAPI 与运行模式 首先&#xff0c;介绍一下PHP的运行模式。 下载PHP源码&#xff0c;可以看到其中有个目录叫sapi。sapi在PHP中的作用&#xff0c;类似于一个消息的“传递者”&#xff0c;比如在《Fastcgi协议分析 && PHP-FPM未授权访问漏洞 &…

【算法与数据结构】496、503、LeetCode下一个更大元素I II

文章目录 一、496、下一个更大元素 I二、503、下一个更大元素II三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、496、下一个更大元素 I 思路分析&#xff1a;本题思路和【算法与数据结构】739、LeetCode每日温度类似…

论文笔记:相似感知的多模态假新闻检测

整理了RecSys2020 Progressive Layered Extraction : A Novel Multi-Task Learning Model for Personalized Recommendations&#xff09;论文的阅读笔记 背景模型实验 论文地址&#xff1a;SAFE 背景 在此之前&#xff0c;对利用新闻文章中文本信息和视觉信息之间的关系(相似…