content

padding

border

margin

可以理解为在商场上看到的电视机。

电视机------content

装电视机的箱子边框有粗细------border

电视机与箱子之间的泡沫-------padding

一台电视机与另一台电视机的距离-----margin

content为电视机，padding为电视机与箱子之间的泡沫，border为装电视机的箱子厚度，margin当前这台电视机与其他电视机的距离

position

relative        相对   相对原来的位置移动   原位置保留

absolute       绝对　相对最近的非标准流盒子移动　原位置不保留，被填充    变为块级框

static           默认　left right不生效了

fixed　　　　相对窗口本身

inherit         继承

css盒子模型和定位的更多相关文章

  1. css盒子模型，定位，浮动

    1.盒子模型 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清除内容周围的区域,内边距是透明的. ...

  2. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  3. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  4. 每天学点前端——基础篇1：css盒子模型，绝对定位和相对定位

    什么是css盒子模型(Box Model)? W3C中解释为:规定了元素框处理元素内容.内边距.边框和外边距的方式: MDN:文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性--比如 ...

  5. 几个容易出错的css盒子模型细节

    css是前端必须掌握的技能之一.其中的box模型,如图所示: 大体就是border.margin.padding和content,概念挺好理解.但当盒子模型与其他属性一块使用时产生的现象,或许您还难以 ...

  6. <转>HTML+CSS总结/深入理解CSS盒子模型

    原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...

  7. 聊聊css盒子模型

    css盒子模型原理: 在网页设计中常听的属性名:内容(content).填充/内边距(padding).边框(border).外边距(margin), CSS盒子模式都具备这些属性. 这些属性我们可以 ...

  8. CSS盒模型和定位的类型

    此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...

  9. [Web 前端] CSS 盒子模型，绝对定位和相对定位

    cp : https://blog.csdn.net/web_yh/article/details/53239372 一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在 ...

随机推荐

  1. git删除仓库的某个文件

    可以用git rm命令删除文件(删除远程仓库文件) git clone 仓库地址 git add . git rm 文件//本地中该文件会被删除 git rm -r文件夹 //删除文件夹 上面会把对应 ...

  2. JAVA实现具有迭代器的线性表(单链表)

    一,迭代器的基本知识: 1,为什么要用迭代器?(迭代:即对每一个元素进行一次“问候”) 比如说,我们定义了一个ADT(抽象数据类型),作为ADT的一种实现,如单链表.而单链表的基本操作中,大部分需要用 ...

  3. LINQ to SQL 实现 GROUP BY、聚合、ORDER BY

    Ø  前言 本示例主要实现 LINQ 查询,先分组,再聚合,最后在排序.示例很简单,但是使用 LINQ 却生成了不同的 SQL 实现. 1)   采用手动编写 SQL 实现 SELECT ROW_NU ...

  4. 破解WEP工具wesside-ng

    1.关于wesside-ng wesside-ng是一款自动化的WEP破解工具,该工具采用了多种WEP加密破解技术.它首先会自动明确目标无线网络,然后尝试与之相关联,在获得PRGA(伪随机生成算法)异 ...

  5. C# 时间戳与时间相互转化

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 时间戳d ...

  6. .net 重新注册

    今天同事问 一个IIS 的监控站点 .net 出现问题:对于windows 一般都停留在重启生效思想:然并没有生效: 于是建议重新注册.NET : 一般出现原因: 在默认安装路径 重启注册: 默认的安 ...

  7. hdp3: regionserver running as process 3170. Stop it first.

    1 启动hbase报错 hdp3: regionserver running as process 3170. Stop it first. 2 始终没有发现错误日志 3 jps没有发现hbase的r ...

  8. mysql select 时间戳转标准时间写法

    select  FROM_UNIXTIME(create_time, '%Y-%m-%d %H:%i:%S') as create_time from tabName

  9. 编码器AE & VAE

    学习总结于国立台湾大学 :李宏毅老师 自编码器 AE (Auto-encoder)    & 变分自动编码器VAE(Variational Auto-encoder)             ...

  10. Delphi中的动态包，有详细建立包的步骤（答案很简单：因为包的功能强大）

    为什么要使用包? 答案很简单:因为包的功能强大.设计期包(design-time package)简化了自定义组件的发布和安装:而运行期包(run-time package)则更是给传统的程序设计注入 ...