1.盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

2.定位

Static 定位

HTML元素的默认值，即没有定位，元素出现在正常的流中。

静态定位的元素不会受到top, bottom, left, right影响。

Fixed 定位

元素的位置相对于浏览器窗口是固定位置。

即使窗口是滚动的它也不会移动

Relative 定位

相对定位元素的定位是相对其正常位置。

Absolute 定位

Absolutely定位使元素的位置与文档流无关，因此不占据空间。

Absolutely定位的元素和其他元素重叠。

3.浮动

float浮动

浮动之后脱离原本的文档流

clear清楚浮动

css盒子模型，定位，浮动的更多相关文章

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

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

  2. 前端之CSS——盒子模型和浮动

    一.CSS盒子模型 HTML文档中的每个元素都被描绘成矩形盒子,这些矩形盒子通过一个模型来描述其占用空间,这个模型称为盒子模型. 盒子模型通过四个边界来描述:margin(外边距),border(边框 ...

  3. CSS盒子模型(boeder)+浮动(float)+定位(position)

    盒子的上下层:margin--background-color--background-image--padding--content--border(最外层) 计算一个盒子宽 =  内容的宽(wid ...

  4. 深入理解CSS盒子模型

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

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

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

  6. 聊聊css盒子模型

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

  7. 从CSS盒子模型说起

    前言 总括: 对于盒子模型,BFC,IFC和外边距合并等概念和问题的总结 原文地址:从CSS盒子模型说起 知乎专栏:前端进击者 博主博客地址:Damonare的个人博客 为学之道,莫先于穷理:穷理之要 ...

  8. css盒子模型、垂直外边距合并

    css盒子模型由四部分组成:内容(content).填充(padding).边框(border).边距(margin),其中css样式中定义的width属性是定义内容区域的宽度,正常情况下,设置了内容 ...

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

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

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

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

随机推荐

  1. CSS3 基础知识

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  2. ci 的控制器文件夹下开加子文件夹

    在一个比较大的项目中,希望controllers下再细分子文件夹.例如:controllers/pj,controllers/xxk等. 做法是: 1.在controllers下添加相关的子文件夹,例 ...

  3. 做好织梦dedecms安全防护全部方法

    很多同学遇到网站被攻击挂马,大都不是竞争对手所为.多数情况下是黑客利用工具批量扫描入侵的.因此安全防护自关重要. 织梦安装时注意: 修改默认数据库前缀: 在dedecms安装的时候修改下数据库的表前缀 ...

  4. C语言预处理指令的初步了解

    所谓预处理是指在进行编译的第一遍扫描(词法扫描和语法分析)之前所作的工作.预处理是C语言的一个重要功能,它由预处理程序负责完成.当对一个源文件进行编译时,系统将自动引用预处理程序对源程序中的预处理部分 ...

  5. mvc上传，下载，浏览文件功能（用uploadify插件）

    类 public class UpLoadFileController : Controller { // // GET: /UpLoadFile/ public ActionResult Index ...

  6. vim 删除临时文件

    今天在用Xshell连接到CentOS后 使用vim 编辑文档 因为中途有事  临时关闭 并没有保存 再一次打开时 vim 提示要恢复 , 但是每次打开文件后到要恢复,于是找到了以下办法 和vim工作 ...

  7. AFNetworking了解

    AFNetworking了解   AFNetworking是一个讨人喜欢的网络库,适用于iOS以及Mac OS X. 它构建于在NSURLConnection, NSOperation, 以及其他熟悉 ...

  8. Ceph的Block分析

    一个块是一个连续的字节序列(例如一个512字节的连续数据是一个块).基于块的存储接口通常是旋转介质,例如磁盘.光盘.软盘等.块设备接口的普及使得可以用虚拟的块设备成为和大容量数据存储系统交互的接口,如 ...

  9. (摘) MDI登陆问题

    MDI编程中需要验证用户身份,那么登陆窗口就需要在验证密码后进行相关的隐藏处理. (1)隐藏登陆窗口(登陆窗体作为启动) 登陆按钮事件:this.Hide();//隐藏登陆窗口MDI_Name M = ...

  10. Android使用自带JSONObject解析JSON数据

    import org.json.JSONArray; import org.json.JSONException; import org.json.JSONObject; import android ...