威尼斯888_www.wns888.com_威尼斯wns888官网
做最好的网站

计算机网络 / 编程

威尼斯888 > 计算机网络 / 编程 > 基本语法

原标题:基本语法

浏览次数:55 时间:2019-10-04

图片 1标题图

学习CSS相关知识,定位是其中的重点,也是难点之一,如果不了解css定位有时候都不知道怎么用,下面整理了一下关于定位属性的具体理解和应用方案。

  • position
  • top
  • bottom
  • right
  • left
  • z-index

基本语法:

position:static | absolute | fixed | relative

语法介绍:

  1. static:默认值,无特殊定位。
  2. absoulte:相对于其最近的一个定位设置的父对象进行绝对定位,可用left,right,top,bottom。
  3. fixed:生成绝对定位的元素。
  4. relative:生成相对定位的元素,可通过left,right,top,bottom属性设置相对于自身偏移位置。

代码:

div { position:relative; top:-4px } 

基本特殊:定位元素

基本语法:bottom:auto | length

  1. auto:默认值,无特殊定位。
  2. length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。

代码:

div { position:relative; bottom:6px; } 

语法:z-index:auto | number取值:auto:默认值,number:无单位的整数值,可负数。

代码:

div { position:absolute; z-index:5; width:6px; } 

基本语法:left:auto | length

  1. auto:默认值,无特殊定位。
  2. length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。

代码:

div { position:relative; top:-3px; left:6px; } 

基本语法:top:auto | length

  1. auto:默认值,无特殊定位。
  2. length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。

代码:

div { position:relative; top:-3px; left:5px;}

基本语法:right:auto | length

  1. auto:默认值,无特殊定位。
  2. length:长度值 | 百分比,必须定义position的属性值为absolute或者relative才有效。

代码:

div { position:relative; top:-3px; right:6px}

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

代码:

<style type="text/css"> #box1 { margin: 10px; width: 100px; height: 100px; background-color: blue; } #box2 { margin: 10px; width: 100px; height:100px; background-color: red; /*position: relative; left: 100px; top: 100px;*/ } </style><div ></div><div ></div>

绝对定位相对于它的参照物移动位置,如果没有,默认为body为参照物。

  • 带你走进CSS定位详解,多试试,熟能生巧嘛~

小礼物走一走 or 点赞

图片 2送❤

本文由威尼斯888发布于计算机网络 / 编程,转载请注明出处:基本语法

关键词:

上一篇:没有了

下一篇:没有了