css-盒子等样式学习



盒子居中,继承外层盒子的宽高
兼容性(border-box)将边框收到盒子内部
初始化div 不用管box-setting
content-box 还原
创建为一个类 ,让所有需要还原的类 进行继承

padding 用法表示
margin上下左右边距

body 外边距(IE8 默认上下16px,左右8px) (IE7 上下11px 。。。。)各个浏览器不同

常规项目设计定位方式

relative 数据非定位元素 position 数据定位元素

position 创建新图层 ,box2 还在原来的图层所以 橘色再黑色下面
z轴处理图层问题
页面自适应2栏布局
overflow-y 让其失去滚动条
左边自适应,html,body要同时继承以上属性,不然就没有效果

float能将图片浮动在文字中
![]()

清除浮动方法一(将span变为p)span { clear:both}
float 以后就变成内联块元素


必须两边都加上浮动


:伪类用法
::伪元素
content 必须有 inline-block 可以变成块级元素
清楚浮动的方法
将边框收进元素中
动态获取数据
![]()


向里扩散

将阴影遮挡去掉,可以将header 网上移动 用relative + z-index
浏览器兼容性
纯园 50% 半圆角 height/2 +px 圆角直接用px





保持图片缩放(位置)不变
图片自适应
contian同样达到如此效果

背景图片设置不滚动
复合使用
log 配置,如果没有网速则显示字符
实际是将logo-hd 变为块级 然后图片设置logo 同样的高度和宽度 利用overflow hidden 达到效果

border='1' 有单元格 与 style 没有单元格的区别

保持宽度一致

解决浮动撑开的问题 BFC特性
可解决该问题。
父级元素出发BFC也能解决margin塌陷
css 样式基本顺序

命名规范
学习链接 fontawesome、矢量图标、雪碧图、腾讯课堂案例_哔哩哔哩_bilibili
相关文章:
css-盒子等样式学习
盒子居中,继承外层盒子的宽高 兼容性(border-box)将边框收到盒子内部 初始化div 不用管box-setting content-box 还原 创建为一个类 ,让所有需要还原的类 进行继承 padding 用法表示margin上下左右边距 body 外边距&…...
数据库系统概论 第1章绪论 1.1数据库的四个基本概念
1.1.1 数据库的4个基本概念 - 数据(Data) - 数据库(Database, DB) - 数据库管理系统(DataBase Management System, DBMS) - 数据库系统(DataBase System, DMS) 1. 数据 - 数据(Data)是数据库中存储…...
使用Linux搭建svn
1.安装 Apache 和 Subversion 软件包 sudo yum install httpd subversion mod_dav_svn2.启动 Apache 服务 sudo systemctl start httpd3.设置 Apache 服务开机自启动 sudo systemctl enable httpd4.创建/svn 目录 sudo mkdir /svn5.设置 /svn 目录的权限: sudo…...
Kafka的安装、管理和配置
Kafka的安装、管理和配置 1.Kafka安装 官网: https://kafka.apache.org/downloads 下载安装包,我这里下载的是https://archive.apache.org/dist/kafka/3.3.1/kafka_2.13-3.3.1.tgz Kafka是Java生态圈下的一员,用Scala编写,运行在Java虚拟机上…...
某银行主机安全运营体系建设实践
随着商业银行业务的发展,主机规模持续增长,给安全团队运营工作带来极大挑战,传统的运营手段已经无法适应业务规模的快速发展,主要体现在主机资产数量多、类型复杂,安全团队难以对全量资产进行及时有效的梳理、管理&…...
虚拟化技术、Docker、K8s笔记总结
一、虚拟化技术 是一种将物理资源(如服务器、存储设备、网络设备等)抽象、转换和分割成多个逻辑资源的技术。通过虚拟化技术,用户可以在单个物理设备上运行多个相互独立的虚拟环境,从而提高资源的利用率、降低运维成本和提高系统…...
基于springboot+vue的在线拍卖系统(前后端分离)
博主主页:猫头鹰源码 博主简介:Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容:毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目背景…...
【征服redis3】一文征服redis的jedis客户端
使用数据库的时候,我们可以用JDBC来实现mysql数据库与java程序之间的通信,为了提高通信效率,我们有了数据库连接池比如druid等等。而我们想通过Java程序控制redis,同样可以借助一些工具来实现,这就是redis客户端&#…...
Python如何操作RabbitMQ实现direct关键字发布订阅模式?有录播直播私教课视频教程
direct关键字发布订阅模式 基本用法 发布者 import json from rabbitmq import pika import rabbitmq# 建立连接 credentials rabbitmq.PlainCredentials(zhangdapeng,zhangdapeng520, ) # mq用户名和密码 connection_target rabbitmq.ConnectionParameters(host127.0.0.…...
如何应用数据图表了解家里的 Unifi 网络状况?
1. 前言 自从之前写了《【让 IT 更简单】使用 Ubiquiti 全家桶对朋友家进行网络改造》 《【Rethinking IT】如何结合 Unifi 和 MikroTik 设备打造家庭网络》两篇文章后,相信给各位正在用 Unifi 或者打算使用 Unifi 的朋友应该有所帮助。 那么,今天我就…...
新版K8s:v1.28拉取Harbor仓库镜像以及本地镜像(docker弃用改用containerd,纯纯踩坑)
目录 一、项目概述二、环境三、项目样式Harborkuboard运行样式 四、核心点Harbor安装config.toml文件修改(containerd)ctr、nerdctl相关命令kuboard工作负载 五、总结 一、项目概述 使用Kuboard作为k8s集群的管理平台,Harbor作为镜像仓库,拉取Harbor镜像…...
Unity URP切换品质和Feature开关的性能问题
现在对我的项目进行安卓端发布,需要切换品质和一些Feature开关。 我是这样做的。 划分品质 首先Renerer分为2个Android和PC,图中其他不用参考。 每个副本的URP Asset分为pc和android,例如图中的 hall和hall_android。 我们可以看到hall用的…...
jmeter解决返回unicode编辑
一般乱码有两种方法来解决: 1、修改配置文件jmeter.properties中默认编码格式ISO-8859-1(不支持中文),修改为utf-8 sampleresult.default.encoding utf-82、添加BeanShell PostProcessor加入 prev.setDataEncoding("utf-8")3、还有一种返回…...
C# 基础入门
第二章 C# 语法基础 2-1 C# 中的关键字 关键字,是一些被C#规定了用途的重要单词。 在Visual Studio的开发环境中,关键字被标识为蓝色,下图代码中,用红方框圈出的单词就是关键字。 关键字 class ,这个关键字的用途是…...
PHP 支付宝(单笔转账到银行账户接口)
alipay.fund.trans.tobank.transfer(单笔转账到银行账户接口) 小程序文档 - 支付宝文档中心 一、下载支付宝SDK,现有版本v1、v2、v3 https://github.com/alipay/alipay-sdk-php-all github 慢的话,DNS 直达即可 140.82.112.3 github.com 【host文…...
【Java万花筒】Java安全卫士:从密码学到Web应用攻击
Java安全锦囊:从Web应用攻击到加密算法,助你建立强固的开发堡垒 前言 在当今数字化时代,安全性至关重要,特别是对于Java开发者而言。本文将深入探讨Java安全与加密领域的关键库和技术,包括Bouncy Castle、Jasypt、Ke…...
redis安装-Linux为例
可以下载一个Shell或者MobaXterm工具,便于操作 在redis官网下载压缩包 开始安装 安装依赖 yum install -y gcc tcl切换目录 切换目录后直接把redis安装包拖到/user/local/src/下 cd /user/local/src/解压然后安装 #解压 tar -zxvf redis-7.2.4.tar.gz #安装 …...
iOS长按时无法保存图片问题解决方案
在使用iOS设备的用户中,相信很多人都有过在浏览网页时遇到长按时无法保存图片的困扰。这主要是因为网页开发者为了保护版权或隐私,默认屏蔽掉了图片长按时保存的功能。 具体来说,问题出在-webkit-touch-callout这个CSS属性上。这个属性用于定…...
Datawhale 强化学习笔记(一)
参考 在线阅读文档 github 教程 开源框架 JoyRL datawhalechina/joyrl: An easier PyTorch deep reinforcement learning library. (github.com) 策略梯度算法的两种不同的推导版本。 强化学习中的一些核心问题,比如优化值的估计、解决探索与利用等问题。 从传统强…...
首届PolarDB开发者大会在京举办,阿里云李飞飞:云数据库加速迈向智能化
1月17日,阿里云PolarDB开发者大会在京举办,中国首款自研云原生数据库PolarDB发布“三层分离”新版本,基于智能决策实现查询性能10倍提升、节省50%成本。此外,阿里云全新推出数据库场景体验馆、训练营等系列新举措,广大…...
Xshell远程连接Kali(默认 | 私钥)Note版
前言:xshell远程连接,私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...
2024年赣州旅游投资集团社会招聘笔试真
2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils: ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类,封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz,先构建任务的 JobD…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
以光量子为例,详解量子获取方式
光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学(silicon photonics)的光波导(optical waveguide)芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中,光既是波又是粒子。光子本…...
嵌入式学习笔记DAY33(网络编程——TCP)
一、网络架构 C/S (client/server 客户端/服务器):由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序,负责提供用户界面和交互逻辑 ,接收用户输入,向服务器发送请求,并展示服务…...
基于Springboot+Vue的办公管理系统
角色: 管理员、员工 技术: 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能: 该办公管理系统是一个综合性的企业内部管理平台,旨在提升企业运营效率和员工管理水…...
C++ 设计模式 《小明的奶茶加料风波》
👨🎓 模式名称:装饰器模式(Decorator Pattern) 👦 小明最近上线了校园奶茶配送功能,业务火爆,大家都在加料: 有的同学要加波霸 🟤,有的要加椰果…...
day36-多路IO复用
一、基本概念 (服务器多客户端模型) 定义:单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用:应用程序通常需要处理来自多条事件流中的事件,比如我现在用的电脑,需要同时处理键盘鼠标…...
