CSS布局的基本原理：盒模型、display、postion和float

作者： David

继续之前，你现在需要了解最基本的CSS知识，比如：

• CSS用以描述HTML文档的样式，让页面更加美观
• 如何引入CSS代码
• CSS的基本语法
• 如何使用CSS的选择器

这里我们来理解一下CSS的基本原理。先想象一下如果自己来开发一个CSS的渲染引擎，我们会怎么来做？得到了HTML元素构成的一个树状结构，首先要做的事情是不是就要在一个页面上把各个HTML元素按照一定的顺序排列出来？所以我们就先从如何排列HTML元素开始了解吧。

盒模型

如果不写任何CSS代码，HTML文档中的元素是按照出现顺序显示的，从上到下，从左到右。这是很自然的处理方式，我们在纸上或者在电脑上写文章也都是按照这种顺序。

具体到一个特定HTML元素的显示，它会被呈现为一个矩形，CSS标准中称之为Box。一个HTML元素占据空间的大小由盒模型决定。在盒模型中，一个盒子由内容、内边距、边框和外边距共同构成，其尺寸也是这四部分的尺寸之和。

看下面的代码：

这段代码的效果如下：

在Chrome的开发者工具中我们可以直观地看到class为box的div元素的盒模型，如下图所示：

在上面这个例子中：

• 内容区域是最内部的浅蓝色方框部分，是由width: 100px; height: 100px;定义的，即高为100px，宽为100px
• 内边距区域由padding属性定义
• 边框区域由border属性定义
• 外边距区域由margin属性定义

margin和padding都有上、右、下、左四个方向的宽度，四个方向的宽度大小可以分别设置。比如对于padding对应有padding-top, padding-right, padding-bottom, padding-left，margin同理。

注意，例子中width属性定义的是内容的宽度，不包含边距、边框。然而在IE中width定义的是内容+内边距+边框的宽度。 IE的做法相对更加符合直观的感觉。width的计算方式是由box-sizing属性来定义的，如果设置一个元素为box-sizing: border-box; ，元素的内边距和边框就会包含在width宽度内。

如果想要页面上所有的元素都以相同的方式定义高度和宽度，可以使用如下代码：

* {
    box-sizing: border-box;
}

HTML元素类型

HTML元素占据一个矩形区域，接下来你可能会问一个问题，相同层次的两个HTML元素，它们是在同一行左右排列，还是分布在不同的行上下排列呢？这时我们需要了解一下HTML元素的两种类型了。

HTML中的标签元素分为两种类型:

• 块（block）元素
• 行内（inline）元素

块元素的特点有：

1. 每个块元素都从新的一行开始，独占一行
2. 元素的高度、宽度、行高以及顶和底边距等属性都可设置
3. 默认的高度与父元素的宽度一致，即width默认为100%
4. 可以容纳行内元素和其他块元素

比如

、

、

、
、、等元素都是块元素。

行内元素具有如下特点：

1. 和其他行内元素都在一行上
2. 元素的高度、宽度、行高及顶部和底部边距等属性不可设置
3. 元素不能设置高度，宽度就是它包含的文字或图片的宽度
4. 行内元素只能容纳文本或者其他行内元素

比如、、
、、等元素都是行内元素。

来看一个简单的例子，如下代码，在class为parent的

下分别有四个元素，一个，一个和两个
：
  天码营
  Spring MVC实战训练
  

  


这段代码的显示效果如下：




和元素是行内元素，因此它们在同一行。而
元素是块元素，两个
各自独占一行。
所以浏览器渲染页面时，碰到行内元素就会向右排列，处理块元素就会向下排列。但是这样简单的排列方式是很难做出复杂的布局的，所以这时候我们需要display属性了。
设置元素的显示方式：display属性
行内元素与块元素也可以相互转化，在CSS中将行内元素可以通过display: block设置为以块元素的方式显示，我们还可以继续设置该元素的长宽等原本不能设置的属性。同样，我们也可以设置块元素的display属性为display: inline，这样块元素就可以再同一行显示了。
比如如下代码：
  天码营
  Spring MVC实战训练
  
12345
  
67890


显示效果如下：



通过把和元素设置为display: block可以让它们各自占据一行；而把
元素设置为display:inline可以让它们在一行内排列。对于大部分HTML元素来说，如果设置display:inline，它的高、宽、行高、上下边距就无法设置了。
display还有其它取值，除了block和inline,其中另外两种很常见的取值为：
• none: 隐藏元素；
• inline-block：以block的方式渲染，以inline的方式放置；
none是最容易理解的取值。当一个元素的display属性被设为none时，该元素不会被渲染，也不会占位，就像不存在一样。对布局不会产生任何影响。它和visibility属性不一样。把display设置成none不会保留元素本该显示的空间，但是visibility: hidden;还会保留。
display: inline-block修饰的元素称之为行内块元素，它们会像行内元素一样在同一行显示，又可以像块元素一样设置高、宽、行高、边距。
比如在上面的例子中，如果将
设置为display: inline-block，我们就可以设置高度和宽度了，如下代码：
天码营
Spring MVC实战训练
12345
67890





设置元素位置：postion属性
目前为止我们已经了解了块元素、行内元素和行内块元素默认的显示方式，它们会按照流的方式从上往下从左往右进行布局，每一个元素都会获得自己的显示位置。如果你希望修改元素默认的定位行为，那就需要position属性了。
postion属性具有如下取值：
• inhert：规定应该从父元素继承 position 属性的值

• static：默认值。没有定位，元素出现在正常的流中，会忽略top, bottom, left, right 或者 z-index等移动元素位置的声明

• relative：相对于元素本身正常位置（即static方式下的位置）进行定位，比如right:10px 会让元素的向右侧移动20 像素

• absolute：绝对定位，相对于第一个非static的祖先元素进行定位，元素的位置通过 left, top, right 以及bottom 属性进行设置。

• fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。
一个HTML网页都可以看成是由一层一层页面元素堆叠起来的，如下图所示:


这里X轴和Y轴定义的是在页面上的位置，而Z轴则定义的是层叠的层次，对应于z-index的值，如果两个元素在XY平面上有重叠，则z-index值大的元素会覆盖值更小的元素。
position: relative 的元素依然在普通流中，位置是正常位置，只不过可以通过设置left、right等属性移动元素，这种移动是会影响其他元素的位置的。
但是对于postion: absolute和position: fixed的元素，具有以下特性：
• 该元素往 Z 轴方向上移了一层，元素脱离了普通流，所以不再占据原来那层的空间，还会覆盖下层的元素。如果不想覆盖下层的元素，可以减少z-index的值以达到效果。
• 该元素将变为块级元素，相当于给该元素设置了 display: block;，比如给一个内联元素，如 ，设置 absolute之后发现它可以设置宽高了。
• 如果该元素是块级元素，元素的宽度由原来的 width: 100%（占据一行），变为了 auto。
如下代码：




会显示如下效果






• 蓝色方块为默认定位
• 红色方块为relative相对定位，相对于默认定位的位置，向右侧移动了50px
• 黄色方块的fixed定位，始终会出现在页面的右下角（之前你是不是一直奇怪右下角一直有个黄色方块？）。
更复杂的浮动布局：float属性
除了absolute和fixed定位，还有一种方法可以使得元素脱离普通文档流，那就是float属性了。顾名思义，你可以让一个元素在页面流中浮起来，不占据原来元素的空间。
float的取值一共有四个：
• left：向左浮动
• right：向右浮动
• none：不浮动
• inherit：继承父元素值
设置了float属性的元素具有以下一些特点：
• 浮动元素的下一个兄弟元素会紧贴到该元素之前的非浮动元素之后；如果下一个兄弟元素如果也设置了同一浮动方向，则会紧随该元素之后显示。
• 如果该元素的下一个兄弟元素中有内联元素（通常是文字），则会围绕该元素显示，形成类似"文字围绕图片"的效果。
• 该元素将变为块级元素，相当于给该元素设置了display: block;。
浮动效果
下面我们通过几个例子来看看float会带来什么效果。
我们先来展示三个平铺的
：







可以看到蓝色、绿色和红色方块从上往下排列，典型的块元素排列方式。
现在让我们把蓝色方块设置为float:right，效果如下:





如果将蓝色方块设置为float:left，则蓝色方块会遮挡绿色方块，效果如下：





如果三个方块都向左浮动，设置float:left，效果如下：





注意此时三个方块的父
元素是没有高度的，因为三个脱离了普通文档流，父
元素此时并没有包含这三个方块。
如果父
的宽度不够容纳三个方块，出出现什么情况呢？ 我们将parent的width改为250：








如果将蓝色方块的高度改为150px，则蓝色方块会挡住红色方块向最左侧浮动，效果如下：





文字环绕效果
如果该元素的下一个兄弟元素中有内联元素（通常是文字），则会围绕该元素显示，形成类似"文字围绕图片"的效果。即虽然浮动会让元素脱离文档流，但是文本内容会受到浮动元素的影响。


  

  
天码营秉承让技术学习更加高效和便捷的使命，致力于打造新一代的技术学习服务平台，提供创新并且专业的内容、工具与服务，帮助学习者与从业者实现个人价值。






虽然蓝色方块浮动起来覆盖了绿色方块，在绿色方块中的文字并不会被覆盖。
清除浮动
clear属性用以清除浮动带来的影响。比如上一个示例中，为了让绿色方块不被蓝色方块遮挡，可以给绿色方块设置clear: left，即清除向左浮动带来的影响。你还可以用right或both来清除向右浮动或同时清除向左向右浮动，表示元素的哪些边不挨着浮动元素。


  

  
天码营秉承让技术学习更加高效和便捷的使命，致力于打造新一代的技术学习服务平台，提供创新并且专业的内容、工具与服务，帮助学习者与从业者实现个人价值。



天码营秉承让技术学习更加高效和便捷的使命，致力于打造新一代的技术学习服务平台，提供创新并且专业的内容、工具与服务，帮助学习者与从业者实现个人价值。

对元素清理实际上为前面的浮动元素留出了垂直空间，这可以解决我们之前的一个问题。三个float:left的
因为不会占据空间，因此它们的父
高度为0。为了让父
包裹住三个方块，可以增加一个空的
并设置clear: both;。







从效果中可以看到，三个色块都包含在父
中了。
你可能感兴趣的:(CSS)
• 渗透测试工具包 开源安全测试工具 网络安全工具_网络安全渗透测试工具(1) 2401_84254011 程序员安全开源测试工具
  hackUtils-它是一个用于渗透测试和网络安全研究的黑客工具包，渗透以及web攻击脚本。msf框架：pocsscan攻击框架Pocsuite攻击框架Beebeeto攻击框架漏洞POC&EXP-ExploitDB官方git版本。php漏洞代码分析ysoserial-JAVA反序列化POC生成工具:JavaUnserializeExploits-JAVA反序列化EXP。JenkinsCommonC
• QRandomGenerator类 淼淼763 qt6.3
  生成随机数：/*通过QDateTime::currentMSecsSinceEpoch()函数获取当前的毫秒级时间戳，*并将其作为种子值用于创建两个QRandomGenerator对象。*/QRandomGenerator*p1=newQRandomGenerator(QDateTime::currentMSecsSinceEpoch());QRandomGenerator*p2=newQRand
• 第三章：前端技术栈与性能关联 Young soul2 前端基础性能优化
  前端开发技术栈主要由HTML、CSS和JavaScript构成，它们相互协作，共同决定了网页的呈现效果和性能表现。了解它们与性能的关联，能帮助开发者更有针对性地进行优化。3.1HTML与性能3.1.1语义化标签的重要性HTML语义化标签，如、、、、、等，不仅能让代码结构更清晰，便于维护和团队协作，还对性能优化有积极作用。语义化标签可以帮助浏览器更好地理解页面结构，从而更高效地进行渲染。例如，一个新
• 2025年前端工程师职业发展的系统性应聘规划 IT木昜 前端
  2025年前端工程师职业发展的系统性应聘规划，结合技术趋势、企业需求和竞争力提升策略，分为技术栈学习、项目实战、求职策略三部分：一、2025年前端技术趋势与核心技能1.必学技术栈（基础+进阶）层级技术方向具体技能基础核心语言-HTML6新特性（预测）、CSS容器查询、TypeScript5.0+主流框架React22+（ServerComponents）、Vue4.0（VaporMode）、Sve
• 请解释设备像素、CSS 像素、设备独立像素、DPR、PPI 之间的区别 ？ 程序员黄同学 前端开发Java面试题JavaScriptjavascript开发语言
  一、核心概念解释1.设备像素（PhysicalPixel）定义：屏幕物理发光点的最小单位，硬件决定不可变。例如iPhone12的屏幕分辨率2532×1170表示横向2532个物理像素点。特点：不同设备物理像素密度不同，高密度屏幕（如Retina）单位面积像素更多。2.CSS像素（CSSPixel）定义：前端开发中使用的逻辑像素单位，如width:300px。浏览器根据DPR自动换算为物理像素。特点
• qt 图形视图框架详解以及举例 爱学习的大牛123 qt开发qt数据库开发语言
  1基础介绍Qt的图形视图框架是一个强大的工具,用于创建和管理大量的2D图形项目。它由三个主要类组成:QGraphicsScene、QGraphicsView和QGraphicsItem。下面我将详细解释这个框架,并提供一些示例代码。1.框架组成a)QGraphicsScene(场景):-用于管理大量的2D图形项目-提供了一个高效的接口来添加、删除和查找项目b)QGraphicsView(视图):-
• 前端面试题 阿芯爱编程 面试前端
  以下是一些前端面试题：一、HTML/CSS部分请描述HTML的语义化标签的重要性，并列举一些常用的语义化标签。答案：重要性：对搜索引擎优化（SEO）有帮助，搜索引擎能够更好地理解页面结构，从而提高网站在搜索结果中的排名。提高代码的可读性和可维护性，使开发者更容易理解页面布局和功能逻辑。对于辅助技术（如屏幕阅读器）更友好，能够准确地向用户传达页面内容。常用语义化标签：：定义页面或区域的头部内容，通常
• 前端高级面试题 阿芯爱编程 面试前端
  以下是一些前端高级面试可能涉及到的内容：一、前端工程化如何构建一个适合大型团队的前端代码规范和构建流程？答案：代码规范方面：使用ESLint结合Prettier来统一JavaScript和CSS（包括预处理器如Sass或Less）的语法风格。例如，规定变量命名采用驼峰命名法，函数名要有明确含义等。对于HTML结构，制定语义化标签的使用规范，如导航栏使用标签，页脚使用标签等。确定组件化的规范，包括组
• Vue 实现全球国家国旗的使用，附全球国家的JSON数据 Song_Estelle vue前端vue.jsjsonjavascript
  有时在前端展示中需要用到全球国家的国旗图标，我们可以用到flag-icon-css这个插件。1.安装flag-icon-cssnpminstallflag-icon-css2.在main.js中全局引用import'flag-icon-css/css/flag-icons.css'3.在界面中使用换不同的国旗，将flag-icon-后的国家代码换掉就行，国家代码对照表iso-3166-1全球国家名
• vue中显示和隐藏如何做动画_Vue--过渡动画实现的三种方式 weixin_39638623 vue中显示和隐藏如何做动画
  1@charset"UTF-8";23/*!4*animate.css-http://daneden.me/animate5*Version-3.5.26*LicensedundertheMITlicense-http://opensource.org/licenses/MIT7*8*Copyright(c)2017DanielEden9*/1011.animated{12animation-du
• vue基础七（Less） 今天晚上一定要早睡 vuevue.jscsscss3
  Less安装注释导入变量（Variables）混合（Mixins）嵌套（Nesting）运算转义（Escaping）函数（Functions）命名空间和访问符映射作用域sass,less和stylussass变量的表示变量的赋值缩进的问题if条件判断的问题都支持嵌套Less（LeanerStyleSheets的缩写）是一门向后兼容的CSS扩展语言。安装将less安装为开发依赖npmiless--s
• js 12 小箌 javascript前端css
  css.carousel{position:relative;width:100%;max-width:600px;margin:0auto;}.images{display:flex;overflow:hidden;}.imagesimg{width:100%;display:block;}.dots{text-align:center;position:absolute;bottom:10px
• antd+React.js实现登陆页面，登陆注册页面 变向加后撤 react.js前端前端框架
  今天制作登陆界面，本来想找开原的代码复制粘贴，但奈何网友们是在太过吝啬。找了半天，不如我来做这个开源。代码如下（登陆界面层级都比较分明，故不再做过多解释）importstylesfrom'./login.module.scss';import{Button,Checkbox,Form,Input,Tabs}from'antd';import{UserOutlined,MedicineBoxOutl
• CSS实现自上层放大动画 吉吉安 css前端CSS动画动画
  CSS实现上层放大动画所有的css动画代码可在css动画网站直接复制代码；以下为上述演示动画代码：.scale-up-top{animation:scale-up-top0.4scubic-bezier(0.390,0.575,0.565,1.000);}@keyframesscale-up-top{0%{transform:scale(0.5);transform-origin:50%0%;}1
• 基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件 练练科技 java课程设计mysql
  基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7
• java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署 花样1999 mysql数据库java
  java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ
• java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署 沪港 mysqljava数据库
  java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
• N年CSS开发总结的20条CSS开发技巧，适合高手新手小白！！ YOLO大师 csshtmlhtml5
  文章目录经过一晚上的努力，我写下了这篇文章，总结了我这几年在CSS开发中的想法。CSS的全称是CascadingStyleSheets，这意味这CSS是级联的样式表。你可以通过看看这个关于CSS级联的精彩网站（有测验！）来了解更多的技巧。现在大量的通过游戏来学习CSS的网站已经开始火爆，flex布局：https://flexboxfroggy.com/Grid布局：https://cssgridg
• HTML CSS整理笔记（建议收藏） 程序员的生活1 jsweb前端html+csscssjavascripthtmlcss3
  点击链接后退页面：回到上一个网页——修改placeholder提示的样式：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）1.除IE外通用写法类名或标签名::placeholder{color:red;}2.加兼容前缀写法css超出一行显示省略号：给定宽度(width:100px)、超出隐藏（overflow:hidden）、强制在同一行显示（white-
• 一些我不知道的HTML前端基础知识笔记 han1140521792 学习资料HTML5CSSJavaScript
  点击链接后退页面：回到上一个网页——修改placeholder提示的样式：1.除IE外通用写法类名或标签名::placeholder{color:red;}2.加兼容前缀写法css超出一行显示省略号：给定宽度(width:100px)、超出隐藏（overflow:hidden）、强制在同一行显示（white-space:nowrap）、省略号（text-overflow:ellipsis）——常见
• 第三章：组件开发实战 - 第五节 - Tailwind CSS 响应式导航栏实现 qianmoQ TailwindCSS：现代化开发实战指南css前端
  导航栏是几乎所有网站都必备的组件，一个好的响应式导航栏需要在不同设备上都能提供出色的用户体验。本节将介绍如何使用TailwindCSS实现功能完善的响应式导航栏。基础导航栏结构桌面端导航<divclass
• 【Three.js】JS 3D library（一个月进化史） Tiffany_Ho 前端Three.js
  #春节过完了，该继续投入学习了~作为一个平面开发者，想要增进更多的技能，掌握web3D开发#前置知识与技能1.JavaScript基础-掌握ES6+语法（类、模块、箭头函数、解构等）-熟悉异步编程（Promise、async/await）-了解事件循环和DOM操作2.HTML5和CSS3-熟悉Canvas和WebGL的基础概念-了解CSS3动画和变换（transform、transition）3.
• 在vue3中配置scss 库库林_沙琪马 #Vue组件直接使用scssvue.js前端
  要在Vue3中使用SCSS（Sass的一个子集），你需要安装相应的依赖，并对项目进行一些配置。下面是详细的步骤：步骤1:安装依赖首先，你需要安装sass和vue-loader（如果你使用的是VueCLI）以及vite-plugin-vue2或vite-plugin-vue3（如果你使用的是Vite）。这里我们假设你使用的是Vite构建工具。打开终端并运行以下命令以安装所需的依赖包：npminsta
• 前端构建工具——Webpack和Vite的主要区别 像素检测仪 前端前端webpack
  目录1.设计理念2.性能表现3.使用场景4.配置复杂度5.生态系统6.性能对比总结7.选择建议1.设计理念Webpack设计理念：Webpack是一个通用的模块打包工具，它将项目中的各种资源（如JavaScript、CSS、图片等）视为模块，并通过loader和plugin进行处理和打包。适用范围：适用于复杂项目，支持高度定制化，适合需要精细控制构建过程的场景。Vite设计理念：Vite（法语“快
• Webpack 基础入门 懒羊羊我小弟 前端工程化webpackrust前端es6node.js
  一、Webpack是什么Webpack是一款现代JavaScript应用程序的静态模块打包工具。在Web开发中，我们的项目会包含各种类型的文件，如JavaScript、CSS、图片等。Webpack可以将这些文件打包成一个或多个文件，以便在浏览器中高效加载。它就像是一个超级管家，把项目中的各种资源整理打包，让它们能更好地协同工作。二、为什么要使用Webpack代码拆分：可以将代码拆分成多个块，实现
• 【HarmonyOS之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(四) -＞ 常见组件(二) -＞ tabs 枫叶丹4 HarmonyOS前端javascript开发语言harmonyos华为华为云
  目录1->创建Tabs2->设置Tabs方向3->设置样式4->显示页签索引5->场景示例1->创建Tabs在pages/index目录下的hml文件中创建一个Tabs组件。item1item2content1content2/*test.css*/.container{flex-direction:column;justify-content:center;align-items:center;
• uni-app下表格纯CSS方案的固定首行首列，最简单的实现方式 taihom css前端javascript
  网上找了很多在uni-app下的表格组件，实现起来都太复杂了，我只是想要一个表格单纯的可以实现首行首列可以固定，没办法看了资料后，只能自己写。下面是一个最简单的实现方式。可以自己进行后续封装来使用，自己亲自编写实测没问题，纯CSS方案。时间AABBCCDDEE10:17:25{{index}}1020.5616.table-container{width:100%;height:100%;posi
• 表格首列，首行固定，并且能随意滚动 一麻袋小猫 笔记css3
  css3新增了粘性定位，利用粘性定位即可做到，但要注意的是：如果想要粘性定位相对于父元素定位，需要给其增加relative定位。逻辑是：滚动盒子滚动的是页面，滚动盒子内部放一个大盒子（1），此盒子宽度为内容的总宽度，在盒子内部给想要固定的盒子增加粘性定位，让其top值||left值为0，这里的0是相对于盒子1的。
• html+css网页设计，我的网站 软件技术NINI html/css笔记javascripthtmlcss
  一、技术简介HTML：超文本标记语言（HyperTextMarkupLanguage），用于创建网页的基本结构和内容。CSS：层叠样式表（CascadingStyleSheets），用于设置网页的样式和布局，包括字体、颜色、边距、对齐方式等。JavaScript：一种用于创建动态和交互式网页的脚本语言。通过JavaScript，可以实现网页的动画效果、表单验证、数据交互等功能。二、创建多页网站的基
• html 字体图标不显示不出来了,h5页面字体图标显示不正常 微基因WeGene html字体图标不显示不出来了
  问题描述开发的是微信公众号的纯静态H5页面，测试发现在iOS上面首次打开会出现字体图标无法显示的问题，并且切换到其它页面，字体图标也是一样无法显示：只能使用微信的右上角内的刷新选项，所有页面的图标就可正常显示，浏览其它页也正常：P.S.所有页面在iOS自带的safari或者chrome浏览器均可正常显示，在android也是正常显示。相关代码HTML:CSS:@charset"UTF-8";@fo
• Spring4.1新特性——Spring MVC增强 jinnianshilongnian spring 4.1
  目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
• mysql 性能查询优化 annan211 javasql优化mysql应用服务器
  1 时间到底花在哪了？ mysql在执行查询的时候需要执行一系列的子任务，这些子任务包含了整个查询周期最重要的阶段，这其中包含了大量为了 检索数据列到存储引擎的调用以及调用后的数据处理，包括排序、分组等。在完成这些任务的时候，查询需要在不同的地方 花费时间，包括网络、cpu计算、生成统计信息和执行计划、锁等待等。尤其是向底层存储引擎检索数据的调用操作。这些调用需要在内存操
• windows系统配置 cherishLC windows
  删除Hiberfil.sys ：使用命令powercfg -h off 关闭休眠功能即可： http://jingyan.baidu.com/article/f3ad7d0fc0992e09c2345b51.html 类似的还有pagefile.sys msconfig 配置启动项 shutdown 定时关机 ipconfig 查看网络配置 ipconfig /flushdns
• 人体的排毒时间 Array_06 工作
  ======================== ||  人体的排毒时间是什么时候？|| ======================== 转载于： http://zhidao.baidu.com/link?url=ibaGlicVslAQhVdWWVevU4TMjhiKaNBWCpZ1NS6igCQ78EkNJZFsEjCjl3T5EdXU9SaPg04bh8MbY1bR
• ZooKeeper cugfy zookeeper
  Zookeeper是一个高性能，分布式的，开源分布式应用协调服务。它提供了简单原始的功能，分布式应用可以基于它实现更高级的服务，比如同步， 配置管理，集群管理，名空间。它被设计为易于编程，使用文件系统目录树作为数据模型。服务端跑在java上，提供java和C的客户端API。 Zookeeper是Google的Chubby一个开源的实现，是高有效和可靠的协同工作系统，Zookeeper能够用来lea
• 网络爬虫的乱码处理 随意而生 爬虫网络
  下边简单总结下关于网络爬虫的乱码处理。注意，这里不仅是中文乱码，还包括一些如日文、韩文 、俄文、藏文之类的乱码处理，因为他们的解决方式 是一致的，故在此统一说明。     网络爬虫，有两种选择，一是选择nutch、hetriex，二是自写爬虫，两者在处理乱码时，原理是一致的，但前者处理乱码时，要看懂源码后进行修改才可以，所以要废劲一些；而后者更自由方便，可以在编码处理
• Xcode常用快捷键 张亚雄 xcode
  一、总结的常用命令：     隐藏xcode command+h     退出xcode command+q     关闭窗口 command+w     关闭所有窗口 command+option+w     关闭当前
• mongoDB索引操作 adminjun mongodb索引
  一、索引基础：    MongoDB的索引几乎与传统的关系型数据库一模一样，这其中也包括一些基本的优化技巧。下面是创建索引的命令：    > db.test.ensureIndex({"username":1})    可以通过下面的名称查看索引是否已经成功建立： &nbs
• 成都软件园实习那些话 aijuans 成都 软件园 实习
  无聊之中，翻了一下日志，发现上一篇经历是很久以前的事了，悔过~~ 　　断断续续离开了学校快一年了，习惯了那里一天天的幼稚、成长的环境，到这里有点与世隔绝的感觉。不过还好，那是刚到这里时的想法，现在感觉在这挺好，不管怎么样，最要感谢的还是老师能给这么好的一次催化成长的机会，在这里确实看到了好多好多能想到或想不到的东西。 　　都说在外面和学校相比最明显的差距就是与人相处比较困难，因为在外面每个人都
• Linux下FTP服务器安装及配置 ayaoxinchao linuxFTP服务器vsftp
  检测是否安装了FTP [root@localhost ~]# rpm -q vsftpd 如果未安装：package vsftpd is not installed  安装了则显示：vsftpd-2.0.5-28.el5累死的版本信息   安装FTP 运行yum install vsftpd命令，如[root@localhost ~]# yum install vsf
• 使用mongo-java-driver获取文档id和查找文档 BigBird2012 driver
  注：本文所有代码都使用的mongo-java-driver实现。   在MongoDB中，一个集合（collection）在概念上就类似我们SQL数据库中的表（Table），这个集合包含了一系列文档（document）。一个DBObject对象表示我们想添加到集合（collection）中的一个文档（document），MongoDB会自动为我们创建的每个文档添加一个id，这个id在
• JSONObject以及json串 bijian1013 jsonJSONObject
  一.JAR包简介     要使程序可以运行必须引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包：     1.commons-lang-2.0.jar     2.commons-beanutils-1.7.0.jar     3.commons-collections-3.1.jar &n
• [Zookeeper学习笔记之三]Zookeeper实例创建和会话建立的异步特性 bit1129 zookeeper
  为了说明问题，看个简单的代码，   import org.apache.zookeeper.*; import java.io.IOException; import java.util.concurrent.CountDownLatch; import java.util.concurrent.ThreadLocal
• 【Scala十二】Scala核心六：Trait bit1129 scala
  Traits are a fundamental unit of code reuse in Scala. A trait encapsulates method and field definitions, which can then be reused by mixing them into classes. Unlike class inheritance, in which each c
• weblogic version 10.3破解 ronin47 weblogic
  版本：WebLogic Server 10.3 说明：%DOMAIN_HOME%：指WebLogic Server 域(Domain）目录 例如我的做测试的域的根目录 DOMAIN_HOME=D:/Weblogic/Middleware/user_projects/domains/base_domain 1.为了保证操作安全，备份%DOMAIN_HOME%/security/Defa
• 求第n个斐波那契数 BrokenDreams
          今天看到群友发的一个问题：写一个小程序打印第n个斐波那契数。         自己试了下，搞了好久。。。基础要加强了。           &nbs
• 读《研磨设计模式》-代码笔记-访问者模式-Visitor bylijinnan java设计模式
  声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; interface IVisitor { //第二次分派，Visitor调用Element void visitConcret
• MatConvNet的excise 3改为网络配置文件形式 cherishLC matlab
  MatConvNet为vlFeat作者写的matlab下的卷积神经网络工具包，可以使用GPU。 主页： http://www.vlfeat.org/matconvnet/ 教程： http://www.robots.ox.ac.uk/~vgg/practicals/cnn/index.html 注意：需要下载新版的MatConvNet替换掉教程中工具包中的matconvnet： http
• ZK Timeout再讨论 chenchao051 zookeepertimeouthbase
  http://crazyjvm.iteye.com/blog/1693757 文中提到相关超时问题，但是又出现了一个问题，我把min和max都设置成了180000，但是仍然出现了以下的异常信息： Client session timed out, have not heard from server in 154339ms for sessionid 0x13a3f7732340003
• CASE WHEN 用法介绍 daizj sqlgroup bycase when
  CASE WHEN 用法介绍 1. CASE WHEN 表达式有两种形式 --简单Case函数  CASE sex  WHEN '1' THEN '男'  WHEN '2' THEN '女'  ELSE '其他' END  --Case搜索函数  CASE WHEN sex = '1' THEN
• PHP技巧汇总:提高PHP性能的53个技巧 dcj3sjt126com PHP
  PHP技巧汇总:提高PHP性能的53个技巧　　用单引号代替双引号来包含字符串，这样做会更快一些。因为PHP会在双引号包围的字符串中搜寻变量，　　单引号则不会，注意：只有echo能这么做，它是一种可以把多个字符串当作参数的函数译注：　　PHP手册中说echo是语言结构，不是真正的函数，故把函数加上了双引号)。　　1、如果能将类的方法定义成static，就尽量定义成static，它的速度会提升将近4倍
• Yii框架中CGridView的使用方法以及详细示例 dcj3sjt126com yii
  CGridView显示一个数据项的列表中的一个表。 表中的每一行代表一个数据项的数据,和一个列通常代表一个属性的物品(一些列可能对应于复杂的表达式的属性或静态文本)。　　CGridView既支持排序和分页的数据项。排序和分页可以在AJAX模式或正常的页面请求。使用CGridView的一个好处是,当用户浏览器禁用JavaScript,排序和分页自动退化普通页面请求和仍然正常运行。 实例代码如下：
• Maven项目打包成可执行Jar文件 dyy_gusi assembly
  Maven项目打包成可执行Jar文件 在使用Maven完成项目以后，如果是需要打包成可执行的Jar文件，我们通过eclipse的导出很麻烦，还得指定入口文件的位置，还得说明依赖的jar包，既然都使用Maven了，很重要的一个目的就是让这些繁琐的操作简单。我们可以通过插件完成这项工作，使用assembly插件。具体使用方式如下： 1、在项目中加入插件的依赖： <plugin>
• php常见错误 geeksun PHP
  1.  kevent() reported that connect() failed (61: Connection refused) while connecting to upstream, client: 127.0.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "fastc
• 修改linux的用户名 hongtoushizi linuxchange password
  Change Linux Username 更改Linux用户名，需要修改4个系统的文件： /etc/passwd /etc/shadow /etc/group /etc/gshadow 古老/传统的方法是使用vi去直接修改，但是这有安全隐患（具体可自己搜一下），所以后来改成使用这些命令去代替： vipw vipw -s vigr vigr -s   具体的操作顺
• 第五章 常用Lua开发库1-redis、mysql、http客户端 jinnianshilongnian nginxlua
  对于开发来说需要有好的生态开发库来辅助我们快速开发，而Lua中也有大多数我们需要的第三方开发库如Redis、Memcached、Mysql、Http客户端、JSON、模板引擎等。 一些常见的Lua库可以在github上搜索，https://github.com/search?utf8=%E2%9C%93&q=lua+resty。   Redis客户端 lua-resty-r
• zkClient 监控机制实现 liyonghui160com zkClient 监控机制实现
           直接使用zk的api实现业务功能比较繁琐。因为要处理session loss，session expire等异常，在发生这些异常后进行重连。又因为ZK的watcher是一次性的，如果要基于wather实现发布/订阅模式，还要自己包装一下，将一次性订阅包装成持久订阅。另外如果要使用抽象级别更高的功能，比如分布式锁，leader选举
• 在Mysql 众多表中查找一个表名或者字段名的 SQL 语句 pda158 mysql
  在Mysql 众多表中查找一个表名或者字段名的 SQL 语句： 　　方法一：SELECT table_name, column_name from information_schema.columns WHERE column_name LIKE 'Name'; 　　方法二：SELECT column_name from information_schema.colum
• 程序员对英语的依赖 Smile.zeng 英语程序猿
  1、程序员最基本的技能，至少要能写得出代码，当我们还在为建立类的时候思考用什么单词发牢骚的时候，英语与别人的差距就直接表现出来咯。 2、程序员最起码能认识开发工具里的英语单词，不然怎么知道使用这些开发工具。 3、进阶一点，就是能读懂别人的代码，有利于我们学习人家的思路和技术。 4、写的程序至少能有一定的可读性，至少要人别人能懂吧... 以上一些问题，充分说明了英语对程序猿的重要性。骚年
• Oracle学习笔记(8) 使用PLSQL编写触发器 vipbooks oraclesql编程活动Access
      时间过得真快啊，转眼就到了Oracle学习笔记的最后个章节了，通过前面七章的学习大家应该对Oracle编程有了一定了了解了吧，这东东如果一段时间不用很快就会忘记了，所以我会把自己学习过的东西做好详细的笔记，用到的时候可以随时查找，马上上手！希望这些笔记能对大家有些帮助！     这是第八章的学习笔记，学习完第七章的子程序和包之后
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉
版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.