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个前端知识点：布局大全)

  • （九）ROS运行管理 PaLu-LvL ROS从入门到实践机器人c++ubuntu学习
    前言1.ROS是多进程(节点)的分布式框架，一个完整的ROS系统实现：可能包含多台主机；每台主机上又有多个工作空间(workspace)；每个的工作空间中又包含多个功能包(package)；每个功能包又包含多个节点(Node)，不同的节点都有自己的节点名称；每个节点可能还会设置一个或多个话题(topic)...2.在多级层深的ROS系统中，其实现与维护可能会出现一些问题，比如，如何关联不同的功能包
  • Python Sqlite数据库与配置文件的加载、编辑和保存 2201_75335496 数据库sqlitepythonjsonpyqt
    一、Sqlite数据库SQLite，是一款轻型的数据库，是遵守ACID的关系型数据库管理系统，它包含在一个相对小的C库中。它是D.RichardHipp建立的公有领域项目。它的设计目标是嵌入式的，而且已经在很多嵌入式产品中使用了它，它占用资源非常的低，在嵌入式设备中，可能只需要几百K的内存就够了。它能够支持Windows/Linux/Unix等等主流的操作系统，同时能够跟很多程序语言相结合，比如T
  • Node.js - Express框架 蒜蓉大猩猩 Node.jsnode.jsexpress后端架构
    1.介绍Express是一个基于Node.js的Web应用程序框架，主要用于快速、简便地构建Web应用程序和API。它是目前最流行的Node.jsWeb框架之一，具有轻量级、灵活和功能丰富的特点。核心概念包括路由，中间件，请求与响应，以及模板引擎支持2.Express应用的使用通过npm进行安装express包npminstallexpress示例：以下是一个最简单的Express应用程序cons
  • 实战设计模式之命令模式 希望_睿智 实战设计模式系列设计模式命令模式软件工程架构设计系统架构
    概述命令模式是一种行为设计模式，用于将请求封装成对象，从而使我们可以用不同的请求对客户进行参数化。简单来说，命令模式就是把一个请求转换为一个包含所有关于这个请求信息的对象。这样，就可以像传递其他对象一样传递这个请求，并且可以在适当的时间和地点执行它。命令模式主要适用于以下几种应用场景。1、需要支持撤销、重做操作的应用程序，比如：文本编辑器、绘图程序等。2、操作可以被放入队列中，并按顺序或特定条件执
  • C++实现设计模式---中介者模式 (Mediator) 计算机小混子 设计模式c++设计模式中介者模式
    中介者模式(Mediator)中介者模式是一种行为型设计模式，它用一个中介对象来封装一组对象之间的交互。中介者通过协调多个对象之间的通信，避免对象之间的直接依赖，从而实现对象之间的松耦合。意图通过引入一个中介者对象，减少对象之间的直接依赖，从而降低耦合性。中介者负责管理和协调对象之间的通信。使用场景对象之间的交互变得复杂：如果对象之间存在大量的直接引用和交互，可以使用中介者模式减少耦合。希望解耦多
  • C++实现设计模式---迭代器模式 (Iterator) 计算机小混子 设计模式c++设计模式迭代器模式
    迭代器模式(Iterator)迭代器模式是一种行为型设计模式，它提供了一种方法，顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。意图提供一种方法，可以顺序访问一个容器对象中的元素，而无需暴露其内部实现。将遍历行为从集合对象中分离出来，使得遍历行为可以独立变化。使用场景需要顺序访问一个聚合对象中的元素：如数组、链表或集合。需要支持多种遍历方式：如正序遍历、反序遍历等。需要解耦遍历算
  • python调用ollama库详解 2201_75335496 python经验分享神经网络人工智能自然语言处理语言模型
    0准备1）准备Ollama软件（注意：两个不是同一个东西）详见上次的文章Ollama通过gguf文件加载AI模型（补充：关于Ollama加载AI模型的补充）2）准备ollama库如果您还未安装ollama库，请使用pip安装：pipinstallollama#1ollama库的基本使用importollama#普通输出（请先按照准备工作中的要求安装模型）back=ollama.chat(model
  • 【YOLOv8杂草作物目标检测】 stsdddd YOLO目标检测目标检测YOLO目标检测人工智能
    YOLOv8杂草目标检测算法介绍模型和数据集下载算法介绍YOLOv8在禾本科杂草目标检测方面有显著的应用和效果。以下是一些关键信息的总结：农作物幼苗与杂草检测系统：基于YOLOv8深度学习框架，通过2822张图片训练了一个目标检测模型，用于检测田间的农作物幼苗与杂草对象。该系统支持图片、视频以及摄像头进行目标检测，并能保存检测结果。系统界面可实时显示目标位置、目标总数、置信度、用时等信息。YOLO
  • c++如何输出质数 z5z3c c++算法
    以输出1到100之间的质数为例方法一//打印数组voidprint(vector&v){for(vector::iteratorit=v.begin();it!=v.end();it++){coutv;v.clear();for(inti=2;i&v){for(vector::iteratorit=v.begin();it!=v.end();it++){coutv;v.clear();//因为遍历
  • 思维图GOT：用大语言模型解决复杂问题 硅谷秋水 大模型人工智能机器学习语言模型人工智能自然语言处理
    23年8月份来自瑞士和波兰的大学以及一个数据公司Cledar的大语言模型论文“GraphofThoughts:SolvingElaborateProblemswithLargeLanguageModels“。思维图（GoT）是一个框架，提高大型语言模型（LLM）中的提示功能，超出思维链或思维树(ToT)等范式所提供的能力。GoT的关键思想和主要优势是能够将LLM生成的信息建模为任意图，其中信息单位
  • flowable-ui 在tomcat中启动 xunbaogang uitomcatjava
    使用原因：本地电脑通过命令启动flowable-ui.jar无法启动，总是提示锁定状态临时处理场景：通过阿里云租了一个月的云服务，云服务器使用centos系统，在云服务器中可以启动本地处理场景：本地使用：web服务程序：apache-tomcat-8.5.91数据库：mysql8.0.30flowable版本：flowable-6.8.0最后一个带ui的程序使用问题：直接启动时，提示缺少驱动，驱动
  • hdfs和hive对于小文件的处理方案 二进制_博客 大数据
    一、hdfs如何处理小文件小文件问题的危害小文件问题对HDFS的性能和稳定性产生显著影响，主要包括：占用过多的存储空间：每个小文件都会占用一个独立的Block，导致存储资源的浪费。降低数据处理效率：HDFS是为处理大文件而设计的，小文件会导致大量的Map任务启动，增加处理时间和资源消耗。NameNode内存压力增大：NameNode需要维护所有文件和目录的元数据信息，小文件过多会导致NameNod
  • ES6 新特性有哪些 yqcoder 前端面试题集javascript开发语言ecmascript
    1.变量声明let/constlet特性：1.拥有块级作用域，这意味着在if语句、for循环、while循环等代码块中声明的let变量，只在该代码块内有效。2.不允许在同一作用域内重复声明同一个变量const特性：1.也具有块级作用域。2.声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3.如果const声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组
  • 反向代理模块开发 xianwu543 c++mysql数据库开发语言网络
    1概念1.1反向代理概念反向代理是指以代理服务器来接收客户端的请求，然后将请求转发给内部网络上的服务器，将从服务器上得到的结果返回给客户端，此时代理服务器对外表现为一个反向代理服务器。对于客户端来说，反向代理就相当于目标服务器，只需要将反向代理当作目标服务器一样发送请求就可以了，并且客户端不需要进行任何设置。1.2特点反向代理是代理服务器，为服务器收发请求，使真实服务器对客户端不可见。原文链接：h
  • [转载]Nodejs 利用 express 框架 获取接口参数 柒柒公子呐 node.js
    Express是一个基于Node.js平台，快速、开放、极简的web开发框架Expresss是一个第三方模块（在npm上可以下载），在使用它之前要先去下载它，在下载包之前要先创建项目，并通过npminit创建package.json文件。1、get接口参数req.query属性express框架会自动收集get方式从url地址中传递的查询字符串参数，并自动保存在req对象的query属性中。我们直
  • 【产品思维13讲】系统能力与确定性：产品成功的核心要素 Qingzong_MA 职场小白进阶篇产品思维职场和发展
    在产品开发和运营的过程中，系统能力与确定性是两个常被忽视的核心概念。它们是构建成功产品的基础，就像打造一个坚固的基础设施，支撑起整个产品的持续运行。在本篇文章中，我将通过几个具体的案例，深入探讨什么是系统能力，为什么确定性如此重要，以及它们如何帮助产品持续满足用户需求，创造可靠的用户依赖。系统能力：从泥土到苹果系统能力的概念类似于自然界中的生长过程。如果我们把泥土和水交给苹果树，它会通过自己的系统
  • Qt开发技术【C++ 实现类的二进制序列化与反序列化】 增援未来章北海 QTC++学习qtc++数据库
    一、思考Qt本身的QByteArray和QDataStreamQDataStream和QByteArray是Qt框架中用于数据序列化和反序列化的类。QDataStream可以将Qt数据类型（如QString、QByteArray等）序列化为二进制格式，并写入文件或网络流中。同时，也可以从文件或网络流中读取二进制数据并反序列化成相应的数据类型。但是在嵌入式中使用代码比较冗余二、实现一个比较简单的仅对
  • Android context.getApplicationContext()，getcontext，context，getActivity，activity区别 氤氲息 安卓原生学习android
    context.getApplicationContext()定义：getApplicationContext()是Context的一个方法，返回应用的上下文，通常是一个全局的Application上下文。用途：获取应用级别的上下文，可以用于长生命周期的操作，例如访问全局配置、启动Service或访问应用的资源等。特点：ApplicationContext不依赖于特定的Activity，它不会受到
  • Android Fragment 按键监听 weixin_44128558 androidandroidandroidstudiojava
    Fragment中是没有监听按键的方法的，但是Fragment是寄托于Activity的，只要在Activity中将监听到的按键传递给Fragment就行，网络上大部分都是让Fragment获得焦点，再添加一个按键监听器，这样就能监听到了@Nullable@OverridepublicViewonCreateView(@NonNullLayoutInflaterinflater,@Nullable
  • 在electron中实现一个桌面悬浮球
    概要在electron+vue3搭建的应用中实现了一个桌面悬浮球/mini窗口的功能，支持任意拖拽、丝滑的菜单折叠展开动画效果。在实现过程中需要关注的一些点：1、管理悬浮球窗口创建以及配置：需要一个透明的窗口来承载视图。2、解决electron拖拽和点击事件冲突（核心）：因为使用-webkit-app-region:drag样式的方式会导致拖拽和点击事件冲突，所以需要通过渲染进程和主进程的通信来解
  • python概述_理解Python数据类：Dataclass 的特征概述 （上） weixin_39875842 python概述
    原标题UnderstandingPythonDataclasses—Part1，作者为ShikharChauhan。这是一个包含两部分的博文：这一篇是Dataclass的特征概述下一篇是Dataclassfields的概述引言Dataclasses是一些适合于存储数据对象(dataobject)的Python类。你可能会问，什么是数据对象?下面是一个并不详尽的用于定义数据对象的特征列表：他们存储并
  • 使用vnstat监控网络流量和带宽占用 handsomestWei 运维运维网络
    使用vnstat监控网络流量和带宽占用简介vnstat是个Linux下基于shell终端的网络流量监控工具，可帮助用户在不同时间段内监视，记录和查看网络统计信息。它提供了各种网络接口的汇总，允许用户以详细表或命令行统计视图的形式查看小时，每日，每月统计。安装sudoaptupdatesudoaptinstallvnstatsudosystemctlstartvnstatsudosystemctle
  • 融云 IM 干货丨获取会话列表或者历史消息报 25101 的错误？ 融云im即时通讯
    出现获取会话列表或者历史消息报25101错误，主要有以下几种原因及解决方法：融云平台1、SDK版本过低：如果未执行撤回动作却出现25101报错，这是低版本SDK的已知问题，建议升级至最新SDK。2、未开通单群聊云存储服务：出现25101报错还可能是由于未开通单群聊云存储服务。可到开发者后台-IM商用版开通该服务，服务开通后30分钟左右生效。其他平台若以上平台的解决方法均不适用，建议检查以下通用方面
  • 提升短视频体验的tiktok专线加速器优势 以太坊
    在这个信息爆炸的时代，短视频已成为人们日常生活中不可或缺的一部分。尤其是tiktok，这一平台以其丰富的内容和独特的社交属性吸引了大量用户。然而，用户在使用过程中常常会遇到视频加载缓慢、卡顿等问题，影响了观看体验。为了解决这一难题，IPIPGO直播专线应运而生。作为一款专注于提升视频流畅度的工具，tiktok专线加速器能够为用户提供更优质的观看体验，让每一个精彩瞬间都不再错过。tiktok专线加速
  • hive 创建访问用户_Hive权限控制和超级管理员的实现 weixin_39826089 hive创建访问用户
    Hive权限控制Hive权限机制：Hive从0.10可以通过元数据控制权限。但是Hive的权限控制并不是完全安全的。基本的授权方案的目的是防止用户不小心做了不合适的事情。先决条件：为了使用Hive的授权机制，有两个参数必须在hive-site.xml中设置：hive.security.authorization.enabledtrueenableordisablethehiveclientauth
  • hive表级权限控制_Hive权限管理 weixin_39769091 hive表级权限控制
    最近遇到一个hive权限的问题，先简单记录一下，目前自己的理解不一定对，后续根据自己的理解程度更新一、hive用户的概念hive本身没有创建用户的命令，hive的用户就是Linux用户，若当前是用mr用户输入hive，进入hive的shell，则当前hive的用户为mr。hive本身不提供用户和用户的管理，只做权限控制。所以在实际的生产中，容易造成创表和使用表的用户不统一的情况，针对该情况可以使用
  • 代码精进：工作中学到的12个代码风格 程序员
    在工作中，我们编写代码时尽可能地使其易于阅读。这意味着以下几点：变量名有意义且更长（而不是a,b和c）函数名有意义且更长许多注释和文档解释代码到处都是类型提示字符串似乎更长、更啰嗦等等以下是我在过去几年的工作中学到的一些生产级别的Python代码风格。1)使用括号的元组解包这是一些正常的元组解包：a,b=(1,2)在生产级别的代码中，我们通常不使用像a或b这样的变量名——相反，我们的变量名会变得更
  • 盘点ECMAScript 2024的新提案 前端
    前面我们了解了ECMAScript2024(ES15)的5个新特性，现在我们继续学习一下其他令人耳目一新的提案吧。1.模式匹配（初期阶段）JavaScript变得更智能了，有了模式匹配！想象它就像一个超强大的switch语句，可以处理复杂的数据结构。ES15允许你简单地匹配模式，而不是编写一堆嵌套的条件语句来检查对象的形状。️旧方式functioncheckAnimal(animal){if(an
  • Nuqs：解锁URL状态管理 前端
    nuqs是一个强大的库，旨在使用URL查询字符串管理React应用程序的状态。这样做的好处是将应用程序状态与浏览器的地址栏同步，为浏览复杂界面的用户提供无缝体验。无论您是构建单页应用程序还是多路由平台，nuqs都提供了一个强大的框架，可用于直接在URL中处理状态。例子：https://nuqs.47ng.com/playground/basic-counter官网介绍：https://nuqs.4
  • mac运行第一个java_Mac下第一个java－servelet程序 老纪聊数码 mac运行第一个java
    可学习到：设置环境变量方便运行命令和编译程序。servlet-api.jar中包括了servlet相关的api和类tomcat是servlet的容器，没有容器程序跑不起来。tomcat下载地址：http://tomcat.apache.org/我下载的是：apache-tomcat-7.0.67.tar.gz解压开之后放到usr/local目录中tomcat目录启动/usr/local/apach
  • 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其他