css定位html元素的示例分析

本文主要介绍"css定位html元素的示例分析" 有关的知识，希望能够解决您遇到有关问题，下面我们一起来看看这篇 "css定位html元素的示例分析" 文章。

　　定位值有五种类型：static（静态的）、relative（相对的）、fixed（固定的）、absolute（绝对的）、sticky（黏性的）

　　static（静态的）

　　默认情况下，HTML元素定位为静态，元素根据文档的正常流程定位;静态定位元素不受顶部，底部，左侧和右侧属性的影响。一个元素用position:static定位不会有其他特殊的定位方式。

　　用于将位置设置为静态的CSS是：

　　position:static;

　　接下来是使用静态位置值的示例：

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　body{

　　color:WHITE;

　　font:Helvetica;

　　width:420px;

　　}

　　.square-set,

　　.square{

　　border-radius:15px;

　　}

　　.square-set{

　　background:darkgrey;

　　}

　　.square{

　　position:static;

　　background:Green;

　　height:70px;

　　line-height:40px;

　　text-align:center;

　　width:90px;

　　}

　　</style>

　　</head>

　　<body>

　　<divclass="square-set">

　　<figureclass="squaresquare-1">SQUARE1</figure>

　　<figureclass="squaresquare-2">SQUARE2</figure>

　　<figureclass="squaresquare-3">SQUARE3</figure>

　　<figureclass="squaresquare-4">SQUARE4</figure>

　　</div>

　　</body>

　　</html>


css定位html元素的示例分析

关于 "css定位html元素的示例分析" 就介绍到这。希望大家多多支持编程宝库。

css怎么实现弹跳球动画效果：本文主要介绍"css如何实现弹跳球动画效果" 有关的知识，希望能够解决您遇到有关问题，下面我们一起来看看这篇 "css如何实现弹跳球动画效果" 文章。 　　1、定义动画关键帧 　　对于这个动画，我们将使用两个关 ...