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. Angular-ngtable联动全选

    之前于Angular第三方插件ngTable的官网demo上看到的例子,但苦于demo中联动全选为选中所有,项目中并不适用,因此做了下小小的修改,修改目的只是为实现其功能,方法不敢苟同,若有更加简便的 ...

  2. HTTPS 进阶

    参考 一.中间人攻击 概念:攻击者插入到原本直接通信的双方,让双方以为还在直接跟对方通讯,但是实际上双方的通信对方已经变成中间人,信息已经被中间人获取或篡改. HTTPS 的攻击分为两类:SSL 连接 ...

  3. WordPress忘记登录密码

    后台的登录密码使用的是md5加密的,有时候会忘记登录密码,那么可以修改数据库,把密码改为你知道的字符串的md5加密值 如 hello对应的md5加密值为:5d41402abc4b2a76b9719d9 ...

  4. Android开发环境配置

    由于公司项目需要,最近转做Android开发,这里我来介绍一下Android开发环境的配置过程. 首先,需要下载所需要的软件工具,如下所示: 1.Java:开发基础环境,JDK和JRE这两个都要下载的 ...

  5. LeetCode Plus One Linked List

    原题链接在这里:https://leetcode.com/problems/plus-one-linked-list/ 题目: Given a non-negative number represen ...

  6. 快速创建一个springboot项目

    创建一个maven项目(springboot.mybatis-plus) 目标:可以访问ftl页面.对象(json字符串),可以进行单元测试 1.新建一个maven项目,选择模板maven-arche ...

  7. 高级java必会系列一:zookeeper分布式锁

    方案1: 算法思路:利用名称唯一性,加锁操作时,只需要所有客户端一起创建/test/Lock节点,只有一个创建成功,成功者获得锁.解锁时,只需删除/test/Lock节点,其余客户端再次进入竞争创建节 ...

  8. js中的 && 和 ||

    js里面&&和||用法容易绕进去. 总结一下,遵循短路原则. &&就是去找false的选项,||就是去找true的选项. 比如 a&&b 如果 a为fa ...

  9. iOS控件之UIResponder类

    iOS控件之UIResponder类 在iOS中UIResponder类是专门用来响应用户的操作处理各种事件的,我们知道UIApplication.UIView.UIViewController这几个 ...

  10. Wampserver 2.5 多站点配置方法

    写在开头:本文适用于wampserver2.5版本,和wamp的老版本配置有语法上的区别,笔者正是因为被老版本的配置办法给整迷糊了所以才总结了一篇针对2.5版本的配置方法,如果您还停留在1.x或着已经 ...