css的定位:

其中css中被分为块级元素与行内元素。如块级元素div、hx标签、p元素。行内元素span和strong

W3school给出的一切皆为框的定义。

而且可以使用display属性,强行将行内元素变为块级元素。如display:block。

CSS的定位机制:

主要分为三类:

普通流、浮动、和绝对定位。

position属性

static元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

relative元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。

absolute元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

fixed元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。

定位属性:

position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序

CSS的相对定位:

如图所示,移动了位置任然占有原来的位置。

css样式基础三的更多相关文章

  1. CSS样式基础知识

    CSS样式基础知识 CSS样式概述 CSS是Cascading Style Sheet 的缩写.译作“层叠样式表单”.是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 引用位 ...

  2. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  3. HTML CSS样式基础

    一.css 1.什么是css? Cascading Style Sheet 级联样式表 改变样式的一个工具,说白了,就是为了让我们的页面好看, HTML底层封装了css这样一个工具. 2.怎么使用cs ...

  4. CSS样式基础:

    CSS:外部文件导入  <link rel="stylesheet" type="text/css" href="./style.css&quo ...

  5. 使用CSS样式的三种方法

    一.内联样式 内联样式通过style属性来设置,属性值可以任意的CSS样式. 1 <!DOCTYPE html> 2 <html lang="en"> 3 ...

  6. css样式基础详解

    一.字体属性:(font) 1.大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 2.样式 {font-styl ...

  7. CSS样式基础2

    CSS: 一.常用样式:字体,颜色,背景 二.布局:浮动  定位  标签特性 三.标签盒子模型: 边距  边框 四.动画:旋转 渐变 注意:子标签会继承父标签的样式但不是所有的样式都会被继承. 1.1 ...

  8. CSS样式基础总结

    首行缩进:text-indent:2em 行高:line-height:1.5em 1.5倍行距 也可以设置像素文字修饰:text-decoration:underline下划线 line-throu ...

  9. js改变css样式的三种方法

    共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...

随机推荐

  1. MySql连接Visual studio Code First插件

    到mySql官网Downloads==> MySQL on Windows==>MySQL for Visual Studio 下载插件安装即可

  2. TortoiseGit 相关操作

    1.TortoiseGit 记住用户名和密码的方法当你安装且配置好git后,在C:\Documents and Settings\Administrator\ 目录下有一个  .gitconfig 的 ...

  3. sqlserver锁表、解锁、查看销表 (转载)

    sqlserver中怎么锁表.解锁.查看销表呢,下面我以三个不同的实例给各位朋友详细介绍一下有需要的朋友可参考一下. 更多详细内容请查看:http://www.111cn.net/database/O ...

  4. 如何理解C#委托

    一:从下面的例子开始,理解委托变量本质 如上图,Condition是我定义的委托变量.这个委托变量的本质就是地址变量(即C语言当中的指针变量),它保存的是方法的入口地址. 当函数的调用者传递实参给这个 ...

  5. 实现一个小目标,动动小指,分享可得iphone7/ipad/U盘|奥威软件

    为什么很多人喜欢冬天呢?是因为冬天有着“床边挂起长长棉袜,而你做着甜甜美梦”的平安夜?还是因为冬天有着“具有无法言述的浪漫情怀”的圣诞节? 是不是还沉浸在平安夜,圣诞节的双节狂欢中, 好像不管长到多大 ...

  6. 28个Unix/Linux的命令行神器_转

    28个Unix/Linux的命令行神器 下面是Kristóf Kovács收集的28个Unix/Linux下的28个命令行下的工具,有一些是大家熟悉的,有一些是非常有用的,有一些是不为人知的.这些工具 ...

  7. varsh4.1 安装清除cache

    yum install automake autoconf ncurses-devel libxslt groff pkgconfig python-docutils readline-devel - ...

  8. 【转】PHP ob_start() 函数介绍

    php ob_start 与 ob_end_flush() 是 php 的缓冲输出函数. ob_start([string output_callback])- 打开输出缓冲区,所有的输出信息不在直接 ...

  9. iOS,应用崩溃日志分析

    参考资料:http://www.cocoachina.com/industry/20130725/6677.html 1.获得崩溃日志 2.崩溃日志实例 3.符号化崩溃日志 4.低内存闪退 获得崩溃日 ...

  10. 分布式集群搭建(hadoop2.6.0+CentOS6.5)

    摘要:之前安装过hadoop1.2.1集群,发现比较老了,后来安装cloudera(hadoop2.6.0),发现集成度比较高,想知道原生的hadoop什么样子,于是着手搭建一个伪分布式集群(三台), ...