绝对定位 | 易学教程

2.前端笔记之css

阅读更多关于 2.前端笔记之css

title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀出处: http://www.liuyao.me欢迎转载一、css简介 css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化，CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。存在方式有三种：元素内联、页面嵌入和外部引入 1.元素内联 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <a style="color: #b2002e" href="#">耀耀</a> </body> </html> 显示如下：耀耀 2.页面嵌入 <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style>  .test{ color: #b2002e; } </style> </head> <body>  <a class="test" href="#">耀耀</a> </body> </html> 显示：

定位：相对定位，绝对定位实例演练

阅读更多关于定位：相对定位，绝对定位实例演练

先发布标题名称，内容稍后完善，避免时间超过2-13 CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。总体来说，CSS具有以下特点：丰富的样式定义 CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。易于使用和修改 CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。多页面应用 CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。层叠简单的说

javaweb-css

阅读更多关于 javaweb-css

本文着重介绍 CSS( 在网上搜集的笔记是跟 html 在同一天讲完的 , 但是这样太草率 , 所以我把 css 单独列出来 , 毕竟是装修装饰的玩意 , 多了解一点 , 人靠衣装嘛 ) CSS 1 、 css 的简介（ 1 ）什么是 css ？层叠样式表 * 样式表：有很多的属性和属性值，来设置内容样式 * 层叠：一层一层的，样式的优先级。 ** 优先级 : 由上至下 , 就近原则最终目的 : 把网页的内容和样式进行分离 , 利于代码的后期维护 * 想要使用 css ，不能单独使用，要和 html 结合使用 * css 和 html 的如何结合使用。 2 、 css 和 html 的结合方式（ 1 ） css 和 html 有四种结合方式第一种：使用 html 标签里面的属性 style="css 的代码 " ( 不推荐 , 因为太乱 ) * 代码 <div style="color:blue;"> 第二种：使用 html 的标签 ( 这种用得比较多 ) * <style type="text/css"> css 的代码 ; </style> * 代码 <style type="text/css"> div { color:black; } </style> 第三种：使用 html 标签实现 link ，写在 head 里面 ( 外部样式表 , 用的也挺多 ) *

定位position介绍

阅读更多关于定位position介绍

定位 (position): 是一种更加高级的布局手段　　　　　　　-通过定位可以将元素摆放到页面的任意位置。　　　　　　　使用position属性来设置定位　　　　　　　　可选值： static 默认值元素是静止的，没有开启定位　　　　　　　　　　　　 relative 开启元素的相对定位　　　　　　　　　　　　 absolute 开启元素的绝对定位　　　　　　　　　　　　 fixed 开启元素的固定定位　　　　　　　　　　　　 sticky 开启元素的粘滞定位例子：开启相对定位　　　　position:relative; 　　　　top:100px; // 向上偏移100像素　　　　bottom:10px; 　　　　left:10px; 　　　　right:10px; 　　相对定位的特点: 　　　　　　　　　　1.如果不设置偏移量，元素不会发生任何变化。　　　　　　　　　　2.相对定位参照元素在文档中的位置进行定位。　　　　　　　　　　3.相对定位会提升元素的层级。　　　　　　　　　　4 . 相对定位不会使元素脱离文档流。　　　　　　　　　　5.相对定位不会改变元素性质。　　　绝对定位的特点: 　　　　　　　　　　1.如果不设置偏移量，元素的位置不会发生变化。　　　　　　　　　　2.元素会从文档流中脱离。　　　　　　　　　　3

CSS中的float和clear属性

阅读更多关于 CSS中的float和clear属性

CSS中的float和clear属性 2008-04-29 15:39 页面design中，用CSS控制布局时float与clear属性的运用至关重要，一定要理解清楚。下面用我自己摸索和网络上整理的内容加以总结。第一，必须要明白两件事： 1 .浏览器事按照HTML代码中对象声明的先后顺序,以流布局的方式来显示对象的. 2.HTML中的所有对象几乎都默认分为两种: block对象和in-line对象. 其中, block默认的显示状态是占据整行; in-line对象则相反,允许其他对象与它在一行中显示. 而float属性, 它的作用就是改变block对象的默认显示方式. block对象设置了float属性之后,它将不再独自占据一行. 先看下面示例。代码： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <style> .left { background-color:#cccccc; border:2px solid #333333; width:200px; height:100px; } .leftfloat { background-color:#cccccc; border:2px solid #333333; width:200px; height:100px;

css基础

阅读更多关于 css基础

css样式由选择符和声明组成，而声明又由属性和值组成。P{color:blue;}，选择符指网页中要应用样式规则的元素。属性与值之间用：分隔，多条声明用；分隔 css中用/*注释语句*/，html用<!—注释语句--> 从CSS样式代码插入的形式来看基本可以分为3种：内联式、嵌入式、外部式。内联式就是直接把css代码直接写在现有的HTML标签中，即写在style=””双引号中，如果有多条语句可以写在一起，用分号隔开。嵌入式：把CSS代码写在<style type=”text/css”> </style>标签之间。并且一般情况下嵌入式写在<head></head>之间。外部式：把css代码写一个单独的外部文件中，文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：<link href="base.css" rel="stylesheet" type="text/css" /> 注意： 1、css样式文件名称以有意义的英文字母命名，如 main.css。 2、rel="stylesheet" type="text/css" 是固定写法不可修改。 3、<link>标签位置一般写在<head>标签之内。标签选择器：就是HTML中的标签，如<html><body><h1><p><img>

如何精确定位固定大小的div在网页的中间位置并且不随分辨率的设置改变(位置大小都不变)

阅读更多关于如何精确定位固定大小的div在网页的中间位置并且不随分辨率的设置改变(位置大小都不变)

所有的框模型一开始都是按文档中正常的元素流定位，而定位position属性允许我们改变这些自然的位置。通过利用一些简单的Css规则，position使得设计者可以将HTML元素精确放置，position属性确定了每个元素框（box）定位的参考点。在详细介绍之前，我们先简要的说明一下定位的4种方法： 1、静止定位（static）：这种方法使得所有的元素最终位置都是一个静止位置。所以没有什么需要特殊说的。 2、绝对定位（absolute）：这种方法允许用户指定元素的左上角、右下角或者其他的参考点和最近的父元素之间的关系将该元素从正常的文档流中拖出来。当页面滚动时，元素将保持它们各自的位置不变，随着页面一起滚动，就像粘在一起一样。 3、固定定位（fixed）：这种方法允许元素相对于实际的浏览器窗口放置。 4、相对定位（relative）：这方法定义相对于在默认情况下浏览器把它放置的位置。这个很难解释，可喜的是这个方法使用的很少。静止定位static 定位的默认值static，不使用定位属性和使用这个值对页面没有什么效果的。绝对定位absolute 当一个元素被绝对定位了，浏览器做的第一件事是把它从流中完全移走，接着放置在定位属性指定的位置上。看看下面的例子： #sidebar{ position:absolute; top:100px; right:200px; width

css实现高度垂直居中

阅读更多关于 css实现高度垂直居中

1：单行文字垂直居中：如果一个容器中只有一行文字的话，定义height(高度)和 line-height(行高)相等即可。　　如：<div style="height:25px;line-height:25px;overflow:hidden">aa</div> 2：多行文本固定高度垂直居中：核心：display:table 和display:table-cell ;vertical-align:middle; 兼容：ie7+ 1 <div class="wrapper"> 2 <div class="content">content age</div> 3 </div> 相对应的css代码如下： .wrapper{ height:400px; display:table; } .content{ vertical-align:middle; display:table-cell; border:1pxsolid#FF0099; background-color:#FFCCFF; width:760px; } 核心：display:table 和display:table-cell ;vertical-align:middle; 以及使用绝对定位兼容：ie6+ <div class="wrap"> <div class="subwrap"> <div class=

css中子绝父相

阅读更多关于 css中子绝父相

子绝父相：绝指的是绝对定位，即css中的position: absolute；相是指css中的position: relative。子绝父相能够使子节点按照父节点的标准进行绝对定位例如：父盒子添加margin-left后，子节点也会跟着父节点的位置相对移动，因为子节点在父节点中的位置是相对固定的。来源： CSDN 作者：高产似母猪的小号链接： https://blog.csdn.net/zeshen123/article/details/104213482

Web前端开发——CSS布局与定位之层定位

阅读更多关于 Web前端开发——CSS布局与定位之层定位

目录 1. 内容 2. 层定位概述 3. 固定定位position:fix 3.1 案例1 3.2 案例2 4.相对定位position:relative 4.1 保留文档流的原位置 4.2 相对于直接父元素 5. 绝对定位position:absolute 5.1 不保留文档流的原位置 5.2 相对static定位以外的第一个父元素 5.2.1 一般情况 5.2.2 极端情况 6. relative和absolute的区别 7.relative+absolute混合使用 1. 内容 2. 层定位概述我们希望网页的元素可以层叠在另外的一个元素上面，出现这种叠加或者覆盖的效果，这个时候我们就用到层定位，层定位像图像软件中的图层一样可以对每个layer能够精确定位操作。层定位主要使用positon属性来设定，当前这一层究竟可以相对于哪一层来进行定位，不同的属性值它的参照物是不同的，有了参照物之后就使用这几个属性来进行位置的设定； z-index设置前后层的层叠关系，取值大的这一层会覆盖遮挡取值小的这一层，如果我们希望把当前的这个图片进行背景的设定，我们可以把它的z-index属性的取值设置的非常小，比如设置成一个负数（-999），如果设置的值很大，那么它就变成了顶层，都是按照它的取值大小顺序来逐层排列的；我们把某个网页元素称为一层，那外面的元素称为父层，里面嵌入的元素称为子层

订阅绝对定位