`

CSS设置精选版（定位）

    博客分类：
  • css
CSSWAPWebXSL浏览器 
阅读更多

1、相对定位：{position:relative;left:20px;}

从元素的原始左侧位置增加20像素

 

2、绝对定位：{position:absolute;left:20px;top:50px;}

 

3、相对于浏览器窗口的定位：{position:fixed;top:50px;right:30px;}

 

4、定位图片：

   4.1 有图片和文字时，让图片和文字左右排版，而不是图片独占一行：

       img{position:absolute; top:0px}

   4.2 图片顶部、底部、左部、右部定位

       img{position:absolute; top:20px}(bottom left right)

   4.3 文字环绕图片

       img{float:left}(right)

 

5、裁剪图片：img{position:absolute; clip:rect(0px 50px 200px 0px)}

 

6、图象与文字的顶部或底部对齐：img{vertical-align:text-top 或 text-bottom}

 

7、利用z-index使图片透明：img{z-index:-1}

 

8、利用js改变框的浮动：object.style.cssFloat="left"

 

9、利用ul li及浮动显示横向菜单的例子：

<style type="text/css"> 
ul  
{  
float:left;  
width:100%;  
padding:0;  
margin:0;  
list-style-type:none;  
}  
a  
{  
float:left;  
width:7em;  
text-decoration:none;  
color:white;  
background-color:purple;  
padding:0.2em 0.6em;  
border-right:1px solid white;  
}  
a:hover {background-color:#ff3300}  
li {display:inline}  
</style> 
 
<ul> 
<li><a href="#">Link one</a></li> 
<li><a href="#">Link two</a></li> 
<li><a href="#">Link three</a></li> 
<li><a href="#">Link four</a></li> 
</ul>  
 

10、利用浮动创建页面header footer left 和 content的例子：

<html> 
<head> 
<style type="text/css"> 
div.container  
{  
width:100%;  
margin:0px;  
border:1px solid gray;  
line-height:150%;  
}  
div.header,div.footer  
{  
padding:0.5em;  
color:white;  
background-color:gray;  
clear:left;   //左侧不允许浮动元素，clear说明参考11  
}  
h1.header  
{  
padding:0;  
margin:0;  
}  
div.left  
{  
float:left;  
width:160px;  
margin:0;  
padding:1em;  
}  
div.content  
{  
margin-left:190px;  
border-left:1px solid gray;  
padding:1em;  
}  
</style> 
</head> 
<body> 
 
<div class="container"> 
 
<div class="header"><h1 class="header">W3School.com.cn</h1></div> 
 
<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div> 
 
<div class="content"> 
<h2>Free Web Building Tutorials</h2> 
<p>At W3School.com.cn you will find all the Web-building tutorials you need,  
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p> 
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div> 
 
<div class="footer">Copyright 2008 by YingKe Investment.</div> 
</div> 
 
</body> 
</html> 

 

11、clear 属性设置一个元素的侧面是否允许其他的浮动元素。用法：clear:left | right | both | none

       11.1 通过js改变： object.style.clear="left"

       11.2 对于右侧不允许浮动元素使用时，必须指定float:right的情况下。

值描述
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动元素
none 默认。允许浮动元素出现在两侧。

分享到：
| Extjs的Ajax Request源码流程分析
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css定位绝对相对定位

    ### CSS定位详解：绝对定位与相对定位 #### 相对定位（Relative Positioning） 相对定位是一种常见的CSS定位方式，它允许元素相对于其正常位置进行偏移。这种定位不会影响其他元素的位置。 - **定义**: 当元素...

    前端css定位.pdf

    总的来说，CSS定位技术为前端布局提供了强大的控制能力，可以实现元素的精确布局。理解定位的工作原理及其在不同布局方式（标准流、浮动、定位）中的应用，对于前端开发者来说至关重要。在网页布局中，定位通常是在...

    CSS+Js定位与相对定位

    CSS定位主要包括静态定位、相对定位、绝对定位、固定定位和粘性定位。其中，相对定位是基础，它允许元素相对于其原始位置进行偏移，但不会改变文档流。相对定位的CSS代码通常写作： ```css .element { position: ...

    css图片定位

    在网页设计中，CSS（Cascading Style Sheets）图片定位是一项关键技能，它允许开发者精确地控制图像在页面上的位置，以实现丰富的视觉效果。本文将深入探讨CSS图片定位的概念、方法以及一些实用工具。 首先，理解...

    css sprite 组合图 定位 生成

    CSS Sprite是一种网页图像优化技术，它将多个小图像合并到一张大图（组合图）中，然后通过CSS的背景定位来显示需要的部分。这样做的主要目的是减少HTTP请求次数，提高页面加载速度，优化用户体验。当你在网页设计中...

    CSS下盒子模型定位浅析.pdf

    要改变元素的位置，通常需要调整元素在HTML结构中的顺序或应用CSS定位属性。 2.2 margin和padding定位 margin用于设置元素的外边距，padding则设置内边距。它们都有上、右、下、左四个方向的属性，可以单独设置或...

    基于CSS技术的测距定位原理

    CSS定位系统通常由多个锚点（固定位置的参考节点）和标签节点（移动的目标节点）构成。通过测量标签节点与多个锚点之间的距离，可以确定标签节点在空间中的具体位置。系统架构可以实现不同的功能，如动态跟踪和路径...

    CSS_样式定位图

    CSS_样式定位图

    css浮动和定位

    **二、CSS定位** 定位（Positioning）提供了更精细的控制，使开发者能够精确地指定元素在页面上的位置。定位分为以下几种类型： 1. **静态定位（static）**：这是元素的默认定位方式，遵循正常文档流。 2. **相对...

    20190801-css相对定位.txt

    css 相对定位 设置为相对定位的元素框会偏移某个距离。元素仍然保持其为定位前的形状，它原本所占的空间仍保留。 css相对定位 相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在她所在的...

    dreamweaver 【CSS样式规则对话框详解】& CSS定位详解之绝对定位和相对定位

    有了这个就可以搞定很多事情 在“CSS规则对话框”中，我们可以通过类型、背景、区块、方框、边框、列表、定位和扩展项的设置，来美化我们的页面，当然啦，我们在定义某个...还有【CSS定位详解之绝对定位和相对定位】哦

    html+css定位练习

    总的来说，HTML+CSS定位是网页设计中的关键技能，熟练掌握它能让你创建出更加灵活和精细的网页布局。通过这个练习集，希望你能深入理解定位的概念，提升你的网页设计能力。记得多实践、多尝试，理论与实践相结合才能...

    css中的定位

    #### CSS定位机制概述 CSS（层叠样式表）为网页提供了强大的样式控制能力，其中定位机制是实现复杂布局的关键技术之一。CSS提供了多种定位方式，包括普通流、浮动以及绝对定位等，每种方式都有其特定的应用场景。 ...

    CSS定位

    本篇文章将深入探讨CSS定位模型，包括static、relative、absolute、fixed以及flexbox和grid等定位方式，帮助你更好地理解和应用这些概念。 首先，我们从最基础的定位方式开始——`static`定位。这是所有元素默认的...

    借助css定位实现动态关联的一个例子

    本话题主要关注如何利用CSS定位技术实现动态关联的效果，这对于网页设计和前端开发至关重要。下面将详细阐述CSS定位的基本概念、常见定位方式以及如何应用它们来创建动态关联效果。 首先，了解CSS定位的基本概念。...

    css-绝对定位的参考对象

    在CSS布局中，绝对定位（absolute positioning）是一种强大的定位机制，允许元素脱离其正常文档流，并根据相对于某个特定祖先元素的位置进行布局。这篇博客“css-绝对定位的参考对象”深入探讨了这一主题，让我们一...

    css基础教程--CSS快速入门、怎样编写CSS、CSS属性、CSS定位、CSS滤镜　

    4. CSS定位： 定位是CSS中的一项重要技术，用于控制元素在页面上的精确位置。主要有以下几种定位方式： - `static`：默认值，元素按常规流排列。 - `relative`：相对于其正常位置偏移。 - `absolute`：相对于...

    CSS网页布局教程:绝对定位和相对定位

    1. **创建弹出框**：使用相对定位来设置主容器，绝对定位用于设置弹出框，可以方便地调整其相对于主容器的位置。 2. **导航菜单**：菜单项通常使用相对定位，当鼠标悬停时，下拉菜单可以使用绝对定位显示在正确的...

Magicbox
Global site tag (gtag.js) - Google Analytics