资讯专栏INFORMATION COLUMN

css 定位及属性 命名规范

JouyPub / 2217人阅读

摘要:元素的位置通过以及属性进行规定。如对齐样式使用对齐目标的英文名称。如标题栏样式使用类别功能的方式命名。注意事项一律小写尽量用英文不加中杠和下划线尽量不缩写,除非一看就明白的单词推荐的书写顺序显示属性自身属性文本属性待续

定位

static 静态定位(不对它的位置进行改变,在哪里就在那里)

默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

fixed固定定位(参照物--浏览器窗口)---做 弹窗广告用到生成固定定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative(相对定位 )(参照物以他本身)

生成相对定位的元素,相对于其正常位置进行定位。

absolute(绝对定位)(除了static都可以,找到参照物-->与它最近的已经有定位的父元素进行定位)

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

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

定位的基本思想: 它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
一切皆为框
块级元素: div、h1或p元素 即:显示为一块内容称之为 “块框“ ;

行内元素: span,strong,a等元素 即:内容显示在行中称 "行内框";

使用display属性改变成框的类型 即:display:block;

让行内元素设置为块级元素,display:none; 没有框
相对定位:
如果对一个元素进行相对定位,它将出现在它所在的位置上。

通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动
     .adv_relative {
         position: relative;
         left: 30px; 
         top: 20px; 
     }
绝对定位:
元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,它的位置相对于最初的包含块。
    .adv_absolute { 
        position: absolute; 
        left: 30px; 
        top: 20px; 
    }
框架

frameset框架:

---- 用来定义一个框架;双标签
不能和 一起使用

rows、cols属性

rows 定义行表示框架有多少行(取值 px / % / * )
cols 定义列表示框架有多少列(取值 px / % / * )

frame子框架

src 显示的网页的路径
name 框架名
frameborder 边框线(取值 0 / 1)
---- 表示框架中的某一个部分;单标签,要跟结束标志

属性</b> <p><noframes> 提供不支持框架的浏览器显示body的内容;双标签</p> </p> <pre><frameset> <frame src=“” /> <frame src=“” /> <frame src=“” /> <noframes> <body>内容</body>