WangChloe
WangChloe

每天10个前端知识点：布局大全

个人博客已上线，欢迎前去访问评论！
无媛无故 - wangchloe的个人博客

嗯！明天请假不更了。这几天把性能优化和面向对象给整出来，又是费脑子的几篇。
啊对，面试题有更新，记得复看。
最近遇到的前端面试题(2017.02.23更新版)

以下内容若有问题烦请即时告知我予以修改，以免误导更多人。

本次内容主要整理来源：布局 - 代码库 - NEC : 更好的CSS样式解决方案

以下代码可复制至codePen实践

一. 单列布局

1. 水平居中

(1) 文本、图片等行内元素

(2) 定宽块级元素

(3) 不定宽块元素

  • inline + text-align
  • table + margin
  • float + relative
  • absolute + transform

(4) 多个块级元素(单个块级元素也可用)

  • inline-block + text-align
  • flex + justify-content

2. 垂直居中

(1) 父元素高度确定的单行文本

(2) 父元素高度确定的多行文本

(3) 子元素定高块级元素

(4) 子元素不定高块级元素

  • absolute + transform
  • flex + align-items

3. 水平垂直居中

(1) 定宽高

(2) 不定宽高

  • inline-block + table-cell
  • table-cell + absolute
  • absolute + transform
  • flex + justify-content + align-items
  • jQuery

二. 两列布局

1. 两个div并排的多种方法

  • 定位
  • margin负值
  • 浮动
  • 行内块
  • table

2. 左侧定宽，右侧自适应

  • float + margin


    
左侧定宽

    
右侧自适应
  • float + margin


    
左侧定宽

    
右侧自适应
  • absolute + margin


    
左侧定宽

    
右侧自适应
  • relative + float + margin


    

        
左侧定宽

    

    

        

            
右侧自适应
  • absolute + margin


    

        

            
左侧定宽

        

        

            
右侧自适应

3. 左侧自适应，右侧定宽(基本同理，不一一列举)

  • margin + absolute


    
左侧自适应

    
右侧定宽
  • relative + float + margin


    

        

            
左侧自适应

        

    

    

        
右侧定宽

三. 等高布局

  • float + margin-bottom负值


    

        

            左侧左侧左侧左侧

            左侧左侧左侧左侧

            左侧左侧左侧左侧

            左侧左侧左侧左侧

        

        

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧
  • flex


    

        

            左侧左侧左侧左侧

            左侧左侧左侧左侧

            左侧左侧左侧左侧

            左侧左侧左侧左侧

        

        

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

            右侧右侧右侧右侧

四. 多列布局

1. 左右定宽，中间自适应

  • absolute + margin


    
左侧定宽

    
中间自适应

    
右侧定宽
  • relative + float + margin


    

        
左侧定宽

    

    

        

            
中间自适应

        

    

    

        
右侧定宽

圣杯布局

  • 中间栏放到文档流前面，保证先行渲染
  • 三栏全部float:left浮动
  • 中间栏在添加相对定位，并配合left和right属性

效果上表现为三栏是单独分开的

可参考该篇圣杯的分析过程：【CSS】 布局之圣杯布局)



header



  
middle

  
left

双飞翼布局

  • 中间栏放到文档流前面，保证先行渲染
  • 三栏全部float:left浮动
  • 在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right

效果上表现为左右两栏在中间栏的上面

  • 区别：双飞翼多了1个div，少用大致4个css属性（圣杯布局中间div padding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4）
    作者：吕延庆
    链接：https://www.zhihu.com/question/21504052/answer/50053054
    来源：知乎
    著作权归作者所有，转载请联系作者获得授权。


header



    
middle




left

2. 左侧自适应，中间右侧定宽



    

        

            
左侧自适应

        

    

    

        
中间定宽

    

    

        
右侧定宽

3. 右侧自适应，中间左侧定宽



    

        
左侧定宽

    

    

        
中间定宽

    

    

        

            
右侧自适应

五. 图片绝对居中




    ![](img/xxx.png)

图片居中溢出隐藏




    

        ![](http://upload-images.jianshu.io/upload_images/2125655-c8e8dd40292927d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        ![](http://upload-images.jianshu.io/upload_images/2125655-c8e8dd40292927d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    





    

        ![](http://upload-images.jianshu.io/upload_images/2125655-da04da0d01be925b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        ![](http://upload-images.jianshu.io/upload_images/2125655-da04da0d01be925b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    





    

        ![](http://upload-images.jianshu.io/upload_images/2125655-9ec86b9faa6c1022.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        ![](http://upload-images.jianshu.io/upload_images/2125655-9ec86b9faa6c1022.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

六. 两列三列自适应




    

        

            
主列1内容区

        

    

    

        
侧列1内容区

    





    

        

            
主列2内容区

        

    

    

        
侧列2内容区

    





    

        

            
主列3内容区

        

    

    

        
侧列a内容区

    

    

        
侧列b内容区

    





    

        

            

                

                    
主列5内容区

                

            

            

                
侧列5内容区

            

        

    

    

        
侧列4内容区

七. 全屏自适应

  • absolute



    顶部




    内容左侧




    内容右侧




    底部
  • flex



    

        顶部
    

    

        

            内容左侧
        

        

            内容右侧
        

    

    

        底部

八. 底部显示自适应




    

        
请增加或减少内容，或改变窗口大小，以便查看效果。

        
请增加或减少内容，或改变窗口大小，以便查看效果。

        
请增加或减少内容，或改变窗口大小，以便查看效果。

        
请增加或减少内容，或改变窗口大小，以便查看效果。

        
请增加或减少内容，或改变窗口大小，以便查看效果。

    





    
底部始终在文档末尾，当文档较长时跟随在文档末尾，当文档较短时在窗口底部。

九. 前自适应后跟随




    
这是一段长度未知的文本，自动换行，且不会把右边的时间挤掉，修改这段文字长度或改变窗口宽度试试。

    
2009-08-08

十. 图文问题

十一. 表头固定内容滚动




    

        
           
定宽a定宽b定宽c最后列不定宽d

        
    

    

        

            
                
定宽a定宽b定宽c最后列不定宽d

                
定宽a定宽b定宽c最后列不定宽d

                
定宽a定宽b定宽c最后列不定宽d

                
定宽a定宽b定宽c最后列不定宽d

                
定宽a定宽b定宽c最后列不定宽d

                
定宽a定宽b定宽c最后列不定宽d

既然读到这了，不如点个喜欢吧！

更多内容可以订阅本人微信公众号，一起开启前端小白进阶的世界！

公众号是坚持日更的，不发文的时候推送一些我觉得好用的前端网站或者看到的一些问题的解决方案，也更便于大家交流，就酱。

每天10个前端知识点：布局大全_第1张图片
微信公众号：无媛无故

你可能感兴趣的:(每天10个前端知识点：布局大全)

  • Maven 中的 Artifact 与 GroupId：定义与使用 drebander Mavenmavenjava
    1.什么是Maven的Artifact和GroupId？在Maven中，Artifact和GroupId是构建和管理项目依赖的核心概念，它们用来唯一标识一个Maven项目或库。理解这两个概念对于管理Maven项目的依赖关系、构建过程和版本控制至关重要。Artifact和GroupId结合构成了Maven依赖的唯一标识符，通常被称为坐标（Coordinate）。2.GroupId：组织标识符2.1G
  • 成功解决 python+kivy的raise Exception(‘SDL2: Unable to load image‘) Unable to get a Window, abort. projectnone2019 python开发语言后端
    运行python+kivy一个小程序出错，代码如下：fromkivy.appimportAppfromkivy.uix.floatlayoutimportFloatLayoutclassSizeFloat(FloatLayout):def__init__(self,**kwargs):super().__init__(**kwargs)classSizeApp(App):defbuild(self
  • 栈和stack 刃神太酷啦 蓝桥杯C++组C++数据结构
    栈和stack栈是一种访问受限的线性表进栈和出栈时记得检查空间还有没有longlongint最大能存的数是2^63-1如何用逆波兰表达式求结果（一般用栈）：1.遇到数，直接进栈2.遇到操作符，弹出两个栈顶元素，计算之后，再放入栈中
  • Windows环境下es8的集群部署 想养一只萨摩耶～ Elasticsearchelasticsearch大数据服务器
    原创文章：Windows环境下es8的集群部署–编程屋目录1相关概念1.1单机集群1.2集群Cluster1.3节点Node2Windows下部署2.1节点node-10012.2节点node-10022.3节点node-10031相关概念1.1单机集群单台Elasticsearch服务器提供服务，往往都有最大的负载能力，超过这个阀值，服务器新能就会大大降低不可用，所以生产环境中，一般都是运行在指
  • Fink与Hadoop的简介以及联系 Bugkillers hadoop大数据分布式
    Fink和Hadoop是两个常用于大数据处理的开源工具，它们可以搭配使用以构建高效的数据处理系统。一、Fink和Hadoop的关系Fink：1、Fink是一个分布式流处理框架，专注于实时数据处理。它支持高吞吐、低延迟的流处理，适用于实时分析、事件驱动应用等场景。2、Fink提供精确一次（exactly-once）语义，确保数据处理的准确性。Hadoop：1、Hadoop是一个分布式存储和批处理框架
  • Qt - MVC模型/视图编程 骆驼胡杨 Qtqt
    MVC模型/视图编程Qt中的模型/视图架构用来实现大量的数据存储、处理及显示。MVC(Model-View-Controller)包括了3个组件：模型（Model）是应用对象，用来表示数据；视图（View）是模型的用户界面，用来显示数据；控制（Controller）定义了用户界面对用户输入的反应方式。委托（Delegate）用于定制数据的渲染和编辑方式。1.模型所有的模型都基于QAbstractI
  • Java 编码系列：集合框架（List、Set、Map 及其常用实现类） pjx987 java编码javalistmap
    引言在Java开发中，集合框架是不可或缺的一部分，它提供了存储和操作一组对象的工具。Java集合框架主要包括List、Set和Map接口及其常用的实现类。正确理解和使用这些集合类不仅可以提高代码的可读性和性能，还能避免一些常见的错误。本文将深入探讨Java集合框架的底层原理，并结合大厂的最佳实践，帮助读者掌握这些核心概念。1.List接口及其常用实现类1.1基本概念List接口表示一个有序的集合，
  • QtCreator 模块/视图编程( 一） 模型类，自定义模型QStringListModel,QStandardItemModel,QFileSystemModel,QSqlQueryModel, psujtfc QtQtCreatorQtCreator模块视图模型类自定义模型
    1模型/视图架构1.1模型所有的模型都是基于QAbstractItemModel类，这个类定义了一个接口，可以供视图和委托来访问数据。Qt提供的现成模型：QStringListModel:用来存储一个简单的QString项目列表QStandardItemModel:管理复杂的树型结构数据项，每一个数据项可以包含任意数据QFileSystemModel:提供了本地文件系统中文件和目录的信息QSqlQ
  • web第三次作业 naodianbozzz 前端cssjavascript
    实现网页登入窗口的显示隐藏登录窗口滑动效果*{margin:0;padding:0;box-sizing:border-box;}html,body{width:100%;height:100%;}.container{width:100%;height:100%;background-color:#f2f1f2;}header{width:1200px;height:50px;backgroun
  • eniops库中pack函数使用方法 安安爸Chris python深度学习pytorch
    pack就是打包。举个例子importtorchimporteinops#创建输入张量x=torch.randn(1,6,1,2)#形状(1,6,1,2)#使用pack打包，注意输入必须是数组，所以这里要加一个[]flatten,ps=einops.pack([x],'h*d')print("xshape:",x.shape)#输出:torch.Size([1,6,1,2])print("flat
  • Qt模型/视图结构 十年编程老舅 QT开发qtqt开发Qt模型qt教程C++
    MVC设计模式是起源于Smalltalk的一种与用户界面相关的设计模式。通过使用此模式，可以有效地分离数据和用户界面。MVC设计模式包括三个元素：表示数据的模型（Model）、表示用户界面的视图（View）和定义了用户在界面上操作的控制器（Controller）。与MVC设计模式类似，Qt引入了模型/视图结构用于完成数据与界面的分离，即InterView框架。但不同的是，Qt的InterView框
  • Java程序设计（五）：基于SpringBoot+Vue的苗族文化分享平台的设计与实现 人工智能_SYBH 2025年java程序设计javaspringbootvue.js
    1.引言随着互联网技术的发展，文化传承与传播方式发生了巨大的变革。传统文化的传承不再仅依赖于线下活动，而是越来越多地通过数字化平台进行传播。为了促进苗族文化的传承与推广，本文设计并实现了一个基于SpringBoot和Vue的苗族文化分享平台。该平台通过现代化的技术架构，提供了多种功能模块，包括公告管理、文化遗产管理、资源管理、活动管理、跨文化交流等，既为管理员提供便捷的管理工具，也为普通用户提供了
  • 【性能测试】如何理解“10个线程且10次循环“的请求和“100线程且1次循环“的请求 朱公子的Note 如何理解线程且循环的请求jmeter
    在性能测试中，我们常常会见到不同的并发配置：比如“10个线程且10次循环”与“100线程且1次循环”。乍一看，这两个设置的总请求数都是100次，但它们对系统的压力和测试场景却截然不同。了解其中的区别，能帮助你更精准地模拟真实用户负载，提升性能测试的实战效果。在实际业务中，不同的应用场景要求系统既要应对持续稳定的流量，也需要在突发流量下保持稳定。通过不同的线程与循环配置，我们可以灵活地模拟这些场景，
  • 线程池代码分析及延申应用 埃菲尔铁塔_CV算法 c++算法开发语言人工智能opencv机器学习
    代码功能概述这段C++代码实现了一个简单的线程池类MthreadPool，线程池是一种用于管理和复用线程的机制，它可以避免频繁创建和销毁线程带来的开销，提高程序的性能。MthreadPool类允许用户指定线程池的最小和最大线程数，并提供了添加任务、管理线程数量等功能。代码详细解释1.类的定义和成员变量#include"MthreadPool.h"MthreadPool::MthreadPool(i
  • MAVEN私服配置 可儿·四系桜 javamavenjava
    声明：本用例访问的私服地址及密码为：访问私服：http://192.168.150.101:8081访问密码：admin/admin请按实际私服地址密码替换即可，该私服地址仅用于文档案例，实际不可访问。1.下载maven请根据实际情况按需下载即可。maven官网下载JDK对应的Maven版本：JDK版本Maven版本支持情况JDK1.3Maven2.0.11及以下JDK1.4Maven2.0.11
  • Jetson Agx Orin平台JP6.0-r36.3版本修复了vi模式下的原始图像损坏（线条伪影） free-xx NvidiaJetson平台相机开发驱动开发jetsonorincamera
    1.问题描述这是JP-6.0GA/l4t-r36.3.0的一个已知问题通过vi模式捕获的图像会导致异常线条参考下面的快照来演示这些线伪影这个问题只能通过VI模式进行修复，不应该通过LibArgus看到。此外，这是由于内存问题。由于upstream已经将属性名称更改为“dma-noncoherent”。如果设备是一致的，内核将跳过CPU/设备同步。2.修复方法这里有两个修复方法来解决这个问题。(1)
  • Linux内核中的双向链表list_head ioriwc linux链表运维
    双向链表在Linux内核中使用非常多，它是内核各种队列、栈的基础，相关的结构定义和函数均在include/linux/list.h中定义，下面介绍下其原理及使用方法。1、结构体定义structlist_head{structlist_head*next,*prev;};双向链表结构体很简单，有prev和next两个指针，分别指向链表的前一节点和后一节点。这里专门讲下空链表，空链表指链表的prev和
  • 每天五分钟深度学习框架pytorch：搭建谷歌的Inception网络模块 每天五分钟玩转人工智能 深度学习框架pytorch深度学习pytorch网络人工智能机器学习Inception
    本文重点前面我们学习了VGG，从现在开始我们将学习谷歌公司推出的GoogLeNet。当年ImageNet竞赛的第二名是VGG，而第一名就是GoogLeNet,它的模型设计拥有很多的技巧，这个model证明了一件事：用更多的卷积，更深的层次可以得到更好的结构GoogLeNet的网络结构如图所示就是GoogLeNet的网络结构，在这个网络结构中我们可以看到红色框起来的地方，他就是Inception块，
  • C++ List 练气十三层 STLc++
    C++11中的std::list是一种双向链表容器。在底层，std::list的每个元素都被包装在一个节点内，每个节点包括一个指向前一个节点的指针、一个指向后一个节点的指针以及元素本身。下面是std::list常用的功能及示例：插入元素#include#includeintmain(){std::listmylist={1,2,3};//在头部插入元素mylist.push_front(0);//
  • 探索Node.js的原生插件新境界：使用`node-gyp` 洪新龙
    探索Node.js的原生插件新境界：使用node-gypnode-gypNode.jsnativeaddonbuildtool项目地址:https://gitcode.com/gh_mirrors/no/node-gyp在Node.js的生态系统中，将高性能的C/C++代码融入到JavaScript世界已经成为提升应用性能的关键手段。今天，我们要向大家隆重推荐一个不可或缺的工具——node-gyp
  • android-为手机设置全局代理 carden_coder agentandroidandroid
    有这么一个需求，需要给手机设置全局代理。百度到的结果都是设置后，如果需要清除代理的话，需要重启手机，这里使用的方式是不需要重启的方式后实现方式如下：设置代理:String[]strings={"settingsputglobalhttp_proxy"+ip+":"+port};ShellUtils.CommandResultcommandResult2=ShellUtils.execCmd(str
  • Android 10.0 系统Settings主菜单wifi二级菜单去掉返回acitonbar功能 安卓兼职framework应用工程师 android10.0Rom定制化高级进阶androidactionssettings二级菜单返回键action返回键
    1.前言在10.0的系统产品定制化开发中，在原生系统Settings的主菜单蓝牙wifi进入二级菜单中的页面中，最上面都有一个ActionBar的返回键，在某种情况下进行产品定制的时候，不需要这个返回键，所以接下来分析下这个返回键布局，来实现功能2.系统Settings主菜单蓝牙wifi二级菜单去掉返回acitonbar功能的核心类packages/apps/Settings/src/com/an
  • 数据结构 单链表 ZY-JIMMY 算法与数据结构精析带头结点的单链表线性表的链式存储结构
    目录线性表的链式存储结构1、链接存储方法2、结点结构3、头指针head和终端结点线性表链式存储结构的建立单链表的基本操作1、初始化单链表2、得到一个结点3、头插法4、尾插法5、pos位置插入6、是否为空7、查找key的前驱8、删除data域为key的结点9、摧毁函数10、求单链表的长度11、打印单链表completecode线性表的链式存储结构单链表是一种链式存取的数据结构，用一组地址任意的存储单
  • GAN网络 Wzongming pycharmpython
    """ModuleimplementingGANwhichwillbetrainedusingtheProgressivegrowingtechnique->https://arxiv.org/abs/1710.10196"""importdatetimeimportosimporttimeimporttimeitimportnumpyasnpimporttorchasthclassGenerat
  • 省市区三级联动 The_era_achievs_hero javalinux数据库
    题十一：省市区三级联动要求：通过三个下拉菜单的联动来实现，第一级下拉菜单为省级，第二级下拉菜单为市级，第三级下拉菜单为区级。当点击第一级下拉菜单，第二级菜单的内容会自动匹配；选择第二级菜单时，第三级菜单会自动生成。当我取消上一级菜单的选项时，次一级选项会自动消失。原理：架构出三个选择的框架，用change分别监听provice和city表单元素值的变化。通过获取实时的值来改变下一级里面的内容，新增
  • 贪吃蛇案例 The_era_achievs_hero javajavascript开发语言
    题十：贪吃蛇还原要求：只需对所给js代码的部分函数进行还原最终实现效果即可原理：首先获得蛇的头部定位，再根据键盘改变头部的位置。更新蛇的身体数组，删除蛇身体的最后一个元素，并生成新数组(头部作为新数组的第一个元素)//移动蛇的头部nextStep(){//TODO：待补充代码////只需完善该函数实现功能，不允许修改别处代码//使用对象展开运算符，复制当前蛇的头部位置consthead={...t
  • list中将具有对应字段的某一个对象放在第一个 NewBee.Mu 从头开始学java注意事项知识点总结java大数据mysql
    publicclassDemo{privateIntegerid;privateIntegernum;publicDemo(){}publicIntegergetId(){returnid;}publicvoidsetId(Integerid){this.id=id;}publicIntegergetNum(){returnnum;}publicvoidsetNum(Integer<
  • 重写event函数 大G哥
    4、重写event函数如果每个对象的事件处理函数有多个，可以一个个重写，也可以重写事件分发函数()。案例：4.1、新建工程4.2、重写该窗口的鼠标按下及抬起事件方式1：.h中声明登录后复制virtualvoidmousePressEvent(QMouseEvent*event);virtualvoidmouseReleaseEvent(QMouseEvent*event);1.2..cpp中实现登
  • flutter常见面试题（欢迎私信投稿——更新到10） 郝晨妤 flutterflutter前端
    1、谈谈Flutter中的Future、async和awaitFuture对象表示异步操作的结果，我们通常通过then（）来处理返回的结果async用于标明函数是一个异步函数，其返回值类型是Future类型await用来等待耗时操作的返回结果，这个操作会阻塞到后面的代码isolate异步并行多个任务，Future是异步串行多个任务2、介绍Widget、State、Context概念Widget：在
  • 全面了解 Node.js、npm、yarn、node-gyp、Python、Visual Studio 和 Electron 的关联性 古木12345 node.jsnpmpythonelectronyarn
    好的，以下是一个全面且深入的详细解析，针对Electron桌面开发工具链及其相关依赖，包含每个关键模块（Node.js、npm、yarn、Python、node-gyp、VisualStudio、Electron）及其实现原理、功能、关联性和使用示例，确保您能完整理解这些工具的用途和关联性。一、基础工具链模块详细介绍1.Node.js1.1功能概述Node.js是一个运行时环境，它允许开发者在服务
  • java责任链模式 3213213333332132 java责任链模式村民告县长
    责任链模式，通常就是一个请求从最低级开始往上层层的请求，当在某一层满足条件时，请求将被处理，当请求到最高层仍未满足时，则请求不会被处理。 就是一个请求在这个链条的责任范围内，会被相应的处理，如果超出链条的责任范围外，请求不会被相应的处理。 下面代码模拟这样的效果： 创建一个政府抽象类,方便所有的具体政府部门继承它。 package 责任链模式; /** *
  • linux、mysql、nginx、tomcat 性能参数优化 ronin47
    一、linux 系统内核参数 /etc/sysctl.conf文件常用参数 net.core.netdev_max_backlog = 32768 #允许送到队列的数据包的最大数目 net.core.rmem_max = 8388608 #SOCKET读缓存区大小 net.core.wmem_max = 8388608 #SOCKET写缓存区大
  • php命令行界面 dcj3sjt126com PHPcli
    常用选项 php -v php -i PHP安装的有关信息 php -h 访问帮助文件 php -m 列出编译到当前PHP安装的所有模块 执行一段代码 php -r 'echo "hello, world!";' php -r 'echo "Hello, World!\n";' php -r '$ts = filemtime("
  • Filter&Session 171815164 session
    Filter HttpServletRequest requ = (HttpServletRequest) req; HttpSession session = requ.getSession(); if (session.getAttribute("admin") == null) { PrintWriter out = res.ge
  • 连接池与Spring,Hibernate结合 g21121 Hibernate
            前几篇关于Java连接池的介绍都是基于Java应用的，而我们常用的场景是与Spring和ORM框架结合，下面就利用实例学习一下这方面的配置。         1.下载相关内容：     &nb
  • [简单]mybatis判断数字类型 53873039oycg mybatis
           昨天同事反馈mybatis保存不了int类型的属性,一直报错，错误信息如下:       Caused by: java.lang.NumberFormatException: For input string: "null" at sun.mis
  • 项目启动时或者启动后ava.lang.OutOfMemoryError: PermGen space 程序员是怎么炼成的 eclipsejvmtomcatcatalina.sheclipse.ini
       在启动比较大的项目时，因为存在大量的jsp页面，所以在编译的时候会生成很多的.class文件，.class文件是都会被加载到jvm的方法区中，如果要加载的class文件很多，就会出现方法区溢出异常 java.lang.OutOfMemoryError: PermGen space.     解决办法是点击eclipse里的tomcat，在
  • 我的crm小结 aijuans crm
    各种原因吧，crm今天才完了。主要是接触了几个新技术： Struts2、poi、ibatis这几个都是以前的项目中用过的。 Jsf、tapestry是这次新接触的，都是界面层的框架，用起来也不难。思路和struts不太一样，传说比较简单方便。不过个人感觉还是struts用着顺手啊，当然springmvc也很顺手，不知道是因为习惯还是什么。jsf和tapestry应用的时候需要知道他们的标签、主
  • spring里配置使用hibernate的二级缓存几步 antonyup_2006 javaspringHibernatexmlcache
    ．在spring的配置文件中 applicationContent.xml，hibernate部分加入 xml 代码 <prop key="hibernate.cache.provider_class">org.hibernate.cache.EhCacheProvider</prop> <prop key="hi
  • JAVA基础面试题 百合不是茶 抽象实现接口String类接口继承抽象类继承实体类自定义异常
    /*   * 栈（stack）：主要保存基本类型（或者叫内置类型）（char、byte、short、   *int、long、 float、double、boolean）和对象的引用，数据可以共享，速度仅次于   * 寄存器（register），快于堆。堆（heap）：用于存储对象。   */  &
  • 让sqlmap文件 "继承" 起来 bijian1013 javaibatissqlmap
            多个项目中使用ibatis , 和数据库表对应的 sqlmap文件（增删改查等基本语句)，dao, pojo 都是由工具自动生成的, 现在将这些自动生成的文件放在一个单独的工程中，其它项目工程中通过jar包来引用 ，并通过"继承"为基础的sqlmap文件，dao,pojo 添加新的方法来满足项
  • 精通Oracle10编程SQL(13)开发触发器 bijian1013 oracle数据库plsql
    /* *开发触发器 */ --得到日期是周几 select to_char(sysdate+4,'DY','nls_date_language=AMERICAN') from dual; select to_char(sysdate,'DY','nls_date_language=AMERICAN') from dual; --建立BEFORE语句触发器 CREATE O
  • 【EhCache三】EhCache查询 bit1129 ehcache
    本文介绍EhCache查询缓存中数据，EhCache提供了类似Hibernate的查询API，可以按照给定的条件进行查询。   要对EhCache进行查询，需要在ehcache.xml中设定要查询的属性   数据准备 @Before public void setUp() { //加载EhCache配置文件 Inpu
  • CXF框架入门实例 白糖_ springWeb框架webserviceservlet
    CXF是apache旗下的开源框架，由Celtix + XFire这两门经典的框架合成，是一套非常流行的web service框架。 它提供了JAX-WS的全面支持，并且可以根据实际项目的需要，采用代码优先（Code First）或者 WSDL 优先（WSDL First）来轻松地实现 Web Services 的发布和使用，同时它能与spring进行完美结合。 在apache cxf官网提供
  • angular.equals boyitech AngularJSAngularJS APIAnguarJS 中文APIangular.equals
    angular.equals   描述: 比较两个值或者两个对象是不是 相等。还支持值的类型，正则表达式和数组的比较。   两个值或对象被认为是 相等的前提条件是以下的情况至少能满足一项： 两个值或者对象能通过=== （恒等） 的比较 两个值或者对象是同样类型，并且他们的属性都能通过angular
  • java-腾讯暑期实习生-输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A[0]*A[1]*...*A[i-1]*A[i+1] bylijinnan java
    这道题的具体思路请参看 何海涛的微博：http://weibo.com/zhedahht import java.math.BigInteger; import java.util.Arrays; public class CreateBFromATencent { /** * 题目：输入一个数组A[1,2,...n]，求输入B，使得数组B中的第i个数字B[i]=A
  • FastDFS 的安装和配置 修订版 Chen.H linuxfastDFS分布式文件系统
    FastDFS Home:http://code.google.com/p/fastdfs/ 1. 安装 http://code.google.com/p/fastdfs/wiki/Setup http://hi.baidu.com/leolance/blog/item/3c273327978ae55f93580703.html 安装libevent (对libevent的版本要求为1.4.
  • [强人工智能]拓扑扫描与自适应构造器 comsci 人工智能
          当我们面对一个有限拓扑网络的时候,在对已知的拓扑结构进行分析之后,发现在连通点之后,还存在若干个子网络,且这些网络的结构是未知的,数据库中并未存在这些网络的拓扑结构数据....这个时候,我们该怎么办呢?       那么,现在我们必须设计新的模块和代码包来处理上面的问题
  • oracle merge into的用法 daizj oraclesqlmerget into
    Oracle中merge into的使用 http://blog.csdn.net/yuzhic/article/details/1896878 http://blog.csdn.net/macle2010/article/details/5980965 该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中，使用此命令必须同时指定UPDATE 和INSE
  • 不适合使用Hadoop的场景 datamachine hadoop
    转自：http://dev.yesky.com/296/35381296.shtml。 　　Hadoop通常被认定是能够帮助你解决所有问题的唯一方案。 当人们提到“大数据”或是“数据分析”等相关问题的时候，会听到脱口而出的回答：Hadoop!  实际上Hadoop被设计和建造出来，是用来解决一系列特定问题的。对某些问题来说，Hadoop至多算是一个不好的选择，对另一些问题来说，选择Ha
  • YII findAll的用法 dcj3sjt126com yii
    看文档比较糊涂，其实挺简单的： $predictions=Prediction::model()->findAll("uid=:uid",array(":uid"=>10));   第一个参数是选择条件：”uid=10″。其中:uid是一个占位符，在后面的array(“:uid”=>10)对齐进行了赋值； 更完善的查询需要
  • vim 常用 NERDTree 快捷键 dcj3sjt126com vim
    下面给大家整理了一些vim NERDTree的常用快捷键了，这里几乎包括了所有的快捷键了，希望文章对各位会带来帮助。 切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w + r 移动当前窗口的布局位置 o 在已有窗口中打开文件、目录或书签，并跳
  • Java把目录下的文件打印出来 蕃薯耀 列出目录下的文件文件夹下面的文件目录下的文件
    Java把目录下的文件打印出来 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 11:02:
  • linux远程桌面----VNCServer与rdesktop hanqunfeng Desktop
    windows远程桌面到linux，需要在linux上安装vncserver，并开启vnc服务，同时需要在windows下使用vnc-viewer访问Linux。vncserver同时支持linux远程桌面到linux。   linux远程桌面到windows，需要在linux上安装rdesktop，同时开启windows的远程桌面访问。   下面分别介绍，以windo
  • guava中的join和split功能 jackyrong java
    guava库中，包含了很好的join和split的功能，例子如下： 1） 将LIST转换为使用字符串连接的字符串    List<String> names = Lists.newArrayList("John", "Jane", "Adam", "Tom");
  • Web开发技术十年发展历程 lampcy androidWeb浏览器html5
    回顾web开发技术这十年发展历程： Ajax 03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。 彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a
  • 架构师之mima-----------------mina的非NIO控制IOBuffer(说得比较好) nannan408 buffer
    1.前言。   如题。 2.代码。   IoService IoService是一个接口，有两种实现：IoAcceptor和IoConnector；其中IoAcceptor是针对Server端的实现，IoConnector是针对Client端的实现；IoService的职责包括： 1、监听器管理 2、IoHandler 3、IoSession
  • ORA-00054:resource busy and acquire with NOWAIT specified Everyday都不同 oraclesessionLock
    [Oracle] 今天对一个数据量很大的表进行操作时，出现如题所示的异常。此时表明数据库的事务处于“忙”的状态，而且被lock了，所以必须先关闭占用的session。   step1，查看被lock的session：   select t2.username, t2.sid, t2.serial#, t2.logon_time from v$locked_obj
  • javascript学习笔记 tntxia JavaScript
      javascript里面有6种基本类型的值:number、string、boolean、object、function和undefined。number：就是数字值，包括整数、小数、NaN、正负无穷。string:字符串类型、单双引号引起来的内容。boolean:true、false object:表示所有的javascript对象，不用多说function:我们熟悉的方法，也就是
  • Java enum的用法详解 xieke90 enum枚举
    Java中枚举实现的分析：     示例：  public static enum SEVERITY{ INFO,WARN,ERROR }     enum很像特殊的class，实际上enum声明定义的类型就是一个类。 而这些类都是类库中Enum类的子类      (java.l
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他