绝对定位 | 易学教程

CSS布局（上）

阅读更多关于 CSS布局（上）

CSS布局（上） /*--> */ /*--> */ 1、CSS布局之display 1.1、dispaly dispaly是CSS中最重要的用于控制布局的属性，每个元素都有一个默认的display，大多数元素的默认值通常是block（块级元素）或inline（行内元素）。另一个常用的display是none。一些特殊元素的默认值就是它，如script、link等。 1.2 display:none 与 visibility:hidden display设置为none，是不会保存元素本该显示的空间，但是visibility:hidden会保留。 <div style="width: 100px; height: 100px; border: 1px solid red;float:left;"> <span style="display:none;">ABCD</span>EFG </div> <div style="width: 100px; height: 100px; border: 1px solid red;float:left;"> <span style="visibility:hidden;">ABCD</span>EFG </div> ABCD EFG ABCD EFG 1.3、更多的display值比较常用的有list-item,inline-block

学习CSS布局

阅读更多关于学习CSS布局

本文均转自http://zh.learnlayout.com/，很多布页面布局无法转载，本篇只做部分记录，大家想了解具体页面布局可直接移步。 "display"属性 display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。 block <div> div 是一个标准的块级元素。一个块级元素会新开始一行并且尽可能撑满容器。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。 </div> inline span 是一个标准的行内元素。一个行内元素可以在段落中 <span> 像这样 </span> 包裹一些文字而不会打乱段落的布局。 a 元素是最常用的行内元素，它可以被用作链接。 none 另一个常用的display值是 none 。一些特殊元素的默认 display 值是它，例如 script 。 display:none 通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。它和 visibility 属性不一样。把 display 设置成 none

css核心内容之定位

阅读更多关于 css核心内容之定位

定位这个知识点有难掌握，但是越难掌握我们就要去好好理解，多敲敲代码，自己动手测试一把，我相信大家都能够把它理解消化掉，变成自己的东西。大家以后学习还是多多动手实践，这样才能把理解知识实践化。不多废话，现在学习定位。常见的定位就那么4中，4中不多也不少，把它好好理解就等于消化了。 1、static定位（静态的）（默认的【left 和 top 无效】） 2、relative 相对定位 3、absolute 绝对定位 4、fixed 固定的举列子说明 a、static定位 [ static定位（静态的）（默认的） ]：默认的：我先给出HTML 和css文件 HTML文件： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <link rel="stylesheet" type="text/css" href="position.css"> <title>定位练习</title> </head> <body> <div class

CSS属性（float、position）

阅读更多关于 CSS属性（float、position）

一、float属性 1、基本属性先来了解一下block元素和inline元素在文档流中的排列方式。　　block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；　　inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等。所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外

css总结——position

阅读更多关于 css总结——position

CSS（Cascading Style Sheet），中文翻译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在css控制页面中，主要有四种样式：行内样式（style 属性将css嵌套在p 标记中）、内嵌式（在HTML部分，没采用任何css代码，而是在style中对css代码进行嵌套）、链接式（使用link语句，将外部css导入到页面中）和导入样式。在样式设计中，有一个非常关键的属性—— position CSS中有不少属性是用来定位的，这也为我们采用DIV+CSS 布局，取代古老的tabel布局提供了基础支持。 bottom：定义了定位元素下外边距边界与其包含块下边界之间的偏移。 clip：设置元素的形状。元素被剪入这个形状之中，然后显示出来。 left：定义了定位元素左外边距边界与其包含块左边界之间的偏移。 overflow：设置当元素的内容溢出其区域时发生的事情。 position：把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 right：定义了定位元素右外边距边界与其包含块右边界之间的偏移。 top：定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 vertical-align：设置元素的垂直对齐方式。 z-index：设置元素的堆叠顺序。而这其中非常关键和初学者容易搞混的概念就是

web前端css(二)

阅读更多关于 web前端css(二)

一. 标准文档流标准文档流中会有一些现象: 空白折叠和高低不齐边底对齐的现象标准文档流等级森严, 标签分为两种等级: 行内元素和块级元素. 1. 行内元素和块级元素的区别: 行内元素:不能设置宽高, 默认的宽度就是文字的宽度; 与其他行内元素并排块级元素:设置宽高, 如果不设置就默认宽度是父级的100% ; 独占一行,不与其它任何元素并列 2. 标签分类在HTML中已经将标签分过类了,当时分为文本级和容器级 a) 从HTML的角度来讲,标签分为: 文本级标签: p, span, a, u下划线, i斜体(已废弃), em斜体(已废弃), b粗体(已废弃) 容器级标签: div, li, dt, dd, h系列这里为什么说p是文本级标签呢? 因为p里面只能放文字, 图片, 表单. P里不能放h系列, 不能放ul 也不能放p. b) 现在从css角度看和上面很像,就p不一样: 行内元素: 除了p之外,所有的文本级标签都是行内元素. P是文本级标签但是是个块级元素块级元素:所有的容器级标签 div lid dt dd h, 还有 p 标签 3. 块级元素和行内元素的转换我们可以通过display属性将块级元素和行内元素相互转换块级元素转行内元素: 设置display:inline; 行内元素转块级元素: 设置display:block; 4.

css深入理解之overflow

阅读更多关于 css深入理解之overflow

第一回 overflow基本属性 overflow基本属性 visibel hidden scroll auto inherit overflow-x和overflow-y overflow-x和overflow-y设置一样的值，等同于overflow。如果不同，其中一个赋予visibel，auto，另一个赋值visibel，auto ，hidden。则会被重置为auto。作用的前提 1.非display：inline水平！ 2.对应方位的尺寸限制，width/height/max-width/max-height/absolute拉伸 overflow：visibel妙用 IE7浏览器下，文字越多，按钮两侧padding留白就越大。给所有按钮添加css样式 overflow：visible 第二回：overflow与滚动条滚动条出现的条件 1.overflow：auto/overflow:scroll 有些元素自带滚动条 <html> <textarea> body/html与滚动条无论什么浏览器，默认滚动条均来自html!而不是body标签 ie8+ html{overflow:auto} 所以，如果我们想要去除页面默认滚动条，只需要：html{overflow:hidden} body/html与滚动条-js与滚动高度兼容写法 var st = document

CSS知识点总结[部分]

阅读更多关于 CSS知识点总结[部分]

css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。注释为 /* 注释内容 */ CSS选择器标签选择器 div{ background-color:red; } <div > </div> class选择器 .bd{ background-color:red; } <div class='bd'> </div> id选择器 #idselect{ background-color:red; } <div id='idselect' > </div> 关联选择器(层级选择器) #idselect p{ background-color:red; } <div id='idselect' > <p> </p> </div> 组合选择器(逗号分隔) input,div,p{ background-color:red; } <div>hello world</div> <input type="text"/> <input type="password"/> <p>hello world</p> 属性选择器对选择到的标签再通过属性再进行一次筛选 input[type='text']{ width:100px; height:200px; } <input type=

CSS（14）元素定位

阅读更多关于 CSS（14）元素定位

一、元素定位机制　　1.普通文档流　　普通文档流将浏览器窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。　　　　2.定位思想和浮动　　CSS元素定位的基本思想很简单，它允许我们定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。此外，CSS中的浮动允许元素向左或者向右移动。通常情况下，我们使用div+css布局页面，而css布局中最重要的就是float属性。　　 3.一切皆为框　　div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。可以使用 display 属性改变生成的框的类型。通过将 display 属性设置为 block，可以让行内元素（比如 <a> 元素）表现得像块级元素一样。还可以通过把 display 设置为 none，让生成的元素根本没有框。这样的话，该框及其所有内容就不再显示，不占用文档中的空间。　　但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素（比如 div）的开头。即使没有把这些文本定义为段落，它也会被当作段落对待： View Code <div> /*文本生是无名框*/ some text

css之定位

阅读更多关于 css之定位

我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下： relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移 absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。 fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。 static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性 inherit 从父元素继承 position 属性的值定位元素特性绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素定位元素层级定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级，谁的z-index值大，谁的元素就在上层。典型定位布局 1、固定在顶部的菜单 2、水平垂直居中的弹框 3、固定的侧边的工具栏 4、固定在底部的按钮示例代码 <head> <style type="text/css"> .con{ width:400px; height:400px; border:1px solid #000; margin

订阅绝对定位