一、盒子模型:

模型如下:

如图:盒子模型包括:margin、padding、border、content四部分。

margin:外边距,透明,能够显示父级的背景颜色等。表示元素与元素之间的间隔或者说是距离。

padding:内边距,显示当前元素本身的背景颜色。

border:边框。

content:显示内容的区域,对于CSS的width设置的宽度就是该区域的宽度。不过 IE 认为width是 border_left + border_right + paddiing_left + paddiing_right + content 。

对于一个元素来说其显示区域只是 border_left + border_right + paddiing_left + paddiing_right + content ,如下图的红色区域。对于margion只是表示元素之间的间隔。

http://blog.csdn.net/tomatozq/article/details/7178144

二、 box-sizing:

1、box-sizing的意义。

  width表示的是 content 的宽度;由于很多时候还要设置 border 显示,这样导致宽度通常不好计算,导致显示效果不好甚至出现滚动条。box-sizing就是解决这个问题的。

  2、box-sizing 的属性值:

  • content-box:默认值,即 width 表示的是 content 的宽度;
  • border-box:即块级元素的 width 包含 border的宽度,自然也就包含padding的宽度。即 width=content+padding-left+padding-right+ border-left-width +border-right-width;
  • inherit:从父元素继承。即父元素的 box-sizing 为何值,则该元素就为何值。
  • initial:与其他所有CSS 样式属性一样,表示默认值。此处则为content-box,但是IE不支持。

  常用:

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

CSS——盒子模型的更多相关文章

  1. 深入理解CSS盒子模型

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

  2. CSS盒子模型的理解

    标准的CSS盒子模型包括:内容(content).填充(padding).边框(border).边界(margin) 这些属性,可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子 ...

  3. 每天学点前端——基础篇1:css盒子模型,绝对定位和相对定位

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

  4. CSS 盒子模型概述

    一.简介   CSS 盒子模型(元素框)由元素内容(content).内边距(padding).边框(border).外边距(margin)组成.     盒子模型,最里面的部分是实际内容:直接包围内 ...

  5. 标准的CSS盒子模型?与低版本IE的盒子模型有什么不同的?

    CSS盒子模型:由四个属性组成的外边距(margin).内边距(padding).边界(border).内容区(width和height); 标准的CSS盒子模型和低端IE CSS盒子模型不同:宽高不 ...

  6. 理解CSS盒子模型

    概述 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin),CSS盒子模型都具备这些属性,也主要是这些属性. 这些属性我们可以把它转移到我 ...

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

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

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

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

  9. 聊聊css盒子模型

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

  10. css 盒子模型理解

    盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...

随机推荐

  1. QT5中如何使用QFtp类

    QT5中如何使用QFtp类 http://2662597.blog.51cto.com/2652597/1279806 由于QT5对QML的支持有很大的改进,所以打算将原来基于QT4的程序移植到QT5 ...

  2. Codeforces Round #273 (Div. 2) D. Red-Green Towers 背包dp

    D. Red-Green Towers time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  3. scrapy的操作

  4. Android 6.0运行时权限第三方库的使用-----RxPermissions

    运行时权限的讲解在前一篇博客已经算是说的比较清楚了,这里就不说了,如果对6.0这个新特性不是很了解的朋友建议先看看(地址:http://blog.csdn.net/qq_33923079/articl ...

  5. SQL Server 2016 —— 聚集列存储索引的功能增强

    作者 Jonathan Allen,译者         邵思华         发布于     2015年6月14日   聚集列存储索引(CC Index)是SQL Server 2014中两大最引 ...

  6. write.table函数语法:

    write.table (x,  file ="",  sep ="",  row.names =TRUE,  col.names =TRUE,  quote ...

  7. spring: 在表达式中使用类型

    如果要在SpEL中访问类作用域的方法和常量的话,要依赖T()这个关键的运算符.例如,为了在SpEL中表达Java的Math类,需要按照如下的方式使用T()运算符: T{java.lang.Math} ...

  8. Memcached之缓存雪崩,缓存穿透,缓存预热,缓存算法

    缓存雪崩 缓存雪崩可能是因为数据未加载到缓存中,或者缓存同一时间大面积的失效,从而导致所有请求都去查数据库,导致数据库CPU和内存负载过高,甚至宕机. 解决思路: 1,采用加锁计数,或者使用合理的队列 ...

  9. mysql查询语句复习小结

    SQL查询语句基本语法: select 字段列表 from 表名|视图列表 [where 条件表达式1] [group by 属性名1 [having 条件表达式2]] [order by 属性名2 ...

  10. hzau 1200 Choosy in Food

    1200: Choosy in Food Time Limit: 1 Sec  Memory Limit: 1280 MBSubmit: 32  Solved: 5[Submit][Status][W ...