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. 字典（Dictionary）

    字典(Dictionary) 字典是一种可变的容器模型,由键值对组成,键和值用冒号分隔,用花括号括起来: d = {key1 : value1, key2 : value} 字典的值可以是任何类型的数 ...

  2. VS2013中修改MFC对话框左上角和exe图标

    一.开发环境 1.VS2013: 2.C++ / MFC: 二.更改步骤 1)创建一个新工程,可以什么都不加.打开“资源视图”, 右键点击项目名称,选择“添加资源”,导入“Icon”资源文件(事先准备 ...

  3. luogu P4289 [HAOI2008]移动玩具

    传送门 这道题可以二进制记录状态搜索 也可以做以下考虑 若一个棋子要移动到另一个位置上去,则步数为两点的曼哈顿距离(横坐标差的绝对值+纵坐标差的绝对值),因为假设路径上有其他的棋子,可以通过移动其他棋 ...

  4. SpringBoot2.x整合Redis实战 4节课

    1.分布式缓存Redis介绍      简介:讲解为什么要用缓存和介绍什么是Redis,新手练习工具 1.redis官网 https://redis.io/download          2.新手 ...

  5. 2018-2019-2 网络对抗技术 20165230 Exp2 后门原理与实践

    目录 1.实验内容 2.基础问题回答 3.常用后门工具实践 3.1netcat 3.2Meterpreter 3.3socat 4.实验过程 任务一:使用netcat获取主机操作Shell,cron启 ...

  6. nodejs对mongodb数据库的增删改查操作（转载）

    首先要确保mongodb的正确安装,安装参照:http://docs.mongodb.org/manual/tutorial/install-mongodb-on-debian-or-ubuntu-l ...

  7. Linux动态频率调节系统CPUFreq之一：概述【转】-- 非常好的博客

    转自:http://blog.csdn.net/droidphone/article/details/9346981     目录(?)[-] sysfs接口 软件架构 cpufreq_policy ...

  8. 内核IS_ERR宏解析 【转】

    转自:http://blog.chinaunix.net/uid-20196318-id-28769.html 最近在使用filp_open打开文件时遇到到一个问题,当打开一个并不存在的文件时,fil ...

  9. linux /proc目录说明（访问内核数据结构，修改内核设置）

    1. /proc目录 Linux 内核提供了一种通过 /proc 文件系统,在运行时访问内核内部数据结构.改变内核设置的机制.proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以 ...

  10. （常用）re模块

    re模块(正则)#re:一些带有特殊含义的符号或者符号的组合#为什么要用re:一堆字符串中找到你所需要的内容,过滤规则是什么样,通过re模块功能来告诉计算机你的过滤规则#应用:在爬虫中最为常用:使用爬 ...