前端优选
前端优选

2020你必须知道的Grid布局

Grid布局

Grid布局即网格布局，将网页分成一个个的网格，然后通过这些网格进行组合，做出各种各样的布局。首先看看兼容性：

2020你必须知道的Grid布局_第1张图片

Grid布局    VS   Flex布局

Grid布局与flex布局只是看起来差不多，其实有着本质的区别。Grid是二维布局，而flex是一维布局。flex布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

但是Grid有个很大的问题就是兼容性不太好，不兼容ie。

DEMO:




    
    
    Grid布局
    



    
        One
        Two
        Three
        Four
        Five
        Six
        Seven
        Eight
        Nine
    

效果图：

2020你必须知道的Grid布局_第2张图片


容器和项目：我们通过在元素上声明 display：grid(块级元素) 或 display：inline-grid(行内块元素) 来创建一个网格容器。容器内的子元素就变成了一个个网格项目。

网络轨道:grid-template-columns和grid-template-row属性来定义网格中的行和列。

网格单元:容器内的子元素都是一个个网格单元。

repeat() 函数：可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

fr 关键字:为了方便表示比例关系，网格布局提供了fr关键字。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。fr 是一个自适应单位，被用于在一系列长度值中分配剩余空间，剩下的空间根据各自的数字按比例分配。

auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素。所以当浏览器宽度变化时，网格项目的位置也

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-gap: 5px;
  grid-auto-rows: 50px;
}

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

/* 表示列宽不小于100px，不大于1fr */
grid-template-columns: 1fr 1fr minmax(100px, 1fr);

auto 关键字

auto关键字表示由浏览器自己决定长度。

/* 第二列的宽度，基本上等于该列单元格的最大宽度，除非单元格内容设置了min-width，且这个值大于最大宽度 */
grid-template-columns: 100px auto 100px;

网格线的名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

.container {
  display: grid;
  grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
  grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}

网格布局允许同一根线有多个名字，比如[six r6]。

容器属性(可理解为父元素属性)

grid-row-gap ， grid-column-gap ， grid-gap

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）

grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式

 .wrapper {
            margin: 60px;
            /* 声明一个容器 */
            display: grid;
            /*  声明列的宽度 以及有几列 */
            grid-template-columns: repeat(3, 200px);
            /*  声明行间距和列间距  */
            grid-gap: 20px;
            /*  声明行的高度  */
            grid-template-rows: repeat(3,200px);
            line-height: 200px;
        }

2020你必须知道的Grid布局_第3张图片


grid-template-areas 属性

网格布局允许指定区域，一个区域由单个或者多个单元格组成。

.container{
    display:gird;
    /*三行三列的网格布局，行高和列宽都是100px*/
    grid-template-columns:100px 100px 100px;
    grid-template-columns:100px 100px 100px;
    /*a-i九个区域，分别对应九个单元格*/
    grid-template-areas:'a b c'
            'd e f'
            'g h i'
}

还可以将多个单元格合并为一个区域

grid-template-areas:' one one one '
                    ' two two two '
                    ' three three three '

/*实例*/
 grid-template-areas: 'one one one'
                'four four six'
                'nine nine nine';
/*对应的单元格中配置*/
.one{
    grid-area:one  /*相当于区域的命名*/
}
...

2020你必须知道的Grid布局_第4张图片


如果有些区域不需要使用，可以用“点”表示

/*中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域*/
 grid-template-areas: 'one . three'
                      'four five .'
                      'seven . nine';

2020你必须知道的Grid布局_第5张图片


grid-auto-flow属性

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。

默认是先行后列，即横着填满第一行，再填第二行。

将grid-auto-flow设置为columns，就会变成先列后行。

grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。


如图，右上角空了一格,设置row dense自动填充

grid-auto-flow: row dense;

2020你必须知道的Grid布局_第6张图片


grid-auto-flow: columns dense;

2020你必须知道的Grid布局_第7张图片


justify-items 属性， align-items 属性， place-items 属性

justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。这里的属性就和flex很相似了。

.container{
    align-items:start
}

2020你必须知道的Grid布局_第8张图片


place-items属性是align-items属性和justify-items属性的合并简写形式。

.container{
    place-items:center;
    /* 也可以不相同*/
    /* place-items: ; */
    /* place-items:start,cneter; */
}

2020你必须知道的Grid布局_第9张图片


justify-content 属性， align-content 属性， place-content 属性

justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。

这些属性与flex布局的justify-content属性、align-content属性基本相同

可设置的值有：

同上，place-content也是前两者的合并简写形式

.container{
 justify-content:center;
}

2020你必须知道的Grid布局_第10张图片


.container{
 justify-content:space-around;
}

2020你必须知道的Grid布局_第11张图片


.container{
 place-content: space-evenly;
}

2020你必须知道的Grid布局_第12张图片


grid-auto-columns 属性， grid-auto-rows 属性

有的时候元素会跑到指定的网格之外，这时候浏览器会默认创建网格来放置它。

比如我生成的网格是三行三列，而我指定了一个元素放在五行五列。

grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。

设置了之后行高和列宽会根据设置的来进行展示，如果不设置默认是根据网格里的内容大小来展示。

.container{
    grid-auto-rows: 50px;
}
.eight {
    background: #ABE3B7;
    grid-row-start: 4;
    grid-column-start: 2;
}

.nine {
    background: #BFB540;
    grid-row-start: 5;
    grid-column-start: 3;
}

2020你必须知道的Grid布局_第13张图片


grid-template 属性， grid 属性

这两个属性就是上面属性的合并写法。

grid-template:grid-template-columns、grid-template-rows和grid-template-areas

grid:grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow

网格项目属性(可理解为子元素属性)

grid-column-start 属性， grid-column-end 属性， grid-row-start 属性， grid-row-end 属性

项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。

/*one项目的位置在第2根行线和第4根行线之间*/
/* 没有指定左右边框所以默认还是在第1根到第2根之间*/
.one{
  grid-row-start: 2;
  grid-row-end: 4;
}

2020你必须知道的Grid布局_第14张图片


/* 设置了四个边框 */
/* 先列后行*/
.container{
    grid-auto-flow:column;
}.one{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

2020你必须知道的Grid布局_第15张图片


这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。

grid-column-start: span 3;

2020你必须知道的Grid布局_第16张图片


看到这里有一个问题，我当前的网格是3*3，我如果跨越4个网格会怎样呢？

2020你必须知道的Grid布局_第17张图片


结果显示会超出当前网格，因为超出了一个网格，所有剩下的部分将作为一个网格。所有会直接沾满。

如果span 5 ，则超出两个网格，剩余部分会平分成两个网格。

grid-column 属性， grid-row 属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。中间会加上/来区分。

.one {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.one{
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

其中也可以使用span关键字

.one {
    background: #19CAAD;
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}

2020你必须知道的Grid布局_第18张图片


grid-area 属性

grid-area属性指定项目放在哪一个区域

.container {
  grid-template-areas: 'one . three'
                       'four five .'
                       'seven . nine';
}
/* 只对one项目（元素）使用了grid-area属性*/
.one {
    background: #19CAAD;
    grid-area:five;
}

2020你必须知道的Grid布局_第19张图片


justify-self 属性， align-self 属性， place-self 属性

同样与flex类似。

可取的值：

.one {
    background: #19CAAD;
    grid-area:five;
    justify-self: center;
    align-self: center;
    /* place-self:center */
}

2020你必须知道的Grid布局_第20张图片


历史好文推荐：
1、Vue3之——和Vite不得不说的事                        2、大厂面试算法之斐波那契数列                        3、2020字节跳动面试题一面解析                          

“在看转发”是最大的支持

你可能感兴趣的:(2020你必须知道的Grid布局)

  • 构建现代微服务安全体系：Spring Security、JWT 与 Spring Cloud Gateway 实践 wy02_ 微服务安全spring
    构建现代微服务安全体系：SpringSecurity、JWT与SpringCloudGateway实践本文将基于提供的代码示例，详细介绍如何在一个Java微服务项目中使用SpringSecurity、JWT和SpringCloudGateway来构建一个高效且安全的微服务体系，并整合性能优化措施。基础流程登录认证：客户端通过用户名和密码获取JWT流程描述：客户端发送包含用户名和密码的登录请求到身份
  • Golang的代码结构规划 苹果酱0567 面试题汇总与解析课程设计springbootvue.jsjavamysql
    Golang的代码结构规划是一种具有高效性能的开发语言，其代码结构规划对于项目的可维护性和可扩展性至关重要。在Golang中，合理的代码结构可以使代码更加清晰易懂，方便团队协作和项目维护。本文将介绍Golang代码结构规划的最佳实践，帮助开发者更好地组织自己的代码。项目结构初探在开始编写Golang代码之前，我们首先需要了解一个标准的项目结构。一个典型的Golang项目结构包括以下几个目录：包含项
  • 【python】将word文档内容转换为excel表格 师兄师兄怎么办 pythonwordexcelpython
    在日常工作中，我们经常需要将Word文档中的内容提取并转换为Excel表格，以便进行数据分析和处理。本文将介绍如何使用Python编写一个简单的程序，将Word文档中的内容转换为Excel表格。一.实例使用以下word文档作为例子：工具界面如下：第一个弹窗选择对应的文档后选择打开：第二个弹窗选择保存路径以及excel表格的名字：生成后的效果如下：二.环境准备我们将使用tkinter库创建一个图形用
  • 静态页面在安卓端可以正常显示,但是在ios打开这个页面就需要刷新才能显示全图片 键盘侠007 ios
    这个问题可能有几个原因导致,我来分析一下并给出解决方案:首要问题是懒加载实现方式的兼容性问题。当前的懒加载实现可能在iOS上不够稳定。建议修改图片懒加载的实现方式://使用IntersectionObserverAPI实现懒加载functioninitLazyLoading(){constimageObserver=newIntersectionObserver((entries,observer
  • WEB安全--SQL注入--POST传参注入、SQL头部注入 神经毒素 web安全sql安全
    一、介绍：post传参和get传参对注入方式没有本质上的影响，只不过前者是通过页面上的表单提交数据后者是通过url传参。而头部注入是因为后端并没有直接将参数插入查询语句，而是通过插入或取出cookie、referer等参数进行数据查询或更改的；所以通常使用抓包工具在抓到的数据包上更改相应的参数进行注入。二、示例：2.1、POST示例：#less-17username和password是两个传入点，
  • Python中LLM的稀疏Transformer架构：Longformer与BigBird 二进制独立开发 非纯粹GenAIGenAI与Pythonpythontransformer架构开发语言分布式人工智能自然语言处理
    文章目录1.Transformer架构的挑战2.稀疏Transformer架构的提出2.1Longformer2.1.1局部注意力2.1.2全局注意力2.1.3实现2.2BigBird2.2.1随机注意力2.2.2局部注意力2.2.3全局注意力2.2.4实现3.稀疏Transformer架构的优势4.稀疏Transformer架构的挑战5.未来发展方向5.1更高效的稀疏注意力机制5.2自适应稀疏注
  • redis sentinel模式 与 redis 分片集群 配置 癸酉金鸡 redissentinel数据库
    Redis最低为5.0版本，以下为6.2.6版本信息。模式高可用性数据分片部署复杂度适用场景Sentinel模式高无中等中小规模，需要高可用性集群模式高支持复杂大规模，需要高可用性和数据分片RedisSentinel模式（在主从复制的基础上引入Sentinel实例，用于监控Redis节点的健康状态，并在主节点故障时自动进行故障转移）1.主节点redis.conf配置bind0.0.0.0port6
  • 第二章：12.4 学习曲线 望云山190 深度学习机器学习人工智能
    学习曲线的基本概念学习曲线是展示机器学习模型性能如何随着训练数据量增加而变化的图表。它们可以帮助我们理解模型在不同数据量下的表现，以及模型是否过拟合或欠拟合。二阶模型的学习曲线交叉验证错误（Jcv）：这条绿色曲线表示模型在未见过的数据上的表现。它反映了模型的泛化能力，即模型对新数据的预测能力。训练错误（Jtrain）：这条红色曲线表示模型在训练数据上的表现。它反映了模型对训练数据的拟合程度。学习曲
  • d2-crud-plus 使用小技巧（八）—— 分页旁边添加功能按钮（添加批量删除按钮） xuelong-ming d2-crud-plus前端
    需求在分页模块左边添加一个批量删除按钮，取消表格左上方的批量删除按钮。逻辑效果代码...
  • Pytorch官方文档英语翻译 yanzhiwen2 深度学习Pyrotchpytorch机器学习python人工智能深度学习
    深度学习Pytorch-Pytorch官方文档英语翻译1.a-e1.1span跨度1.2blended混合的1.3criterion标准1.4deprecated弃用的1.5clamp钳制1.6arbitraryshapes任意形状1.7explodinggradients梯度爆炸1.8converge收敛1.9approximate近似1.10arg参数1.11argument参数1.12con
  • hive建表语句 增加字段、分区基础操作 节点。csn 数据库#hivehivehadoopbigdata
    目录hive建表内部分区表外部分区表表结构复制：hive表删除hive表重命名表修改操作增加分区修改分区删除分区新增表字段hive建表IFNOTEXISTS:表不存在才会创建分隔符：field.delim是表的两个列字段之间的文件中的字段分隔符.serialization.format是文件序列化时表中两个列字段之间的文件中的字段分隔符.分区partition:创建表时可指定分区字段，多个分区字段
  • 在SpringBoot项目中有k8s配置，但报错 柠檬编程工作室 go&k8s运维springbootkubernetes后端
    如下报错一般是你没有将k8s的config拷贝到项目里，你可以将k8s主节点的config拷贝一下到项目中。2025-02-1309:27:21.873ERROR1671---[.models.V1Pod-1]i.k.c.informer.cache.ReflectorRunnable:classio.kubernetes.client.openapi.models.V1Pod#Reflector
  • STM32：STM32 DMA编程：DMA与USART的数据传输 kkchenjj STM32编程等单片机编程stm32嵌入式硬件单片机
    STM32：STM32DMA编程：DMA与USART的数据传输STM32_DMA简介DMA的基本概念DMA，全称为DirectMemoryAccess（直接内存访问），是一种硬件技术，允许数据在内存和外设之间直接传输，而无需CPU的干预。在STM32微控制器中，DMA控制器可以显著提高数据传输的效率，特别是在处理大量数据或高速数据流时，如音频、视频或传感器数据的采集和处理。原理DMA控制器包含多个
  • 打印机显示检查打印服务器,win10系统打开打印机提示再次检查打印机的名称怎么办... 項羽Sama 打印机显示检查打印服务器
    打印机是办公室经常会用到的打印设备，可是有不少用户在升级到win10系统之后，发现打开打印机提示再次检查打印机的名称，导致无法使用打印机，该怎么办呢，现在为大家分享一下win10系统打开打印机提示再次检查打印机的名称的具体解讲方法吧。1、打开电脑的控制面板-管理工具-服务(win+R打开运行，键入services.msc点击确定打开服务)-PrintSpooler。在服务里找到printspoo
  • 性能测试流程、主流性能工具 一只小H呀の jmeter
    性能测试流程性能测试流程测试测试需求分析性能测试计划和方案测什么：测试背景测试目的测试范围谁来测：进度和分工交付清单怎么测：测试策略性能测试用例设计性能测试测试执行性能分析和调优性能测试报告测试报告是对性能测试工作的总结，为软件后续验收和交付打下基础。测试报告的主要内容：测试工作的经历和回顾缺陷分析和调优风险评估性能测试结果测试工作的总结和改进主流性能测试工具loadrunnerHPLoadrun
  • Kubernetes源码分析之kubelet 「已注销」 runtime操作系统运维
    本节所有的代码基于1.13.4版本。启动分析Kubelet的启动参数有两种，kubeletFlags和kubeletConfig。其中，kubeletFlags与我们使用的kubelet的--参数命令保持一致；kubeletConfig通过解析特定的配置文件完成参数的配置，它们共同构成kubelet启动参数的配置。如图基本参数配置完成之后，接下来就是配置启动的Run方法。Kubelet启动的Run
  • jenkins自动化打包android,使用Jenkins+Pipline 持构建自动化部署之安卓源码打包、测试、邮件通知... 白汐牙
    一、引言Jenkins2.x的精髓是PipelineasCode，那为什么要用Pipeline呢？jenkins1.0也能实现自动化构建，但Pipeline能够将以前project中的配置信息以steps的方式放在一个脚本里，将原本独立运行于单个或者多个节点的任务连接起来，实现单个任务难以完成的复杂流程，形成流水式发布，构建步骤视图化。简单来说，Pipeline适用的场景更广泛，能胜任更复杂的发布
  • 微信DeepSeek王炸组合 金枝玉叶9 程序员知识储备1程序员知识储备2vue.js
    1.背景信息微信：腾讯旗下的超级社交应用，涵盖通讯、支付、小程序生态等，月活用户超10亿。DeepSeek：专注AGI（通用人工智能）的中国公司，核心产品包括大模型（如DeepSeek-R1、DeepSeek-Chat）、多模态技术及行业解决方案。“王炸组合”：通常指强强联合的顶级合作，可能暗示技术互补或场景融合。2.可能的合作方向AI功能嵌入微信生态：DeepSeek的大模型能力（如对话、搜索、
  • 【探索C++】友元 祐言QAQ 探索C++编程开发语言c++linuxjavahttps网络
    (꒪ꇴ꒪)，Hello我是祐言QAQ我的博客主页：C/C++语言，数据结构，Linux基础，ARM开发板，网络编程等领域UP快上，一起学习，让我们成为一个强大的攻城狮！送给自己和读者的一句鸡汤：集中起来的意志可以击穿顽石!作者水平很有限，如果发现错误，请在评论区指正，感谢在C++中，友元（friend）是一种特殊的关系，它允许一个类或函数访问另一个类的私有成员。通过友元关系，一个类可以将其他类或函
  • Simulink 配置参数中指定的设置创建 out.mat 文件时遇到了问题 云缘若仙 matlab
    报错：Unabletocreatefile'out.mat'specifiedin'ConfigurationParameters'>'DataImport/Export'>'LogDatasetdatatofile'.Possiblecausesforthisinclude:thespecifieddirectorydoesnotexist,thedirectoryorthefilearenot
  • 嵌入式工程师全攻略：岗位职责与技能要求详解 Nebula嵌入式 嵌入式科普嵌入式
    文章目录一、前言二、**硬件架构中最常用的有哪几种**三、嵌入式的岗位及技能要求3.1嵌入式硬件3.1.1主要职责3.1.2技能要求3.1.3学习建议3.2嵌入式单片机3.2.1主要职责3.2.2技能要求3.2.3学习建议3.3嵌入式linux3.3.1主要职责3.3.2技能要求3.3.3学习建议一、前言这是根据我个人和网上的一些资料编写的，可能有不对的地方请及时提醒。二、硬件架构中最常用的有哪几
  • 图论- Dijkstra算法 左灯右行的爱情 图论算法python
    Dijkstra算法前言概念BFS基础模版DijkstraDijkstra函数签名State类distTo记录最短路径伪代码模版第一个问题解答第二个问题解答第三个问题解答前言学习这个算法之间,必须要对BFS遍历比较熟悉,它的本质就是一个特殊改造过的BFS算法.概念Dijkstra算法是一种计算图中单源最短路径算法,本质上是一个经过特殊改造的BFS算法,改造点有两个:使用优先队列,而不是普通队列进行
  • 操作系统-实例详解fork()的工作原理（超详细版） Refulic. linux系统架构
    讲解这一主题的帖子很多，但是对于初学者来说依然很难理解。所以本文会先贴出完整的实例代码，然后逐句讲解。重点在于理解函数的工作逻辑。读者可以直接从代码段后开始阅读。#include#include#include#includeintmain(){pid_tpid=fork();//创建一个子进程if(pid0)块。子进程复制了父进程的PC，所以从fork()的返回点开始执行。操作系统在子进程中将f
  • 【OSTEP】操作系统导论-精翻讲解：第五章-进程API Refulic. linux运维服务器
    写在前面：学习操作系统是一个漫长且容易迷茫的过程。这本书在我的学习过程中给予了很大的帮助。本文将尽量精简内容，仅保留关键部分，并对学习中遇到的难点进行注释和解释。希望这能为初学者提供一些帮助和指引。本文所有涉及的图片及内容皆引用自：OperatingSystems:ThreeEasyPieces作者：RemziH.Arpaci-DusseauandAndreaC.Arpaci-Dusseau(Un
  • 图论 - 一些经典小算法思想(无题目例子) 左灯右行的爱情 图论算法java
    经典小算法前言拓扑结构名流问题暴力解法优化解法二分图二分图判定思路前言主要介绍一些有意思的小算法拓扑结构简单来说,把一幅图拉平,而且这个拉平的图里面,所有的箭头方向都是一致的.比如下图所有的箭头都是朝右的.注意:如果是一副有向图存在环,无法进行拓扑排序,因为肯定做不到所有箭头方向一致;那图的拓扑结构如何实现呢?这个特别简单,首先你要先确认好建图时对边的定义!如果有向边定义为[依赖]关系:比如节点2
  • 手搓操作系统-如何创建虚拟磁盘并装载内核(超详细版） Refulic. linuxbootstrap系统架构系统安全
    写在前面：本篇是完整的在Linux环境下，创建一个虚拟磁盘，并且将内核安装到磁盘并用虚拟机运行的过程。需要对bootstrap过程有一定的基础知识。遇到不懂的概念，如MBR，Grub等请务必参考笔者的另一篇文章操作系统架构-Linux主机从按下电源键到加载内核，都经历了什么？（超详细版）此外，读者还需要对文件系统有基本的理解。1.创建磁盘镜像1）通过在Shell提示符下输入以下命令创建磁盘镜像（提
  • 操作系统架构-什么是实模式？什么是保护模式？（超详细版） Refulic. 操作系统bootstraplinux系统架构系统安全
    本文不讨论技术细节，纯粹是为了方便读者理解实模式和保护模式的具体概念，并且对具体概念建立明确的边界意识。这些概念在笔者学习过程中一度难以理解，混淆不清。希望本文可以帮助到操作系统的初学者。什么是实模式模式是指CPU的运行环境，它决定了处理器如何执行指令、管理内存以及访问硬件资源。实模式（RealMode）是x86架构的一种处理器模式，也是最基础的运行模式。在了解实模式是怎么来的之前，我们需要简单回
  • 【Pydantic】Pydantic：新的Python 数据验证库 无糖气泡WU Pythonpython
    Python数据验证：PydanticPydantic简介Pydantic的主要特性Pydantic安装Pydantic使用Pydantic基本操作Field对象数据转换模型类转换为字典模型类转换为JSONPydantic简介Pydantic是一个在Python中用于数据验证和解析的第三方库。它提供了一种简单且直观的方式来定义数据模型，并使用这些模型对数据进行验证和转换。Pydantic的主要特性
  • stm32 DMA 每天学点 MCUstm32DMA
    stm32DMA介绍的定义存储器到存储器main.c存储器到外设main.cusart_dma.cusart_dma.h外设到存储器main.cusart_dma.cusart_dma.h中断函数对比理解介绍的定义存储器：用来存储程序代码和数据。易失性存储器：存储器断电后，它存储的数据内容丢失。易失性存储器存取速度快，如内存。非易失性存储器：存储器断电后，它存储的数据内容不丢失。非易失性存储器可长
  • 访问deep seek开放平台的c#代码 无敌爆爆关 c#unity
    访问deepseek平台首先需要去deepseek平台的api开放平台创建一个APIkey，这是首要前提，然后再使用下面这个脚本stringurl="https://api.deepseek.com/v1/chat/completions";stringkey="Bearer"+"自己的key";publicTexttext1;IEnumeratorPostData(Actionaction){s
  • java线程Thread和Runnable区别和联系 zx_code javajvmthread多线程Runnable
    我们都晓得java实现线程2种方式，一个是继承Thread，另一个是实现Runnable。 模拟窗口买票，第一例子继承thread，代码如下 package thread; public class ThreadTest { public static void main(String[] args) { Thread1 t1 = new Thread1(
  • 【转】JSON与XML的区别比较 丁_新 jsonxml
    1.定义介绍 (1).XML定义 扩展标记语言 (Extensible Markup Language, XML) ，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一，跨平台和语言，早已成为业界公认的标准。 XML是标
  • c++ 实现五种基础的排序算法 CrazyMizzz C++c算法
    #include<iostream> using namespace std; //辅助函数，交换两数之值 template<class T> void mySwap(T &x, T &y){ T temp = x; x = y; y = temp; } const int size = 10; //一、用直接插入排
  • 我的软件 麦田的设计者 我的软件音乐类娱乐放松
         这是我写的一款app软件，耗时三个月，是一个根据央视节目开门大吉改变的，提供音调，猜歌曲名。1、手机拥有者在android手机市场下载本APP，同意权限，安装到手机上。2、游客初次进入时会有引导页面提醒用户注册。（同时软件自动播放背景音乐）。3、用户登录到主页后，会有五个模块。a、点击不胫而走，用户得到开门大吉首页部分新闻，点击进入有新闻详情。b、
  • linux awk命令详解 被触发 linux awk
    awk是行处理器: 相比较屏幕处理的优点，在处理庞大文件时不会出现内存溢出或是处理缓慢的问题，通常用来格式化文本信息 awk处理过程: 依次对每一行进行处理，然后输出 awk命令形式: awk [-F|-f|-v] ‘BEGIN{} //{command1; command2} END{}’ file [-F|-f|-v]大参数，-F指定分隔符，-f调用脚本，-v定义变量 var=val
  • 各种语言比较 _wy_ 编程语言
                        Java Ruby PHP 擅长领域                  
  • oracle 中数据类型为clob的编辑 知了ing oracle clob
    public void updateKpiStatus(String kpiStatus,String taskId){ Connection dbc=null; Statement stmt=null; PreparedStatement ps=null; try { dbc = new DBConn().getNewConnection(); //stmt = db
  • 分布式服务框架 Zookeeper -- 管理分布式环境中的数据 矮蛋蛋 zookeeper
    原文地址： http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/ 安装和配置详解 本文介绍的 Zookeeper 是以 3.2.2 这个稳定版本为基础，最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/来获取，Zookeeper 的安装非常简单，下面将从单机模式和集群模式两
  • tomcat数据源 alafqq tomcat
    数据库 JNDI(Java Naming and Directory Interface，Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。 没有使用JNDI时我用要这样连接数据库： 03.  Class.forName("com.mysql.jdbc.Driver");  04.  conn
  • 遍历的方法 百合不是茶 遍历
                                                          遍历 在java的泛
  • linux查看硬件信息的命令 bijian1013 linux
    linux查看硬件信息的命令 一.查看CPU： cat /proc/cpuinfo   二.查看内存： free   三.查看硬盘： df   linux下查看硬件信息 1、lspci 列出所有PCI 设备； lspci - list all PCI devices:列出机器中的PCI设备（声卡、显卡、Modem、网卡、USB、主板集成设备也能
  • java常见的ClassNotFoundException bijian1013 java
    1.java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory   添加包common-logging.jar2.java.lang.ClassNotFoundException: javax.transaction.Synchronization    
  • 【Gson五】日期对象的序列化和反序列化 bit1129 反序列化
    对日期类型的数据进行序列化和反序列化时，需要考虑如下问题：   1. 序列化时，Date对象序列化的字符串日期格式如何 2. 反序列化时，把日期字符串序列化为Date对象，也需要考虑日期格式问题 3. Date A -> str -> Date B,A和B对象是否equals   默认序列化和反序列化     import com
  • 【Spark八十六】Spark Streaming之DStream vs. InputDStream bit1129 Stream
      1. DStream的类说明文档：   /** * A Discretized Stream (DStream), the basic abstraction in Spark Streaming, is a continuous * sequence of RDDs (of the same type) representing a continuous st
  • 通过nginx获取header信息 ronin47 nginx header
    1. 提取整个的Cookies内容到一个变量，然后可以在需要时引用，比如记录到日志里面， if ( $http_cookie ~* "(.*)$") {         set $all_cookie $1; }     变量$all_cookie就获得了cookie的值，可以用于运算了
  • java-65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999 bylijinnan java
    参考了网上的http://blog.csdn.net/peasking_dd/article/details/6342984 写了个java版的： public class Print_1_To_NDigit { /** * Q65.输入数字n，按顺序输出从1最大的n位10进制数。比如输入3，则输出1、2、3一直到最大的3位数即999 * 1.使用字符串
  • Netty源码学习-ReplayingDecoder bylijinnan javanetty
    ReplayingDecoder是FrameDecoder的子类，不熟悉FrameDecoder的，可以先看看 http://bylijinnan.iteye.com/blog/1982618 API说，ReplayingDecoder简化了操作，比如： FrameDecoder在decode时，需要判断数据是否接收完全： public class IntegerH
  • js特殊字符过滤 cngolon js特殊字符js特殊字符过滤
    1.js中用正则表达式 过滤特殊字符, 校验所有输入域是否含有特殊符号function stripscript(s) {    var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&mdash;—|{}【】‘；：”“'。，、？]"
  • hibernate使用sql查询 ctrain Hibernate
    import java.util.Iterator; import java.util.List; import java.util.Map; import org.hibernate.Hibernate; import org.hibernate.SQLQuery; import org.hibernate.Session; import org.hibernate.Transa
  • linux shell脚本中切换用户执行命令方法 daizj linuxshell命令切换用户
    经常在写shell脚本时，会碰到要以另外一个用户来执行相关命令，其方法简单记下：   1、执行单个命令：su - user -c "command" 如：下面命令是以test用户在/data目录下创建test123目录 [root@slave19 /data]# su - test -c "mkdir /data/test123" 
  • 好的代码里只要一个 return 语句 dcj3sjt126com return
    别再这样写了：public boolean foo() {    if (true) {         return true;     } else {          return false;    
  • Android动画效果学习 dcj3sjt126com android
    1、透明动画效果 方法一：代码实现 public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, fals
  • linux复习笔记之bash shell (4)管道命令 eksliang linux管道命令汇总linux管道命令linux常用管道命令
    转载请出自出处： http://eksliang.iteye.com/blog/2105461     bash命令执行的完毕以后，通常这个命令都会有返回结果，怎么对这个返回的结果做一些操作呢？那就得用管道命令‘|’。     上面那段话，简单说了下管道命令的作用，那什么事管道命令呢？     答：非常的经典的一句话，记住了，何为管
  • Android系统中自定义按键的短按、双击、长按事件 gqdy365 android
    在项目中碰到这样的问题： 由于系统中的按键在底层做了重新定义或者新增了按键，此时需要在APP层对按键事件（keyevent）做分解处理，模拟Android系统做法，把keyevent分解成： 1、单击事件：就是普通key的单击； 2、双击事件：500ms内同一按键单击两次； 3、长按事件：同一按键长按超过1000ms（系统中长按事件为500ms）； 4、组合按键：两个以上按键同时按住；
  • asp.net获取站点根目录下子目录的名称 hvt .netC#asp.nethovertreeWeb Forms
    使用Visual Studio建立一个.aspx文件(Web Forms)，例如hovertree.aspx,在页面上加入一个ListBox代码如下： <asp:ListBox runat="server" ID="lbKeleyiFolder" />   那么在页面上显示根目录子文件夹的代码如下： string[] m_sub
  • Eclipse程序员要掌握的常用快捷键 justjavac javaeclipse快捷键ide
      判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。   曾有人在豆瓣评 《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个 程序员图书列表，目的也就是通过读书，让程序员变懒。  写道 程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可
  • c++编程随记 lx.asymmetric C++笔记
     为了字体更好看，改变了格式……   &&运算符：   #include<iostream> using namespace std; int main(){      int a=-1,b=4,k;      k=(++a<0)&&!(b--
  • linux标准IO缓冲机制研究 音频数据 linux
    一、什么是缓存I/O(Buffered I/O)缓存I/O又被称作标准I/O,大多数文件系统默认I/O操作都是缓存I/O。在Linux的缓存I/O机制中，操作系统会将I/O的数据缓存在文件系统的页缓存(page cache)中，也就是说，数据会先被拷贝到操作系统内核的缓冲区中，然后才会从操作系统内核的缓冲区拷贝到应用程序的地址空间。1.缓存I/O有以下优点:A.缓存I/O使用了操作系统内核缓冲区，
  • 随想 生活 暗黑小菠萝 生活
    其实账户之前就申请了，但是决定要自己更新一些东西看也是最近。从毕业到现在已经一年了。没有进步是假的，但是有多大的进步可能只有我自己知道。   毕业的时候班里12个女生，真正最后做到软件开发的只要两个包括我，PS：我不是说测试不好。当时因为考研完全放弃找工作，考研失败，我想这只是我的借口。那个时候才想到为什么大学的时候不能好好的学习技术，增强自己的实战能力，以至于后来找工作比较费劲。我
  • 我认为POJO是一个错误的概念 windshome javaPOJO编程J2EE设计
                  这篇内容其实没有经过太多的深思熟虑，只是个人一时的感觉。从个人风格上来讲，我倾向简单质朴的设计开发理念；从方法论上，我更加倾向自顶向下的设计；从做事情的目标上来看，我追求质量优先，更愿意使用较为保守和稳妥的理念和方法。    &
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他