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. HelloCharts pie饼图绘制

    先引用hellocharts-library-<version>.jar 然后在layout中设置 <lecho.lib.hellocharts.view.PieChartView ...

  2. oracle 数据库 if...elsif...语句

    CREATE OR REPLACE FUNCTION "UFN_GETIDS" (    OPEKIND   IN   VARCHAR2,-- 查询类型    PARAMS IN ...

  3. gridView 布局间距合理化的有效办法

    网上有很多人闻到过这个问题,给出好多办法,多数人并不是意见提的不对,而是没有抓住问题的本质 . 因为我要做一个girdView的demo实例,遇到了这个问题 与大家一起分享,如果有想要demo的请给我 ...

  4. IOS中对于一些控件的抖动效果

    这两天在网上看到一个帖子讨论关于有些app 输入账密时候 错误的话会有抖动效果出现,然后自己琢磨了下如何实现,下面上代码!!! 首先 写一个UIView的分类 #import <UIKit/UI ...

  5. 通过 sp_configure 进行 Database Mail 配置

    通过 sp_configure 进行 Database Mail 配置 直接执行步骤一. 如果报错,则先执行步骤二,再执行步骤一. 一. sp_configre ; GO RECONFIGURE; G ...

  6. (转) How to install eclipse in ubuntu 12.04

    源地址:http://www.krizna.com/ubuntu/install-eclipse-in-ubuntu-12-04/ Eclipse installation in ubuntu 12. ...

  7. redis数据结构与主要命令

    redis的数据类型有:string.hashes.lists.sets,sorted sets 1.string类型: set.get添加键值对获得键值对.如果多次赋值会覆盖掉原来的value se ...

  8. Oracle11g R2学习系列 之七安全性

    其实,对于目前我使用的Oracle的水平来看,还达不到使用安全管理的高度,只是作为一个学习来看一下. 关于Oracle的安全管理,一般使用OEM来操作完成好了,入口是:OEM的“服务器”属性页中,选择 ...

  9. Java学习笔记--多线程

    rollenholt的博文:http://www.cnblogs.com/rollenholt/archive/2011/08/28/2156357.html 弹球例子: 0. 创建Bounce框架 ...

  10. poj2505-A multplication game

    题意:两个人轮流用2~9来乘n,使n不断扩大,n开始为1.当给一个固定值k,谁先使n超过k谁赢. 分析:能到达必败态的状态为必胜态,只能到达必胜态的状态为必败态.对于给定的k,n>=k时为必败态 ...