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. UIView设置少于四个的圆角

    最近的需求中有个label需要设置右下角为圆角,其余三个为直角,一开始用的是重写drawRect,然后用绘图重绘每个角的样子,计算起来还是麻烦 后来发现了下面的方法: UILabel *courseS ...

  2. poj3614 贪心

    Sunscreen Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6410   Accepted: 2239 Descrip ...

  3. hdu 2564 词组缩写

    Problem Description 定义:一个词组中每个单词的首字母的大写组合称为该词组的缩写. 比如,C语言里常用的EOF就是end of file的缩写. Input 输入的第一行是一个整数T ...

  4. SMBUS（IIC）总线

    1.SPI和IIC一般都作为板上通信,UART.SMBUS和USB一般都作为板间通信. 其中SMBUS是参考IIC制定出来的眼生病,两者很像. 2.SMBUS的I/O接口是由两条线组成的双向串行总线. ...

  5. 大转盘Demo

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. meta 属性

    几乎所有的网页里,我们可以看到类似下面这段的html代码:<head><meta http-equiv="content-Type" content=" ...

  7. 安装wampserver2时出现的问题

    提示丢失MSVCR100.dll 如果安装其他软件也是同样的提示情况,估计也是这个原因,以下分别是32位与64位的VC10下载地址: VC10 SP1 vcredist_x86.exe 32 bits ...

  8. 使用PULL方式解析XML资源文件下面的xml文件

    public class MainActivity extends Activity { private Button btn = null; private List<Map<Strin ...

  9. BZOJ 2599 Race(树分治)

    题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=2599 题意:给一棵树,每条边有权.求一条路径,权值和等于K,且边的数量最小. 题意:每次 ...

  10. 在C51中如何实现软复位？

    可以定义一个指向复位向量(0x0000)的函数指针,然后在C程序中需要软复位的地方调用该函数: ((void (code *) (void)) 0x0000) (); 例如,以下程序不断地复位: vo ...