HTML+CSS复习第一天

浏览器内核+标签:

单行省略号

white-space:nowrap
text-overflow:ellipsis
overflow:hidden

多行省略号:使用到浏览器内核:-webkit- 谷歌浏览器

overflow:hidden
text-overflow:ellipsis
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
display: -webkit-box;

行标签

a、em、span、i、strong、b

块级标签

div    p    h1-h6     ol<li(有序)    ul<li(无序)    dl<dt+dd(自定义列表)     header    foot    form   nav  

行内块标签

img、button、input

三者之间的区别

行标签:不能设置宽度和高度,只能在一行进行显示,不可以设置margin,可以设置padding和border
块级标签:独占一行,可以设置宽高.padding margin border
行内块:在一行展示,能设置宽高,margin  padding   border
display:block 变为块级元素
display:inline 变为行内元素
display:inline-block 变为行内块元素

盒模型

普通盒模型:margin + border + padding + content
怪异盒模型:margin + content(border+padding+content)
普通盒模型变为怪异盒模型使用的是box-sizing:border-box

使用css制作三角形

<html><head><style>div{/*制作一个朝上的三角形 ,这里的宽度必须要写 否则不会生效*/width:0border-width:100pxborder-style:solidborder-color:transparent transparent red transparent}</style></head><body>div</body>
<html>

margin塌陷问题的解决

塌陷现象分为两种:
一种是兄弟塌陷
另外一种是父子塌陷

塌陷出现的方式:当两个盒子同时出现margin-bottom和margin-top,本来两者之间的的距离是两个margin之间的和 ,而出现的是两者的最大值,这样就导致了塌陷的问题
解决方式:使用伪元素 使用overflow:hidden 使用padiing或者boder

盒子水平垂直居中的几种方式

1.使用flex布局 justify-content:center; align-items:center
2.使用定位
3.使用grid布局 display:grid justify-content:center; align-items:center
4.使用margin: 0 auto

路径的几种方式

分为两种:相对路径 绝对路径 img标签内部的属性是以键值对的形式存在的

格式化标签 (成对存在的)

 		<b>标签</b><strong>标签</strong><em>标签</em><i>标签</i><del>标签</del><sub>标签</sub><sup>标签</sup><s>标签</s><ins>标签</ins><br /><hr />

Css三大特性

1.继承性
2.层叠性
3.优先级

文本属性

text-indent首行缩进
text-align:center:水平居中
text-decoration: overline; 文本上方线条
text-decoration: line-through; 文件中间出现线条
text-decoration: underline; 文本下面出现线条

css复合选择器

后代选择器:使用空格分开
子集选择器:使用 >
并集选择器:使用,
伪类选择器:链接伪类选择器:
a:link:选择所有被访问的链接           
a:visited:选择所有已被访问           
a:hover:选择鼠标指针位于其上的链接
a:active:选择活动链接(鼠标按下未弹起的链接)
input:focus:点击Input获取焦点

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

uniapp请求接口封装

uniapp请求接口封装 在uniapp发送请求跟web的不同&#xff0c;而且通过uni.request这个方法进行调用。 示例&#xff1a; uni.request({url: https://www.example.com/request, //仅为示例&#xff0c;并非真实接口地址。data: {text: uni.request},header: {custom-header:…

【云原生】k8s安全机制

前言 Kubernetes 作为一个分布式集群的管理工具&#xff0c;保证集群的安全性是其一个重要的任务。API Server 是集群内部各个组件通信的中介&#xff0c; 也是外部控制的入口。所以 Kubernetes 的安全机制基本就是围绕保护 API Server 来设计的。 比如 kubectl 如果想向 API…

机器学习/深度学习常见算法实现(秋招版)

包括BN层、卷积层、池化层、交叉熵、随机梯度下降法、非极大抑制、k均值聚类等秋招常见的代码实现。 1. BN层 import numpy as npdef batch_norm(outputs, gamma, beta, epsilon1e-6, momentum0.9, running_mean0, running_var1)::param outputs: [B, L]:param gamma: mean:p…

工欲善其事,必先利其器之—react-native-debugger调试react native应用

调试react应用通常利用chrome的inspector的功能和两个最常用的扩展 1、React Developer Tools &#xff08;主要用于debug组件结构) 2、Redux DevTools &#xff08;主要用于debug redux store的数据&#xff09; 对于react native应用&#xff0c;我们一般就使用react-nativ…

Vue动态多级表头+行列合计+可编辑表格

新建组件&#xff1a;Table.vue <template><el-table-column :label"coloumnHeader.label" :prop"coloumnHeader.label"><template v-for"item in coloumnHeader.children"><tableColumnv-if"item.children &&am…

Java项目查询统计表中各状态数量

框架&#xff1a;SpringBoot&#xff0c;Mybatis&#xff1b;数据库&#xff1a;MySQL 表中设计2个状态字段&#xff0c;每个字段有3种状态&#xff0c;统计这6个状态各自的数量 sql查询语句及结果如图 SQL&#xff1a; SELECT SUM(CASE WHEN A0 THEN 1 ELSE 0 END) AS A0…

数据分析的iloc和loc功能

大家好&#xff0c;在处理大型数据集时&#xff0c;使用有效的数据操作和提取技术是必要的。Pandas数据分析库提供了强大的工具&#xff0c;用于处理结构化数据&#xff0c;包括使用iloc和loc函数访问和修改DataFrame元素的能力。在本文中&#xff0c;我们将探讨iloc和loc之间的…

Java 【dubbo rpc改feign调用】解决调用服务提供方无法传递完整参数问题

dubbo rpc改feign调用&#xff0c;feign调用接口异常统一处理 服务调用方服务提供方 【框架改造问题点记录&#xff0c;dubbo改为spring cloud alibaba】 【第二篇】feign接口异常解决 【描述】多参数情况下&#xff0c;调用服务提供方无法传递完整参数、改SpringQueryMap原因是…

论文笔记--OpenPrompt: An Open-source Framework for Prompt-learning

论文笔记--OpenPrompt: An Open-source Framework for Prompt-learning 1. 文章简介2. 文章概括3 文章重点技术4. 文章亮点5. 原文传送门 1. 文章简介 标题&#xff1a;OpenPrompt: An Open-source Framework for Prompt-learning作者&#xff1a;Ning Ding, Shengding Hu, We…

短视频seo矩阵系统源码开发部署

目录 短视频矩阵源码部署步骤简单易懂&#xff0c;开发者只需按照以下几个步骤进行操作&#xff1a; 代码展示---seo关键词分析 开发要点&#xff1a; 代码展示如下&#xff1a; 开发部署注意事项&#xff1a; 说明&#xff1a;本开发文档适用于短视频seo矩阵系统源码开发…

django中批量添加对象SupplierNature.objects.bulk_create(SupplierNature对象)

insert_list [] for i in range(10000):namef"{i} "insert_list.append(MyModel(namename)) MyModel.objects.bulk_create(insert_list)注明&#xff1a;创建的是对象

PostgreSQL考试难不难 ?

当涉及到PostgreSQL考试的详细难度&#xff0c;以下是一些可能涉及的主题和考点&#xff0c;这些主题在不同的考试中可能有所不同&#xff1a; 1.数据库基础知识&#xff1a;数据库的基本概念、关系型数据库模型、表、字段、主键、外键等。 2.SQL语言&#xff1a;对SQL语言的掌…

ACME申请SSL证书

1.开放443端口 firewall-cmd --permanent --add-port443/tcp # 开放443端口 firewall-cmd --reload # 重启防火墙(修改配置后要重启防火墙)2.安装ACME # 安装acme curl https://get.acme.sh | sh -s email你的邮箱地址 # 别名 alias acme.sh~/.acme.sh/acme.sh3.使用ACME申请…

攻防世界-web-easytornado

题目描述&#xff1a;Tornado 框架。打开链接是一个简单的界面 1. 思路分析 看到有个/flag.txt&#xff0c;我们点击进去看下 发现传入了两个参数&#xff0c;一个是filename&#xff0c;还有一个是filehash 看到里面的内容&#xff0c;提示我们真正的flag在 /flllllllllllla…

Django auto_now=True 不更新

create_time models.DateTimeField(db_column"CreateTime", auto_now_addTrue) update_time models.DateTimeField(db_column"UpdateTime", auto_nowTrue) 现象&#xff1a; update_time 的auto_now设置为True&#xff0c;更新了表格里的某个属性的值&…

【LeetCode 算法】Walking Robot Simulation 模拟行走机器人 - 二分

文章目录 Walking Robot Simulation 模拟行走机器人问题描述&#xff1a;分析代码二分 Tag Walking Robot Simulation 模拟行走机器人 问题描述&#xff1a; 机器人在一个无限大小的 XY 网格平面上行走&#xff0c;从点 (0, 0) 处开始出发&#xff0c;面向北方。该机器人可以…

【自监督预训练 2023】MCL

【自监督预训练 2023】MCL 论文题目&#xff1a;Multi-Level Contrastive Learning for Dense Prediction Task 中文题目&#xff1a;稠密预测任务的多级对比学习 论文链接&#xff1a;https://arxiv.org/abs/2304.02010 论文代码&#xff1a;https://github.com/GuoQiushan/MC…

Unity视角拉近时物体缺失的问题处理

在Unity的开发过程中&#xff0c;我们可能会遇到以下情况&#xff1a; 就是在场景的不断编辑中&#xff0c;突然又一次打开场景&#xff0c;再拉近或拉远场景视角时&#xff0c;会出现场景中的对象会显示不全的问题。 出现了这样的情况会让场景的预览很不友好。 出现这个问题的…

rust

文章目录 rustCargoCreating a rust project How to Debug Rust Programs using VSCodebasic debuggingHow to pass arguments in Rust debugging with VS Code. References rust Cargo Cargo is a package management tool used for downloading, compiling, updating, and …

行为型模式 - 命令模式

概述 日常生活中&#xff0c;我们出去吃饭都会遇到下面的场景。 定义&#xff1a; 将一个请求封装为一个对象&#xff0c;使发出请求的责任和执行请求的责任分割开。这样两者之间通过命令对象进行沟通&#xff0c;这样方便将命令对象进行存储、传递、调用、增加与管理。 结构 …