css定位

CSS 定位 (Positioning) 属性允许你对元素进行定位。

CSS 定位和浮动

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

一切皆为框

div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
可以使用 display 属性改变生成的框的类型。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。

行内元素与块级元素

区别

行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。

块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。

块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。

行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

行内元素和块级元素转换

 display:block; (字面意思表现形式设为块级元素)
 display:inline; (字面意思表现形式设为行内元素)

inline-block

inline-block 的元素（如input、img)既具有块级元素可以设置宽高的特性，同时又具有行内元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align（因为这个垂直对齐属性只对设置了inline-block的元素有效）属性。
HTML 中的换行符、空格符、制表符等合并为空白符，字体大小不为 0 的情况下，空白符自然占据一定的宽度，使用inline-block 会产生元素间的空隙。

关于如何去除inline-block的间隙，请看张鑫旭.列出的N种方法...

display属性

值描述

none 此元素不会被显示。

block 此元素将显示为块级元素，此元素前后会带有换行符。

inline 默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block 行内块元素。

list-item 此元素会作为列表显示。

run-in 此元素会根据上下文作为块级元素或内联元素显示。

table

此元素会作为块级表格来显示（类似），表格前后带有换行符。

inline-table

此元素会作为内联表格来显示（类似），表格前后没有换行符。）。）。）。）。）。）

）
table-row-group	此元素会作为一个或多个行的分组来显示（类似
table-header-group	此元素会作为一个或多个行的分组来显示（类似
table-footer-group	此元素会作为一个或多个行的分组来显示（类似
table-row	此元素会作为一个表格行显示（类似
table-column-group	此元素会作为一个或多个列的分组来显示（类似
table-column	此元素会作为一个单元格列显示（类似
table-cell	此元素会作为一个表格单元格显示（类似	和	）
table-caption	此元素会作为一个表格标题显示（类似
inherit	规定应该从父元素继承 display 属性的值。

display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。

CSS 定位机制

CSS 有三种基本的定位机制：普通流(文档流)、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。

CSSposition属性

通过使用position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

CSS 相对定位

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

image

注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

CSS绝对定位

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

image

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置z-index属性来控制这些框的堆放次序。

z-index属性

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
元素可拥有负的 z-index 属性值。

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

CSS浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

image

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

image

CSS float 属性

在 CSS 中，我们通过 float 属性实现元素的浮动。

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

值	描述
left	元素向左浮动
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。

行框和清理

浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框。
因此，创建浮动框可以使文本围绕图像：

image

要想阻止行框围绕浮动框，需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
为了实现这种效果，在被清理的元素的上外边距上添加足够的空间，使元素的顶边缘垂直下降到浮动框下面：

image

CSS clear属性

clear 属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：




    
    some text

这种情况下，出现了一个问题。因为浮动元素脱离了文档流，所以包围图片和文本的 div 不占据空间。
如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear：

image

不幸的是出现了一个新的问题，由于没有现有的元素可以应用清理，所以我们只能添加一个空元素并且清理它。




    
    some text

这样可以实现我们希望的效果，但是需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。

你可能感兴趣的:(css定位)

css定位页面元素,页面元素定位-CSS元素基本定位戒糖ing css定位页面元素
基本定位"""属性定位一"""##通过id#driver.find_element_by_css_selector("#kw").send_keys(u"博客园")##通过class#driver.find_element_by_css_selector(".s_ipt").send_keys(u"博客园")#通过标签数量过多的情况下需要增加标签过滤#driver.find_element_by_
XPATH表达式定位页面元素 qq_41075467 #RIDE--元素定位自动化软件测试 Xpath表达式 RIDE元素定位
XPATH表达式定位页面元素XPATH表达式语法1.选取节点2.谓语：用来查找某个特定的节点或者包含某个制定的值的节点，嵌在[]中3.选取未知节点4.选取若干路径轴：可定义相对于当前节点的节点集运算符常用功能函数1.关于节点的函数2.类型转换函数3.布尔函数4.字符串函数自动化测试学习过程中会用到一些页面元素的定位方法，常见的有id定位，name定位，css定位，以及Xpath定位，这里介绍的是X
css定位 chasing_dream
固定定位（position:fixed);相对于浏览器的窗口定位：div{position:fixed;left:100px;top:150px;};不会随着页面的滚动，而变化位置相对定位（position:relative);相对于自己的位置发生移动；相对于原位置发生偏移适合微调；div{position:relative；left:100px;top:150px;}绝对定位（position：
CSS定位装饰 2301_81054073 前端 html
网页常见布局方式标准流块级元素独占一行---垂直布局行内元素/行内块元素一行显示多个----水平布局浮动可以让原本垂直布局的块级元素变成水平布局定位可以让元素自由的摆放在网页的任意位置一般用于盒子之间的层叠情况使用定位步骤设置定位方式属性名：position常见属性值：定位方式属性值相对定位relative绝对定位absolute固定定位fixed设置偏移值偏移值设置分为两个方向，水平和垂直方向各
前端开发CSS实用的技巧有哪些程序员
接上文4.CSS定位CSS定位是非常实用的技巧。CSS定位是一种用于控制网页元素布局和位置的技术。它通过设置元素的定位属性和偏移属性来实现元素在页面中的精确定位。通过使用CSS定位，可以精确控制元素在网页中的位置，能够创建出具有吸引力和优化布局的网页设计。CSS定位主要有以下几种方式：相对定位（relativepositioning）、绝对定位（absolutepositioning）、固定定位（
CSS综合案例3 满分观测网友z CSS css 前端
CSS综合案例31.案例展示我们今天用CSS定位来做一个谷歌搜索框。2.代码分析3.代码演示谷歌搜索框*{margin:auto;padding:0;box-sizing:border-box;}.wrapper{width:541px;height:44px;border:1pxsoild#ddd;box-shadow:002px#cdc6c6;border-radius:30px;positi
CSS定位珍✰ 前端web css 前端
目录1.定位1.1为什么需要定位1.2定位组成1.2.1定位模式1.2.2边偏移1.3静态定位static(了解)1.4相对定位relative（重要）1.5绝对定位absolute（重要）1.6子绝父相的由来1.7固定定位fixed（重要）1.8粘性定位sticky（了解，可能是未来研究的方向）1.9定位总结1.10定位叠放次序z-index1.11定位的拓展1.11.1绝对定位的盒子居中1.1
CSS定位满分观测网友z CSS css css3 前端
CSS定位我们今天来学习CSS的定位，可以通过CSS中的position属性用来设置元素在页面中的位置。1.相对定位相对定位，即相对于自己原来的位置进行定位，可以通过top、right、bottom、left这4个属性来设置元素相对于正常位置的偏移量，在此过程中不会对其它元素造成影响。给元素设置position:relative即可实现相对定位。1.1代码演示相对定位div{width:500px
CSS定位 Muko_0x7d2 前端开发 css 前端
CSS定位1.相对定位1.1如何设置相对定位？给元素设置position:relative即可实现相对定位。可以使用left、right、top、bottom四个属性调整位置。1.2相对定位的参考点在哪里？相对自己原来的位置1.3相对定位的特点：不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。默认规
静态pc端页面，你一定用得上的技巧 . hh 前端学习笔记 css css3 html html5 前端
目录一、CSS盒子布局1.内边距padding2.外边距margin3.案例4.边框形状5.阴影二、浮动1.浮动特性2.清除浮动3.css书写顺序三、css定位1.==定位=定位模式（position）+边偏移（top、left、right、bottom）==2.案例3.元素的显示与隐藏四、CSS高级技巧1.精灵图2.字体图标3.css三角4.鼠标样式&轮廓线5.vertical-align6.溢
selenium css定位咖啡加剁椒软件测试 selenium css tensorflow 软件测试功能测试自动化测试程序人生
selenium-css定位element_css=driver.find_element(By.CSS_SELECTOR,'css表达式')css定位说明selenium中的css定位，实际是通过css选择器来定位到具体元素，css选择器来自于css语法css定位优点语法简洁对比其他定位方式，定位效率更快对比其他定位方式，定位更稳定调试方法方法1：在浏览器开发者模式的elements中，Ctrl
CSS定位爱踢粪球的虫 css 前端
定位的组成：这个属性只有当position属性设置为absolute、fixed、relative时才有效。而且在position属性取值不同时，它们的含义也不同。left和right属性值除了可以设置为绝对的像素数外，还可以设置百分数。定位模式：静态定位static(了解)：相对定位relative（重点）：不脱标。它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）原来在标
Web前端入门学习笔记 HTML、CSS、Javascript、Jquery love is sour 前端 javascript 前端学习
Web学习笔记文章目录一.前言参考资料二.HTML基础HTML概述img标签Div标签表单Web语义化三.CSS样式CSS概述CSS添加方法选择器CSS文本样式CSS背景样式CSS超链接列表，表格样式四.CSS布局与定位概述盒子模型CSS定位概述文档流定位浮动定位层定位弹性盒子布局网格布局精灵图五、CSS3盒子圆角边框阴影文字与文本2D转换过渡效果3D变换六、JavaScript加入JS代码的方法
自动化测试CSS元素定位 .咖啡加剁椒软件测试 css tensorflow 前端软件测试功能测试自动化测试程序人生
1.1CSS定位1.1.1绝对路径定位目标查找第一个文本为“猜猜看”的a标签实现CSS表达式html>body>div>a[.=”猜猜看”]python表达式driver.find_element_by_css_selector(‘html>body>div>a[.=”猜猜看”]’)1.1.2相对路径定位目标查找第一个文本为“猜猜看”的a标签实现CSS表达式a[.=”猜猜看”]Python表达式d
CSS定位 Mon trésor.88 css html 前端
目录一，浮动和定位的区别：编辑二，定位的组成：编辑1，定位模式：position编辑（1，静态定位：（了解）（2，相对定位：relative（重要）（3，绝对方位：absolute（重要）（4，固定定位：fixed（重要）小技巧：固定到版心右侧编辑（5，粘性定位：sticky（了解）2，边偏移：三，子绝父相：绝对定位和相对定位的使用场景编辑一，浮动和定位的区别：二，定位的组成：1，定位模式：pos
css定位 LorenSLJ
CSS定位(Positioning)属性允许你对元素进行定位。CSS定位和浮动CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。一切皆为框div、h1或p元素常常被称为块级元素
CSS定位布局学习 hzttaoh css 学习前端
CSS定位布局是指通过CSS的定位属性来控制元素在页面上的位置和布局。常见的CSS定位属性有：relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和static（静态定位）。下面是一些学习CSS定位布局的基本知识和技巧：1.相对定位（relative）：使用相对定位可以使元素相对于其正常位置进行偏移，但仍然在文档流中占据原来的空间。通过设置top、bottom、lef
CSS定位 dmnyksl css 前端 html
定位1.1为什么需要定位1，浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子2，定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置，并且可以压住其他盒子1.2定位组成定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子定位=定位模式+边偏移定位模式用于指定一个元素在文档中的定位方式边偏移决定了该元素的最终位置1，定位模式定位模式决定元素的定位
Selenium定位元素的方法css和xpath的区别心软小念技术分享软件测试 selenium css 测试工具
selenium是一种自动化测试工具，它可以通过不同的定位方式来识别网页上的元素，如id、name、class、tag、linktext、partiallinktext、css和xpath。css和xpath是两种常用的定位方式，它们都可以通过元素的属性或者层级关系来定位元素，但是它们也有一些区别：css:css是级联样式表，它用于给HTML网页的不同元素添加样式。css定位器可以直接用元素的id
CSS:浅谈position属性(笔记) 神经骚栋
前言这两天,在做进度条的时候,使用到position(定位)相关的知识点.主要是实现一个进度条效果,动画是使用move.js实现的(主要需要使用到动画结束回调方法),需要把进度条放在文字的下方,在此之前,只是了解过相关的Z-index属性可以实现的,对于CSS定位属性只是简单了解,并没有深入,在实现效果之后,这次做一下关于position属性的相关笔记,以备不时之需.需实现的效果如下图所示.pos
第八讲_css定位文大奇Quiin CSS样式 css 前端 css3
css定位1.css定位介绍2.静态定位（static）3.相对定位（relative）4.绝对定位（absolute）5.固定定位（fixed）6.粘性定位（sticky）1.css定位介绍在css中，可以通过position设置元素的定位模式，常见的定位模式：static（默认值）：按照正常的文本流布局。relative：相对定位。absolute：绝对定位。fixed：固定定位。sticky
基于selenium的pyse自动化测试框架心软小念软件测试技术分享 selenium 测试工具
介绍：pyse基于selenium（webdriver）进行了简单的二次封装，比selenium所提供的方法操作更简洁。特点：默认使用CSS定位，同时支持多种定位方法（id\name\class\link_text\xpath\css）。本框架只是对selenium（webdriver）原生方法进行了简单的封装，精简为大约30个方法，这些方法基本能够胜任于我们的web自动化测试。以测试类为单位，自
Java零基础教学文档第四篇：HTML_CSS_JavaScript（1）动力节点IT教育 Java零基础教学文档 java html css
今日新篇章【CSS】【主要内容】CSS简介CSS基础语法CSS选择器CSS常用属性CSS元素分类CSS定位【学习目标】1.CSS的简介1.1CSS定义与解释**CSS是CascadingStyleSheets（层叠样式表单）的简称，CSS就是一种叫做样式表（stylesheet）的技术。它用于定义HTML元素的显示形式，是一种格式化网页内容的技术。CSS现在已经被大多数浏览器所支持，成为网页设计者
软件测试/测试开发/全日制|作为测试工程师，必须掌握的CSS知识霍格沃兹测试开发学社功能测试 css 前端功能测试
简介上篇文章我们介绍了HTML的相关知识，作为web的三种重要文件资源之一，CSS也是我们作为测试工程师必须要有所了解的知识，比如我们在web测试工作中，CSS定位能够迅速帮我们定位到元素。本篇文章我们就来介绍一下作为测试工程师，我们需要掌握的CSS知识。CSSCSS（CascadingStyleSheets）即层叠样式表，是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记
CSS定位 Gao_xu_sheng css 前端
定位(position)理解能说出为什么要用定位能说出定位的4种分类能说出四种定位的各自特点能说出我们为什么常用子绝父相布局1.CSS布局的三种机制普通流（标准流）浮动让盒子从普通流中浮起来——让多个盒子(div)水平排列成一行。定位将盒子定在某一个位置自由的漂浮在其他盒子的上面2.为什么使用定位我们先来看一个效果，同时思考一下用标准流或浮动能否实现类似的效果？1.当我们滚动窗口的时候，盒子是固定
采集“中国新闻网”的“即时新闻”数据-Scrapy的使用夜をむかえる scrapy
实验题目：采集“中国新闻网”的“即时新闻”数据。网址：滚动新闻-中国新闻网-梳理天下新闻。要求：使用Scrapy框架采集数据；采集1-3页的新闻标题、发布时间、新闻内容；每个新闻用一个文本文件存储，文件名为新闻标题。实验相关知识的简述(1)安装Scrapy：Condainstallscrapy(2)熟练使用scrapy(3)熟练使用xpath以及css定位元素问题分析与重点环节设计采集过程主要使用
Web网页开发-CSS定位-笔记编程在手天下我有前端 css 笔记
一、CSS的三种布局(1)标准流块级元素:一行一个行内元素:一行多个，margin上下无效行内块元素:一行多个(2)浮动让元素同处一行(3)定位让元素在浏览器中任何位置,并且覆盖住其他元素，能够固定死在浏览器上的某个位置，不随滚动条滚动对于定位的元素，默认堆叠值为0，z-index:数值越大越靠上边偏移:决定了元素的位置，top:表示与上面的距离，bottom:表示与下面距离，left:表示与左边
【融职培训】Web前端学习第2章网页重构9 css定位 lmonkey_01
一、定位的基本概念在我们浏览网页的过程中，经常会发现网页中的元素重叠展示，例如一个列表压在了一张图片之上，或者浏览器右下角突然弹出的广告压到了其他元素之上，这些都需要使用css的定位才能实现，本节我们就讲解css定位相关的属性，定位可以分为三类:绝对定位相对定位固定定位二、css定位详解我们可以通过position属性，将一个元素设置成定位元素，之后就可以通过top、left、bottom、rig
前端学习之路---CSS 胡哥居士前端开发 web前端 css html HTML5 css3
CSS学习内容下一篇javascript基础（1）1.学会使用CSS选择器2.熟记CSS样式和外观属性3.熟练掌握CSS各种选择器4.熟练掌握CSS各种选择器5.熟练掌握CSS三种显示模式6.熟练掌握CSS背景属性7.熟练掌握CSS三大特性8.熟练掌握CSS盒子模型9.熟练掌握CSS浮动10.熟练掌握CSS定位11.熟练掌握CSS高级技巧强化CSSCSS的发展历程从HTML被发明开始，样式就以各种
自动化测试-Selenium 秃头的赌徒 selenium 测试工具
一.Selenium介绍selenium是用来做web自动化测试的框架,支持各种浏览器,各种,支持各种语言原理:二.元素定位2.1XPath定位绝对路径:/html/head/title相对路径以双斜杠开头,常见的相对路径定位有以下几种:相对路径+索引:索引是从1开始的相对路径+属性值:相对路径+通配符相对路径+文本匹配2.2CSS定位•id选择器:#id•类选择器:.class•标签选择:标签名
js动画html标签（持续更新中） 843977358 html js 动画 media opacity
1.jQuery 效果 - animate() 方法改变 "div" 元素的高度： $(".btn1").click(function(){ $("#box").animate({height:"300px
springMVC学习笔记 caoyong springMVC
1、搭建开发环境 a>、添加jar文件，在ioc所需jar包的基础上添加spring-web.jar,spring-webmvc.jar b>、在web.xml中配置前端控制器 <servlet> &nbs
POI中设置Excel单元格格式 107x poi style 列宽合并单元格自动换行
引用：http://apps.hi.baidu.com/share/detail/17249059 POI中可能会用到一些需要设置EXCEL单元格格式的操作小结：先获取工作薄对象: HSSFWorkbook wb = new HSSFWorkbook(); HSSFSheet sheet = wb.createSheet(); HSSFCellStyle setBorder = wb.
jquery 获取A href 触发js方法的this参数无效的情况一炮送你回车库 jquery
html如下： <td class=\"bord-r-n bord-l-n c-333\"> <a class=\"table-icon edit\" onclick=\"editTrValues(this);\">修改</a> </td>" j
md5 3213213333332132 MD5
import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class MDFive { public static void main(String[] args) { String md5Str = "cq
完全卸载干净Oracle11g sophia天雪 orale数据库卸载干净清理注册表
完全卸载干净Oracle11g A、存在OUI卸载工具的情况下：第一步：停用所有Oracle相关的已启动的服务；第二步：找到OUI卸载工具：在“开始”菜单中找到“oracle_OraDb11g_home”文件夹中 &
apache 的access.log 日志文件太大如何解决 darkranger apache
CustomLog logs/access.log common 此写法导致日志数据一致自增变大。直接注释上面的语法 #CustomLog logs/access.log common 增加： CustomLog "|bin/rotatelogs.exe -l logs/access-%Y-%m-d.log
Hadoop单机模式环境搭建关键步骤 aijuans 分布式
Hadoop环境需要sshd服务一直开启，故，在服务器上需要按照ssh服务，以Ubuntu Linux为例，按照ssh服务如下： sudo apt-get install ssh sudo apt-get install rsync 编辑HADOOP_HOME/conf/hadoop-env.sh文件，将JAVA_HOME设置为Java
PL/SQL DEVELOPER 使用的一些技巧 atongyeye java sql
1 记住密码这是个有争议的功能，因为记住密码会给带来数据安全的问题。但假如是开发用的库，密码甚至可以和用户名相同，每次输入密码实在没什么意义，可以考虑让PLSQL Developer记住密码。位置：Tools菜单－－Preferences－－Oracle－－Logon HIstory－－Store with password 2 特殊Copy 在SQL Window
PHP：在对象上动态添加一个新的方法 bardo 方法动态添加闭包
有关在一个对象上动态添加方法，如果你来自Ruby语言或您熟悉这门语言，你已经知道它是什么...... Ruby提供给你一种方式来获得一个instancied对象，并给这个对象添加一个额外的方法。好！不说Ruby了，让我们来谈谈PHP PHP未提供一个“标准的方式”做这样的事情，这也是没有核心的一部分... 但无论如何，它并没有说我们不能做这样
ThreadLocal与线程安全 bijian1013 java java多线程 threadLocal
首先来看一下线程安全问题产生的两个前提条件： 1.数据共享，多个线程访问同样的数据。 2.共享数据是可变的，多个线程对访问的共享数据作出了修改。实例：定义一个共享数据： public static int a = 0;
Tomcat 架包冲突解决征客丶 tomcat Web
环境： Tomcat 7.0.6 win7 x64 错误表象：【我的冲突的架包是：catalina.jar 与 tomcat-catalina-7.0.61.jar 冲突，不知道其他架包冲突时是不是也报这个错误】严重: End event threw exception java.lang.NoSuchMethodException: org.apache.catalina.dep
【Scala三】分析Spark源代码总结的Scala语法一 bit1129 scala
Scala语法 1. classOf运算符 Scala中的classOf[T]是一个class对象，等价于Java的T.class,比如classOf[TextInputFormat]等价于TextInputFormat.class 2. 方法默认值 defaultMinPartitions就是一个默认值，类似C++的方法默认值
java 线程池管理机制 BlueSkator java线程池管理机制
编辑 Add Tools jdk线程池一、引言第一：降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。第二：提高响应速度。当任务到达时，任务可以不需要等到线程创建就能立即执行。第三：提高线程的可管理性。线程是稀缺资源，如果无限制的创建，不仅会消耗系统资源，还会降低系统的稳定性，使用线程池可以进行统一的分配，调优和监控。
关于hql中使用本地sql函数的问题（问-答） BreakingBad HQL 存储函数
转自于：http://www.iteye.com/problems/23775 问：我在开发过程中，使用hql进行查询（mysql5）使用到了mysql自带的函数find_in_set()这个函数作为匹配字符串的来讲效率非常好，但是我直接把它写在hql语句里面（from ForumMemberInfo fm,ForumArea fa where find_in_set(fm.userId,f
读《研磨设计模式》-代码笔记-迭代器模式-Iterator bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.Arrays; import java.util.List; /** * Iterator模式提供一种方法顺序访问一个聚合对象中各个元素，而又不暴露该对象内部表示 * * 个人觉得，为了不暴露该
常用SQL chenjunt3 oracle sql C++c C#
--NC建库 CREATE TABLESPACE NNC_DATA01 DATAFILE 'E:\oracle\product\10.2.0\oradata\orcl\nnc_data01.dbf' SIZE 500M AUTOEXTEND ON NEXT 50M EXTENT MANAGEMENT LOCAL UNIFORM SIZE 256K ; CREATE TABLESPA
数学是科学技术的语言 comsci 工作活动领域模型
从小学到大学都在学习数学，从小学开始了解数字的概念和背诵九九表到大学学习复变函数和离散数学，看起来好像掌握了这些数学知识，但是在工作中却很少真正用到这些知识，为什么？最近在研究一种开源软件-CARROT2的源代码的时候，又一次感觉到数学在计算机技术中的不可动摇的基础作用，CARROT2是一种用于自动语言分类（聚类）的工具性软件，用JAVA语言编写，它
Linux系统手动安装rzsz 软件包 daizj linux sz rz
1、下载软件 rzsz-3.34.tar.gz。登录linux，用命令 wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz下载。 2、解压 tar zxvf rzsz-3.34.tar.gz 3、安装 cd rzsz-3.34 ; make posix 。注意：这个软件安装与常规的GNU软件不
读源码之:ArrayBlockingQueue dieslrae java
ArrayBlockingQueue是concurrent包提供的一个线程安全的队列,由一个数组来保存队列元素.通过 takeIndex和 putIndex来分别记录出队列和入队列的下标,以保证在出队列时不进行元素移动. //在出队列或者入队列的时候对takeIndex或者putIndex进行累加,如果已经到了数组末尾就又从0开始,保证数
C语言学习九枚举的定义和应用 dcj3sjt126com c
枚举的定义 # include <stdio.h> enum WeekDay { MonDay, TuesDay, WednesDay, ThursDay, FriDay, SaturDay, SunDay }; int main(void) { //int day; //day定义成int类型不合适 enum WeekDay day = Wedne
Vagrant 三种网络配置详解 dcj3sjt126com vagrant
Forwarded port Private network Public network Vagrant 中一共有三种网络配置，下面我们将会详解三种网络配置各自优缺点。端口映射(Forwarded port)，顾名思义是指把宿主计算机的端口映射到虚拟机的某一个端口上，访问宿主计算机端口时，请求实际是被转发到虚拟机上指定端口的。Vagrantfile中设定语法为： c
16.性能优化-完结 frank1234 性能优化
性能调优是一个宏大的工程，需要从宏观架构(比如拆分，冗余，读写分离，集群，缓存等)，软件设计（比如多线程并行化，选择合适的数据结构），数据库设计层面（合理的表设计，汇总表，索引，分区，拆分，冗余等）以及微观（软件的配置，SQL语句的编写，操作系统配置等）根据软件的应用场景做综合的考虑和权衡，并经验实际测试验证才能达到最优。性能水很深，笔者经验尚浅，赶脚也就了解了点皮毛而已，我觉得
Word Search hcx2013 search
Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from letters of sequentially adjacent cell, where "adjacent" cells are those horizontally or ve
Spring4新特性——Web开发的增强 jinnianshilongnian spring spring mvc spring4
Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API Spring4新
CentOS安装配置tengine并设置开机启动 liuxingguome centos
yum install gcc-c++ yum install pcre pcre-devel yum install zlib zlib-devel yum install openssl openssl-devel Ubuntu上可以这样安装 sudo aptitude install libdmalloc-dev libcurl4-opens
第14章工具函数（上） onestopweb 函数
index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
Xelsius 2008 and SAP BW at a glance blueoxygen BO Xelsius
Xelsius提供了丰富多样的数据连接方式，其中为SAP BW专属提供的是BICS。那么Xelsius的各种连接的优缺点比较以及Xelsius是如何直接连接到BEx Query的呢？以下Wiki文章应该提供了全面的概览。 http://wiki.sdn.sap.com/wiki/display/BOBJ/Xcelsius+2008+and+SAP+NetWeaver+BW+Co
oracle表空间相关 tongsh6 oracle
在oracle数据库中，一个用户对应一个表空间，当表空间不足时，可以采用增加表空间的数据文件容量，也可以增加数据文件，方法有如下几种： 1.给表空间增加数据文件 ALTER TABLESPACE "表空间的名字" ADD DATAFILE '表空间的数据文件路径' SIZE 50M; &nb
.Net framework4.0安装失败 yangjuanjava .net windows
上午的.net framework 4.0，各种失败，查了好多答案，各种不靠谱，最后终于找到答案了和Windows Update有关系，给目录名重命名一下再次安装，即安装成功了！下载地址：http://www.microsoft.com/en-us/download/details.aspx?id=17113 方法： 1.运行cmd，输入net stop WuAuServ 2.点击开

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他